キラッとはてログ

ポヤポヤの主婦ポヤラが本気で取り組むブログ運営

記事内に商品プロモーションを含む場合があります。

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

20240228164825

 

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

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

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

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

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

 

 

 

 

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

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

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

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

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

1.リアルタイムな情報を提供できる

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

2.コンテンツの多様化

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

3.トラフィックの増加が期待できる

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

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

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

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

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

  1. https://publish.twitter.com/にアクセス
  2. タイムラインのURLを打ち込む
  3. 表示オプションを選択
  4. カスタマイズオプションを設定
  5. リンクのコードをコピー
■参考記事■
埋め込むタイムラインのコードを取得する手順は、公式サイト「Xヘルプセンター」内に、記載されています↓
タイムラインを埋め込む方法

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

STEP
20240227160605
STEP
URLを入力
①タイムラインのURLを打ち込む 
※ユーザー名が@poyara622の場合、URLはhttps://twitter.com/poyara622です。
②右の矢印をクリック
20240227160629
STEP
表示オプション「埋め込みタイムライン」を選択20240227160833
STEP
「カスタマイズオプションを設定する」をクリック
20240227160912
STEP
埋め込むタイムラインのサイズを指定
高さ→400~600(ピクセル)、幅→300~400(ピクセル)程度がおすすめ。
20240227161112
STEP
背景を選択 
①背景を選択
※「ライト」は背景が白、「暗い」は背景が黒です。
②アップデートをクリック
20240227161225
STEP
「コードをコピーする」をクリック
20240227161300

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

 

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

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

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

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

STEP
管理画面の左側メニューの「デザイン」をクリック
20240227182018
STEP
画面上部に表示される「カスタマイズ」のアイコンをクリック
20240228105203
STEP
「サイドバー」をクリック
20240228105442
STEP
少し下にスクロールして「+モジュールを追加」をクリック
20240228105745
STEP
下にスクロールして「</>HTML」をクリック
20240228110054
STEP
コードを貼る
①「HTMLモード」であることを確認 
②タイムラインのコードを貼る 
③タイトルを記入 
④「適用」をクリック
20240228111056
STEP
左上の「変更を保存する」をクリックすれば完成!
20240228111928
 

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

20240228130939

 

お好みでカスタマイズ

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

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

20240228135946

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

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

www.sungrove.co.jp

 

まとめ

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

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

poyaran.com

 

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