昨年6月に書いた「Twitter ウィジェットをカスタマイズする。」という記事にコメントをいただきました。質問の内容はFC2ブログにカスタマイズしたTwitter ウィジェットを表示するにはどうすれば良いのかということでした。

ただ文章だけで説明するのは難しいと思い、記事として書くことにしました。

1．プロフィールウィジェットをカスタマイズするページにアクセスする。

Twitterのホーム画面です。上の画像の赤く囲ってある部分に「素材」という項目があるのでクリックします。

「素材」ページにアクセスすると、「Twitterボタン」、「ロゴとアイコン」といったものがありますが、その中にある「ウィジェット」を選択します。

「自分のサイト」を選択します。

「検索ウィジェット」、「お気に入りウィジェット」、「リストウィジェット」といったものがありますが、今回は「プロフィールウィジェット」を選択します

2．プロフィールウィジェットをカスタマイズする。

＜設定＞

■ Twitterのユーザー名

＜Preferences（カスタマイズ）＞

■ 最新データを取得するか
■ スクロールバーを表示するか
■ ツイートの表示方法（一定間隔で更新するか、全ツイートを取得するか）
■ 表示するツイート数（1~30）
■ プロフィール画像を表示するか
■ 投稿時刻を表示するか
■ ハッシュタグを表示するか

＜Appearance（デザイン）＞

■ ウィジェットの色（外枠の背景、外枠の文字、ツイート投稿欄の背景、ツイートの文字、リンク）

＜サイズ＞

■ ウィジェットのサイズ（横幅、高さ）

ここで設定しておくべきことはウィジェットのサイズ設定で「横幅の自動調整」にチェックを入れておくことかと思います。
FC2ブログのテンプレートによってプロフィールや最新記事などを表示しているサイドバーの幅が異なるので、それぞれのテンプレートに合わせるには自動で幅を調整させることが必要です。

それぞれの設定をし、「Finish & Grab Code（完了&コード取得）」ボタンを押すと、下記のようなHTMLコードが表示されます。

<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
　　version: 2,
　　type: 'profile',
　　rpp: 4,
　　interval: 30000,
　　width: 'auto',
　　height: 300,
　　theme: {
　　　　shell: {
　　　　background: '#333333',
　　　　color: '#666666'
　　　　},
　　tweets: {
　　　　　background: '#000000',
　　　　　color: '#666666',
　　　　　links: '#ff6600'
　　　　}
　　},
　　features: {
　　scrollbar: false,
　　loop: false,
　　live: false,
　　behavior: 'all'
　　}
}).render().setUser('Twitterのユーザー名').start();
</script>

この表示されたHTMLコードの中にあるbackgroundプロパティに’transparent’と指定しておくと良いです。これによって背景が透明になるので、どのようなテンプレートにも合わせることができます。

3．FC2ブログにTwitter ウィジェットを表示する。

先のHTMLコードをコピーしておきます。

FC2ブログの管理ページにアクセスし、左サイドバーの中にある「環境設定」から「プラグインの設定」を選択します。上の画像の赤く囲ってある部分にあります。

「PC用」の行にある「公式プラグイン追加」を選択します。

「基本プラグイン」、「お役立ちプラグイン」、「SNSプラグイン」、「FC2プラグイン」といったものがありますが、「拡張プラグイン」の中から「フリーエリア」の「追加」をクリックします。

今回「タイトル」を「Twitter」にし、「フリーエリア内容の変更」にコピーしたHTMLコードを貼り付け、「追加」をクリックします。

すると、FC2ブログの左サイドバーにTwitter ウィジェットが表示されました。

4．Twitter ウィジェットをカスタマイズする。

左サイドバーの中にある「環境設定」の「テンプレートの設定」を選択します。

「HTML CSS」の列にある「編集」をクリックします。

「テンプレート名 のスタイルシート編集」の枠の中に下記のコードを入力します。一番下に入力するのが良いかと思います。

/* ————————————————–
Twitter
————————————————– */
.twtr-widget {
font : normal normal normal 75%/1.8 "ヒラギノ角ゴ Pro W3", "HiraKakuPro-W3", "Osaka", "Helvetica", "Arial", "ＭＳ Ｐゴシック", sans-serif !important;
}.twtr-widget .twtr-tweet {
border-bottom: 1px solid #c9c7c7 !important;
}.twtr-widget .twtr-tweet-wrap {
padding: 6px 0 !important;
}.twtr-hd, .twtr-ft {
display: none;
}.twtr-widget .twtr-tweet:last-child {
border: none !important;
}

FC2ブログにカスタマイズしたTwitter ウィジェットを表示させるために重要なことは「!important」を付けることです。

昨年6月に書いた「Twitter ウィジェットをカスタマイズする。」という記事ではTwitter独自のwidget.cssというCSSを読み込ませたあとに、自分で書いたCSSで上書きをするというかたちを取っていました。

でも、今回のFC2ブログではその方法を取ることができません。そのため今回は、「!important」を全てに付けて最優先にスタイルを適用させる方法を取ります。

これによって下の画像のようなカスタマイズしたTwitter ウィジェットを表示することができるのです。

ただTwitter独自のwidget.cssで英語フォントのスタイルに対して「!important」が付けられているために、英語フォントだけは今、紹介したように自分で書いたCSSで上書きをすることができません。

でも、無理矢理ではありますが、以下のコードを</body>タグの直前に入れることによって上書きすることができます。

<style type="text/css">
<!--
.twtr-widget {
font-family: "ヒラギノ角ゴ Pro W3","HiraKakuPro-W3","Osaka","Helvetica","Arial","ＭＳ Ｐゴシック",sans-serif !important;
}
-->
</style>

今回、紹介したコードのフォントやリンクの色などは「sakanaテンプレート」に合わせたコードになっているので、それぞれのテンプレートに合わせたコードに一部変更をしてください。よろしくお願いします。

※追記（2012.02.09）※
「テンプレート名 のスタイルシート編集」の枠の中に入力するコードに脱字がありました。
申し訳ございません。現在は修正を済ませています。