本ブログは2011年3月08日の記事
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 Commnts機能部分には背景色を facebook から提供されるモジュールに合わせましたので、
コメントが無い場合に感じられる無駄な余白感も軽減された様に思います。
HamaZoブログではテンプレート要素として
の三種類が用意されていますが、
それぞれに僅かづつ異なる位置に facebook Commnts機能を配置した為、
今回の設定ではそれらが其の儘ずれとなってしまっています。
それは今後の課題として、
気の向いたときに修正・報告したいと思います。
※ 現在では
HamaZoランクチェック!Blog
は本ブログ(
Acenumber Technical Issues
)に統一しました。