【はてなブログカスタマイズ】Twitterのタイムラインをサイドバーに設置(投稿数も設定)

はてなブログのサイドバーにTwitterのタイムラインを埋め込む方法と、タイムラインの投稿数を設定する方法を解説します。

 

 

完成形のイメージ図

 

Image from Gyazo

 

サイドバー(右)に自分のタイムラインが流れていると思います。

今回は、この設定方法を解説します。

 

 

埋め込みコードを取得

まずは、Twitterのタイムラインのコードを取得します。

 

Twitterにログイン

②プロフィール画面のURLをコピー

f:id:xxxxkun:20181118184940p:plain

 

次に、こちらのサイトを開きます。

 

Twitter Publish

 

f:id:xxxxkun:20181118185004p:plain

 

①先ほどコピーしたTwitterのURLをコピーする

②右側のアイコンをクリックする。

 

f:id:xxxxkun:20181118185331p:plain

③左側のタイムラインを選択する。

④表示されたコードをコピーする。

f:id:xxxxkun:20181118185404p:plain

 

はてなブログを開く

 

Twitterのタイムラインのコードをコピーしたら、次に「はてなブログ」を開きます。

 

①デザイン→カスタマイズ→サイドバーの順に進みます。

②モジュールの追加から「HTML」を選択してコードを貼り付けます。

 

f:id:xxxxkun:20181118185709p:plain

 

「適用」ボタンを押せば、サイドバーにTwitterのタイムラインを表示させることができます。

 

Image from Gyazo

 

このままだと、上記のように投稿数が長すぎてしまうので、コードを追記して投稿数を限定させます。

 

タイムラインの投稿数を限定させる方法

下記のコードを追記することで投稿数を限定させることができます。

f:id:xxxxkun:20181118190126p:plain

 

data-tweet-limit="3"」これを追記することで投稿数を決めることができます。

"3"の数字を変えることで投稿数を変えられます。"5"なら5記事になります。

 

Image from Gyazo

 

 以上が、はてなブログのサイドバーにTwitterのタイムラインを埋め込む方法でした。