Banguardサイト

「ビジネスマンを応援するブログ」をテーマに、ビジネスに役立つ記事を書いています。

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

f:id:banguard9383:20120121225548j:plain
はてなブログで、プロフィール下部のサイドバー編集が可能と鳴りました。
「サイドバー編集機能」を追加しました(はてなブログ開発ブログ)

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

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

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

Twitterブログパーツは公式で

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

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

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

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

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

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

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

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

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

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

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

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


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