つなろっく

イロトリドリな毎日

トップ > はてなブログ > はてなブログにTwitterのタイムラインを埋め込む方法

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

はてなブログ はてなブログ-カスタマイズ

f:id:pea-nut:20180212095349j:plain

おすっ！つな（@tu_na_69）です(@_@。

こんな雪の日には、ブログのサイドバーにTwitterのタイムラインを埋め込みしたいなぁ、なんてことを思うのです。

 

あなたも同じ考えでしたか。

それでは早速やってみましょう。 

埋め込みコードを作る

Twitterのタイムラインを埋め込むためのコードを作ります。

↓「Twitter publish」のサイトへＧＯ

Twitter Publish

 

①空欄にTwitterのURLを入力して「enter」を押します。

 

f:id:pea-nut:20180201183735p:plain

 

注：アカウントではありません。

URLです。

わたしのサイトだと↓こちら

https://twitter.com/tu_na_69

よろしければフォローもどうぞよろしくお願いします。

あんまりつぶやいていません。ごめんなさい。

忙しくてつぶやいている暇がない。

記事を書く時間はあっても←こっちの方が時間がかかっているけれども。

あっ、また話が脱線しました。すみません。

 

②タイムライン表示を選んでクリックします。

f:id:pea-nut:20180201185718p:plain

左の「タイムライン」を選びます。

 

③コードをコピーします。

f:id:pea-nut:20180201190049p:plain

②の画像をクリックすると、下に生成されたコードが表示されます。

「Copy Code」をクリックして、コピーします。

コードの下にはTwitterのタイムラインも表示されますよ。

 

ブログにコードを貼り付ける

 ①ダッシュボードから「デザイン」→「カスタマイズ」→「サイドバー」をクリックします。

 

f:id:pea-nut:20180130113054p:plain

②一番下にある「+モジュールを追加」をクリック。

f:id:pea-nut:20180131000847p:plain

③</>HTMLをクリック

④タイトルを入力

　「twitterタイムライン」とか「フォローしてね」とか、好きなタイトルを入力してください。

⑤コピーしたコードを貼り付けます。

⑥「適用」をクリックして完了です。

タイムラインをカスタマイズ

コピペしたコードに、ピンクとグリーンの下線部分を追加挿入して、サイズと表示件数をカスタマイズしました。

f:id:pea-nut:20180201193115p:plain

サイズをカスタマイズ

デフォルト（初期設定）では、タイムラインはかな～り長いのでサイズを調整します。

幅（width="")と長さ（height=""）で調整できますが、長さは表示件数で調整するので、ここでは幅だけにしました。

表示件数をカスタマイズ

サイズのカスタマイズで長さ（height）を設定することも可できますが、それよりも表示件数を設定したほうがすっきりします。

表示件数は１～20の間で設定できます。

「２０」にするなら、長さ設定したほうがいいだろうけど(;^_^A

ここでは、「３」に設定しています。

だいぶすっきりします。

まとめ

ブログにTwitterのタイムラインを埋め込むことで、さらに動きのあるサイトになったと思います。

はてなブログとTwitterを連携させたい方はこちらの記事を参考にどうぞ。

pea-nut.hatenablog.com

pea-nut.hatenablog.com

記事を紹介してくれたサイト

この記事が参考になったと言及してくださったサイトを紹介しています。ありがとうございます。