はてなブログに「Twitterのタイムラインを表示させる」方法

はてなブログで、プロフィール下部のサイドバー編集が可能と鳴りました。
・「サイドバー編集機能」を追加しました（はてなブログ開発ブログ）

はてなブログの開発ブログさんを見てみると、Twitterのタイムライン（＝TL）が表示されています。そういえば、いろんなブロガーさんのサイトを見てもTwitterを表示させている方は多いですね。
「僕もやってみたい！」と思い、いろいろ調べてみました。

「ブログパーツ」について知る

ブログにさまざまな要素（TwitterのTL表示とか）を加えるためのパーツを「ブログパーツ」と呼ぶそうです。基本的には無料で公開されており、HTMLに貼付けることができるコードをコピーして自分のサイトにペーストして反映できます。
「おすすめ ブログパーツ」とかで検索するとわんさか出てくるので、興味があれば検索してみると良いと思います。

Twitterのブログパーツは公式で

TwitterのTL表示のためのパーツも、Webで簡単に検索して見つかります。
いくつか見てみましたが、「はてなブログ開発ブログ」さんのTwitter表記方法が一番素敵だったんです。いったいどのパーツなんだろう？と思っていたら、Twitterの公式ブログパーツでした。

Twitterの公式パーツはカスタマイズが自由自在

TwitterのオフィシャルWebサイトの「素材」というページで、いろいろなパーツが無料で公開されています。例えば、「ツイートするボタン」や「Twitterのロゴ」などなど。そんな中に、「ブログに自信のTLを貼付ける」ツールがあるのです。

TwitterのTL表示パーツは「ウィジェット」から

TwitterのTL表示パーツは、素材ページの「ウィジェット」から入手できます。

真ん中から目的のページへ。ちなみに、左右でTwitterのボタンやロゴをゲットできますよ。

素材＞ウィジェット＞自分のサイト＞プロフィールウィジェットの順で進みます。他にもいろいろ面白そうなツールが並んでいますね。特定情報の発信だけをするのであれば、「検索ウィジェット」なんかも面白いのではないでしょうか。

プロフィールウィジェットから、自分のTLを表示するツールのカスタマイズができます。僕はTLの表示数を3つにしてみました、あんまり主張しないように。
なお左のイメージは表示する際の色を編集する画面です。デフォルトだとかなりサイバーな感じで浮きまくること必至なので、是非カスタムしましょう。僕はこのサイトと色を合わせました。あくまでTwitterは脇役なので、文字の色も薄いグレーに変えています。

最後に、サイズの調整を行います。このページをほっておくと、ブログに貼付けたときにとんでもなく飛び出てしまういます…
サイズをブログにぴったり合わせるには、「auto width」にチェックを入れれば自動でサイズ調整してくれます。

最後に、ページ最下段にある「Test Setting」でイメージの確認を、「Finish & Grab Code」をクリックするとブログに貼付けるコードを入手するページへと移ります。

はてなブログにブログパーツを貼るには、ダッシュボードの「デザイン」で変更

TwitterのTLを貼付けるコードをゲットしたら、あとはブログへコピペです。はてなブログは、ダッシュボード画面の「デザイン」の項目から簡単に設定が可能になりました。
デザイン設定の「カスタマイズ」のタブに、サイドバーという項目があります。最初はプロフィール／検索／リンク、の3種しかないですが、自由に増やせます。あと、位置も上下に変えられますよ。
「＋モジュールを追加」を選択するとポップアップする画面に、先ほどのTwitterのパーツコードを貼付けて完成です！

どうですか？意外と簡単にできますね。
やり過ぎには注意したいですが、他にも良さそうなブログパーツがあればトライしてみようと思います。