簡単！はてなブログにTwitterタイムラインを埋め込む方法

X（旧Twitter）のタイムラインをサイドバーに表示したい…と考えたことはありませんか？

はじめてブログを訪れた読者がタイムラインを目にすれば、さらにあなたに興味を抱いてくれるかもしれません。

この記事では、Xのタイムラインをはてなブログのサイドバーに設置する方法を、初心者にもわかりやすくご紹介します。

サイドバーにタイムラインを埋め込む手順はたったの3つ。今回の作業は、すべてパソコンで行いますよ。一緒にやってみましょう♪

1. 埋め込みたいタイムラインのコードをコピー
2. コードをはてなブログのサイドバーに貼る
3. お好みでカスタマイズ

Xのタイムラインをサイドバーに埋め込むメリット

Xのタイムラインを設置すると、なにかいいことがあるの？

Xのタイムラインをサイドバーに表示させるメリットは主に３つです。

1. リアルタイムな情報を提供できる
2. コンテンツを多様化できる
3. トラフィックの増加が期待できる

以下で詳しく説明します。

１．リアルタイムな情報を提供できる

タイムラインには、最新の投稿がリアルタイムで表示されます。そのため、Xが頻繁に更新されていれば、ブログを訪れた読者に、あなたの最新の活動や関心事を提供することができるのです。

２．コンテンツの多様化

テーマを決めてブログ運用をしている場合でも、Xではプライベートな情報や個人の興味を発信できます。サイドバーにタイムラインが埋め込まれていれば、読者にあなたの人間性をより深く知ってもらえることでしょう。

３．トラフィックの増加が期待できる

トラフックとは、Webサイトにおける「交通量」のようなもの。

サイドバーにXのタイムラインを表示すれば、読者はブログからX、またはXからブログへ簡単に移動できます。そのため、相互のプラットフォーム間での「アクセス数」「セッション数」などトラフィックの向上が期待できるのです。

さっそくサイドバーにタイムラインを埋め込んでみましょう！

埋め込みたいタイムラインのコードをコピー

まず、埋め込むタイムラインのコードをコピーします。
手順は以下の5つ。

1. https://publish.twitter.com/にアクセス
2. タイムラインのURLを打ち込む
3. 表示オプションを選択
4. カスタマイズオプションを設定
5. リンクのコードをコピー

■参考記事■

埋め込むタイムラインのコードを取得する手順は、公式サイト「Xヘルプセンター」内に、記載されています↓
タイムラインを埋め込む方法

それぞれの手順について、詳しく説明します。

STEP

https://publish.twitter.com/にアクセス

STEP

URLを入力

①タイムラインのURLを打ち込む　
※ユーザー名が＠poyara622の場合、URLはhttps://twitter.com/poyara622です。
②右の矢印をクリック

STEP

表示オプション「埋め込みタイムライン」を選択

STEP

「カスタマイズオプションを設定する」をクリック

STEP

埋め込むタイムラインのサイズを指定

高さ→400～600（ピクセル）、幅→300～400（ピクセル）程度がおすすめ。

STEP

背景を選択　

①背景を選択
※「ライト」は背景が白、「暗い」は背景が黒です。
②アップデートをクリック

STEP

「コードをコピーする」をクリック

これで埋め込むタイムラインのリンクがコピーできました。

コードをはてなブログのサイドバーに貼る

コピーしたコードをはてなブログのサイドバーに貼ります。
手順は以下の3つ。

1. 管理画面から「デザイン」の編集画面を開く
2. サイドバーにモジュールを追加
3. HTMLを選択してコードを貼る

それぞれの手順を詳しく説明します。

STEP

管理画面の左側メニューの「デザイン」をクリック

STEP

画面上部に表示される「カスタマイズ」のアイコンをクリック

STEP

「サイドバー」をクリック

STEP

少し下にスクロールして「＋モジュールを追加」をクリック

STEP

下にスクロールして「</>HTML」をクリック

STEP

コードを貼る

①「HTMLモード」であることを確認　
②タイムラインのコードを貼る　
③タイトルを記入　
④「適用」をクリック

STEP

左上の「変更を保存する」をクリックすれば完成！

 

サイドバーにはこのように表示されています↓

お好みでカスタマイズ

コードを少しだけ編集すれば、外観をカスタマイズできます。
たとえば…

ヘッダーを消したいな・・・

このような場合は、元のコードの「<a class=”twitter-timeline”」の後に、半角のスペースをあけて「data-chrome=”noheader”」と書き加えればOK！

ヘッダーが消えてスッキリとした印象になります↓

■ 参考記事 ■

このカスタマイズは、こちらの記事を参考にさせていただきました。ありがとうございました！
他にも「背景を透過させる」「境界線を消す」などの方法が、わかりやすく記載されていますよ↓

www.sungrove.co.jp

 

まとめ

Xのタイムラインをサイドバーに表示すれば、あなたの最新の活動や関心事、ブログのテーマに縛られないプライベートな情報や個人の興味を、読者にリアルタイムで伝えられます。
タイムラインの埋め込みはとても簡単。自動で生成されたコードを、はてなブログのサイドバー編集画面に貼り付けるだけでOKです。
あなたも、ぜひやってみてくださいね♪

■ 関連記事 ■

あなたのブログのサイドバーをおしゃれにカスタマイズしませんか？
初心者にもおすすめです↓

poyaran.com

 

最後までお読みいただきありがとうございます。
これからもはてなブログユーザーに役立つ情報を発信していきます！
フォローよろしくお願いいたします♪

Follow @poyara622