Twitterの「埋め込みタイムライン」を使う方法【カスタマイズ】

多くの有名なブログではサイドバーやフッターにTwitterのタイムラインを埋め込んでいることが多いと思います。

koblogでも以前はフッターにタイムラインを埋め込んでいたのですが、デザインも良くとても便利でした。（現在は表示速度改善のため表示していません。）

＊はてなブログを使っていた時の話です。

そんなわけで今回はTwitterのタイムラインを埋め込む方法とカスタマイズ方法を紹介します。オシャレなブログへの1歩として参考にしてみてください。

タイムラインの埋め込み方法

Twitterのタイムラインを埋め込むために、まず下のリンクからタイムラインのウィジェットを取得します。

リンクを開き、下の画面が表れたら自分のTwitterアカウントのURLを入力して進みます。僕の場合はhttps://twitter.com/Flower71418279です。スマホアプリでは分からないので、ブラウザーで開く必要があります。

画面が変わったら左側の「Embedded Timeline」を選択します。右側の「Twitter Buttons」を選ぶとフォローボタンを使えるようになりますが、動作が重くデザインもいまいちなのでカスタマイズしたものを使ったほうがいいと思います。

画面が変わると下のようにコードが表示されるのでコピーして、ブログの貼りたい場所にペーストします。コード右側の青いボタンををクリックすると自動でクリップボードにコピーされます。

カスタマイズ方法

ここからはカスタマイズ方法を紹介しますが、元のコードをメモ帳などに保存しておくことをおすすめします。また３つのカスタマイズを紹介しますが、半角スペースを挟むことで全てを反映させることができます。

まずは基本のコードです。

<a class="twitter-timeline" href="https://twitter.com/Flower71418279?ref_src=twsrc%5Etfw">Tweets by Flower71418279</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

一応下にすべてのカスタマイズを行ったあとのコードを貼っておきます。そのまま使いたい方はhttps://twitter.com/Flower71418279を自分のTwitterアカウントのURLに変えてください。またTweets byのあとを自分のアカウント（@〇〇）に変えてください。

<a class="twitter-timeline" href="https://twitter.com/Flower71418279?ref_src=twsrc%5Etfw"width="500px" height="400px" data-border-color="#〇〇〇〇〇〇" data-theme="dark">Tweets by Flower71418279</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

長さを変える

デフォルトでは縦に長くてとても使いづらいです。そこで僕の場合はフッター用にサイズを変えて使っています。

サイズを変える場合はwidthとheightの部分を追加します。

<a class="twitter-timeline" href="~~" width="500px" height="400px">

width="〇〇px"で横幅、height="〇〇px"で縦の長さを変更します。使いたいシーンに合わせて変えてみてください。サイズを変えると、こんな感じになります。ちょうどよくなりました。

境界線の色を変える

境界線の色を変えるにはdata-border-colorの#〇〇〇〇〇〇の部分にカラーコードを追加します。

<a class="twitter-timeline"href="~~" data-border-color="#〇〇〇〇〇〇">

カラーコードについては下の記事で紹介しています。今回は濃い青（#000080）に変えてみました。

テーマの色を変える

スマートフォンのTwitterアプリのようにテーマの色を変えることができます。デフォルトでは「ライト」になっているので、下のdata-themeのコードで「ダーク」に変更できます。

<a class="twitter-timeline" href="~~" data-theme="dark">