ライブドアブログ スタッフブログ

いつもライブドアブログをご利用いただきありがとうございます。
担当の久野です。


この開発日誌では現在、ライブドアブログの公式Twitterアカウントの最新ツイートをブログ上部に表示していますが、これは先日リリースしました第五世代のHTMLテンプレートで、新しく追加された「メッセージボード機能」を使っています。
最新ツイートを表示するのはライブドアブログの機能ではありませんが、お問い合わせを多くいただきましたので、掲載方法をご紹介します。

■プロフィールウィジェットの設定方法

まず、Twitter公式のプロフィールウィジェットのサイトで設定を行います。
１．ユーザー名の入力
表示したいユーザー名を入力します。


２．表示するツイートの詳細を設定
開発日誌の場合は、最新の1つのツイートのみを表示するため、「Number of Tweets（ツイート数）」を1と設定しています。


３．デザインの設定
背景色や文字色、リンク色などを設定します。


４．サイズの設定
「auto width」にチェックをすると、表示エリアの幅いっぱいに表示してくれます。


５．表示するコードの取得
以上の設定が終わったら、下の方にあるボタンの「完了＆コード取得」をクリックして、表示されたコードをコピーします。


６．ブログ管理画面でコードを入力
管理画面のメニューの「ブログ設定」からブログ情報の「基本設定」を選択します。
「メッセージボード」の入力欄にコピーしたコードを入力して設定します。

以上で、プロフィールウィジェットによるTwitterの最新ツイートの掲載が完了です。
ちなみに、このプロフィールウィジェットはサイドバーにも利用できます。その場合は「フリーエリア」のブログパーツに同様にコードを入力します。

余談ですが、開発日誌ではさらに、以下のようにスタイルシートのカスタマイズをしています。CSSが分かる方は細かなカスタマイズにもチャレンジしてみてください。

<style>
/* アカウント表示を消してツイートだけにする */
div.twtr-hd { display:none; }
/* ツイート部分を枠で囲む */
div.twtr-tweet-wrap {
border:2px solid #f0f0f0;
-moz-border-radius:5px; /* for firefox */
-webkit-border-radius:5px; /* for safari */
}
</style>

今後ともライブドアブログをよろしくお願いいたします。