本ブログは2011年3月08日の記事
Facebook Comments機能のブログへの設置方法
に於いて解説した設置法で本ブログに実装した
Facebook Comments機能
ですが、どうもデザイン的に見映えが上手くありません。
3カラムで構成されている本ブログの基本レイアウトの、
真ん中部分に繰り返し当該機能は表示される訳ですが、
上記の図に示されるように此処に表示するご本尊たるブログ記事とは
左にずれて表示されてしまっている処がちょっと気に入らないのです。
そこでこれを直してみたいと思います。
この手の修正は HTML と CSS と言うHamaZoブログでは テンプレート > カスタマイズ に用意される設計図を修正しなければなりませんので、 多少初心者ブロガーには敷居が高くなります。
先ずは HTML を修正します。 上記の記事に於いて設置した facebook から提供される付加コードは
<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 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>
さて、上記に HTML を設定した上で CSS に書き加えたものが以下です。
margin-left:10px;
padding-left:15px;
background-color:#f2f2f2;
width:465px;
overflow:hidden;
}

HamaZoブログではテンプレート要素として
- トップページ
- 個別ページ
- アーカイブページ
※ 現在では HamaZoランクチェック!Blog は本ブログ( Acenumber Technical Issues )に統一しました。