サイドバーは、ブログの“今”を見せる場所でもあります。
ブログに訪れた読者がXのタイムラインを目にすれば、あなたの最新の発信に興味を持ってくれるかもしれません。
この記事では、Xのタイムラインをはてなブログのサイドバーに設置する方法を、初心者にもわかりやすく解説します。
手順はたったの3つです。
- タイムラインの埋め込みコードを取得する
- はてなブログのサイドバーに貼る
- 必要に応じてカスタマイズする
それでは順番に見ていきましょう。
- Xのタイムラインをサイドバーに設置するメリット
- ① タイムラインのコードを取得する
- ② サイドバーに貼り付ける
- ③ カスタマイズ（任意）
- 【重要】タイムラインが表示されない場合
- まとめ
- サイドバーをもっと整えたい方へ
Xのタイムラインをサイドバーに設置するメリット
- リアルタイムな情報を届けられる
- ブログの印象が立体的になる
- Xとの相互導線が作れる
ブログだけでは伝わらない人柄や日常の発信を見てもらえるため、読者との距離が縮まります。
さらに、タイムラインには次のような役割もあります。
- 信頼の可視化
- 発信頻度の証明
- アクティブ感の演出
という“社会的証明”になります。
① タイムラインのコードを取得する
- https://publish.twitter.com/ にアクセス
- 表示したいアカウントのURLを入力（例：https://twitter.com/ユーザー名）
- 「埋め込みタイムライン」を選択
- サイズや背景を設定（必要な場合）
- 「コードをコピー」
※URLは twitter.com を使用するのがおすすめです。
x.com のURLだとうまく生成されない場合があります。
※幅（width）は空欄のままにするのがおすすめです。
空欄にするとサイドバー幅に合わせて自動調整されます。固定値を入れるとテーマによっては横にはみ出すことがあります。
② サイドバーに貼り付ける
- はてなブログ管理画面 → 「デザイン」
- 「カスタマイズ」→「サイドバー」
- 「＋モジュールを追加」
- 「</>HTML」を選択
- コピーしたコードを貼り付ける
- 「適用」→「変更を保存する」
これで設置完了です。
③ カスタマイズ（任意）
ヘッダーを非表示にしたい場合は、以下のように追記します。
<a class="twitter-timeline" data-chrome="noheader" ...>
data-chrome="noheader" を追加するだけで、上部のヘッダーが非表示になります。
【重要】タイムラインが表示されない場合
現在、Xの仕様変更により、閲覧者がブラウザでXにログインしていないとタイムラインが正常に表示されないことがあります。
「通知はまだ届いていません」と表示されたり、何も表示されないことがありますが、設置自体は成功しているケースがほとんどです。
表示されなくても失敗ではありません。
ご自身で表示確認できていればOKです。
表示されない場合は、一度Xにログインしてから再読み込みを試してください。
まとめ
Xのタイムラインは、コードを取得してHTMLモジュールに貼るだけで簡単に設置できます。
リアルタイムな発信をブログに表示できる便利な機能ですが、現在はXの仕様により表示が不安定な場合がある点だけ覚えておきましょう。
サイドバーに“動き”を加えるだけで、ブログの印象はぐっと変わります。
ぜひあなたのブログにも設置してみてね。
サイドバーをもっと整えたい方へ
プロフィールの整え方や、カテゴリーの装飾方法などもまとめています。
