つなろっく

大学生つなの「イロトリドリでロックな毎日」ブログ

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

スポンサーリンク

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

おすっ!つな(@tu_na_69)です(@_@。

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

 

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

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

埋め込みコードを作る

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

↓「Twitter publish」のサイトへGO

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)を設定することも可できますが、それよりも表示件数を設定したほうがすっきりします。

表示件数は1~20の間で設定できます。

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

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

だいぶすっきりします。

まとめ

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

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

pea-nut.hatenablog.com

pea-nut.hatenablog.com