FC2ブログにカスタマイズしたTwitter ウィジェットを表示する。

2012.02.04 Sat

昨年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", "MS Pゴシック", 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","MS Pゴシック",sans-serif !important;
}
-->
</style>

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

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


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

2011.06.11 Sat

Twitterのツイートを自分のブログやサイトに表示させるために便利なTwitter ウィジェットというものが公式から出ています。

その公式のウィジェットは、ある程度カスタマイズができるようになっていますが、できるものはどれも同じような見た目になってしまって、何だか物足りません。それに自分のブログやサイトに合ったデザインになりません。

そんな人のためにとっておきの方法を紹介します。
実は、このウィジェットはCSSによってカスタマイズすることができるんです。

今回、紹介するのは一番使われることが多いと思われる「プロフィールウィジェット」をカスタマイズする方法です。

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

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

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

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

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

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

<設定>

■ Twitterのユーザー名

<カスタマイズ>

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

<デザイン>

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

<サイズ>

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

初期のままだと下記のようなコードになっています。

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 250,
  height: 300,
  theme: {
    shell: {
    background: '#333333',
    color: '#ffffff'
    },
    tweets: {
    background: '#000000',
    color: '#ffffff',
    links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('Twitterのユーザー名').start();
</script>

上記のコードをちょっと変更したものが下記のコードです。

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 5,
  interval: 6000,
  width: 200,
  height: 300,
  theme: {
    shell: {
    background: 'transparent', <!-- 背景透明 -->
    color: '#222222'
    },
    tweets: {
    background: 'transparent', <!-- 背景透明 -->
    color: '#222222',
    links: '#0066cc'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('Twitterのユーザー名').start();
</script>

ここで重要なことは、backgroundプロパティにtransparentを指定することです。
これによって背景が透明になるので、どのような背景にも合わせることができます。

3.プロフィールウィジェットをCSSでカスタマイズする。

JavaScriptの読み込みやパーマリンクの記述などがありましたが、コードが長くなってしまうので一部を省略して、CSSに関わる部分だけを残しました。

<div class="textwidget">
<div id="twtr-widget-1" class="twtr-widget twtr-widget-profile">
<div style="width: 200px;" class="twtr-doc">
<div class="twtr-hd">
 <a class="twtr-profile-img-anchor" href="http://twitter.com/intent/user?screen_name=Twitterのユーザー名" target="_blank"><img src="プロフィール画像" class="twtr-profile-img" alt="profile"></a>
 <h3>Twitterの名前</h3>
 <h4><a href="http://twitter.com/intent/user?screen_name=Twitterのユーザー名" target="_blank">Twitterのユーザー名</a></h4>
</div>

<div class="twtr-bd">
<div style="height: auto;" class="twtr-timeline">
<div class="twtr-tweets">
<div class="twtr-reference-tweet"></div>
<div id="tweet-id-5" class="twtr-tweet">
<div class="twtr-tweet-wrap">
<div class="twtr-avatar">
<div class="twtr-img"><a href="http://twitter.com/intent/user?screen_name=Twitterのユーザー名" target="_blank"><img src="プロフィール画像" alt="Twitterのユーザー名 profile"></a>
</div>
</div>
<div class="twtr-tweet-text">
<p>
 <a class="twtr-user" href="#" target="_blank">Twitterのユーザー名</a>
 ツイート部分
<em>
 <a href="#" time="時刻" class="twtr-timestamp" target="_blank">0 hours ago</a> · <a href="http://twitter.com/intent/tweet?in_reply_to=78808835170643968" class="twtr-reply" target="_blank">reply</a> · <a href="#" class="twtr-rt" target="_blank">retweet</a> · <a href="#" class="twtr-fav" target="_blank">favorite</a>
</em>
</p>
</div>
</div>
</div>
<!-- <div id="tweet-id-4"></div>~<div id="tweet-id-1"></div> 省略 -->
<!-- tweets show here -->

</div>
</div>
</div>
<div class="twtr-ft">
<div>
 <a href="http://twitter.com" target="_blank">
 <img src="http://widgets.twimg.com/i/widget-logo.png" alt="">
 </a>
 <span>
 <a href="http://twitter.com/dakkie10" style="color:#222222" class="twtr-join-conv" target="_blank">Join the conversation</a>
 </span>
</div>
</div>

</div></div></div>

上のソースを簡単にまとめると下の画像みたいな感じです。

ウィジェットにはTwitter独自のwidget.cssというCSSが読み込まれているので、これを上書きするかたちでカスタマイズしていきます。CSSを読み込む位置はwidget.cssを上書きするので、</body>タグの直前が良いかと思います。

<外枠を消す>

外枠というのは、上の画像でいうと1と3の部分です。外枠を消す、つまりツイート部分のみを表示させます。

.twtr-hd {
  display: none;
}
.twtr-ft {
  display: none;
}

<フォントを変更する>

自分のブログやサイトと同じフォントにするにはウィジェットに対して新たに指定してあげる必要があります。
widget.cssでフォントの指定に「!important」が使われているために「!important」を付け加えないと上書きができないので、必ず付け加えてください。

.twtr-widget {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", Verdana, Helvetica, sans-serif !important;
  font-size: 93% !important;
  line-height: 1.7 !important;
}

<リンクスタイルを変更する>

widget.cssでマウスオーバー時にテキストにアンダーラインが表示されるようになっているので、これをなくします。

.twtr-doc a:hover {
  text-decoration: none !important;
}

今回、このブログで使用しているものを紹介しましたが、それ以外にもTwitter独自のwidget.cssを上書きすることによって、簡単にウィジェットをカスタマイズすることができます。

ただどのCSSがどこに使われているのかがわかりづらいので、Firefoxを使っている人であればFirebugというアドオンをおすすめします。どのCSSがどこに使われているのかを簡単に見つけることができます。

ぜひみなさんも試してみてください。