Facebook Comments機能部分のデザイン修正法

本ブログは2011年3月08日の記事 Facebook Comments機能のブログへの設置方法 に於いて解説した設置法で本ブログに実装した Facebook Comments機能 ですが、どうもデザイン的に見映えが上手くありません。 Facebook Comments機能部分のデザイン修正前 3カラムで構成されている本ブログの基本レイアウトの、 真ん中部分に繰り返し当該機能は表示される訳ですが、 上記の図に示されるように此処に表示するご本尊たるブログ記事とは 左にずれて表示されてしまっている処がちょっと気に入らないのです。 そこでこれを直してみたいと思います。

この手の修正は HTML と CSS と言うHamaZoブログでは テンプレート > カスタマイズ に用意される設計図を修正しなければなりませんので、 多少初心者ブロガーには敷居が高くなります。

先ずは HTML を修正します。 上記の記事に於いて設置した facebook から提供される付加コードは

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js
    #appId=APP_ID&xfbml=1">
</script>
<fb:comments href="rank.hamazo.tv（※）/e<%EntryId%>.html"
    num_posts="3" width="450">
</fb:comments>
でしたが、この id="fb-root" に対して操作しても反映はされないようです。 そこでこの付加コード全体をラッピングしてしまいます。
<div id="fbcom">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js
    #appId=APP_ID&xfbml=1">
</script>
<fb:comments href="rank.hamazo.tv（※）/e<%EntryId%>.html"
    num_posts="3" width="450">
</fb:comments>
</div>
ラップした div タグ（上では赤字）の id、fbcom に対して CSS を適用すれば好い訳ですね。

さて、上記に HTML を設定した上で CSS に書き加えたものが以下です。

div#fbcom{
  margin-left:10px;
  padding-left:15px;
  background-color:#f2f2f2;
  width:465px;
  overflow:hidden;
}
この設定が適用された表示は以下になりました。 Facebook Comments機能部分のデザイン修正後 まずまず、ずれは修正されたのでこれで好しとします。 加えて facebook Commnts機能部分には背景色を facebook から提供されるモジュールに合わせましたので、 コメントが無い場合に感じられる無駄な余白感も軽減された様に思います。

HamaZoブログではテンプレート要素として

  • トップページ
  • 個別ページ
  • アーカイブページ
の三種類が用意されていますが、 それぞれに僅かづつ異なる位置に facebook Commnts機能を配置した為、 今回の設定ではそれらが其の儘ずれとなってしまっています。 それは今後の課題として、 気の向いたときに修正・報告したいと思います。

※ 現在では HamaZoランクチェック！Blog は本ブログ（ Acenumber Technical Issues ）に統一しました。

3件のコメント

  1. Facebook Comments機能の表示の日本語化

    本ブログは2011年3月8日の記事Facebook Comments機能のブログへの設置方法に於いて解説した設置法で本ブログに実装し2011年3月24日の記事Facebook Comments機能部分のデザイン修正法で少々見映えを弄ったFacebook Comments機能ですが、よく見れば流石アメリカ産まれのWebサー

  2. Facebook Comments機能の表示幅のカスタマイズ

    はまぞう（HamaZo）ブログのテンプレートにはトップページ個別ページアーカイブの三種類があり、それぞれ異なるレイアウトを適用することが出来ます。本ブログの2011年3月24日の記事Facebook Comments機能部分のデザイン修正法でトップページに最適化したレイアウトを採用し

  3. Facebook Comments機能のHamaZoブログへの設置の最適化

    話題になること著しいSNSサービスFacebook（フェースブック）が鳴り物入りで提供し始めた機能がFacebook Commentsです。本ブログに於いてもFacebook Comments機能のブログへの設置方法：2011年3月8日Facebook Comments機能部分のデザイン修正法：2011年3月24日Facebook Comme

コメントは受け付けていません。