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

はまぞう（HamaZo）ブログのテンプレートには

1. トップページ
2. 個別ページ
3. アーカイブ

の三種類があり、それぞれ異なるレイアウトを適用することが出来ます。 本ブログの2011年3月24日の記事 Facebook Comments機能部分のデザイン修正法 でトップページに最適化したレイアウトを採用した為、 その他のページでは右の図にハイライトする様に、 スクロールバーが表示されてしまいました。 これはFacebookの表示部分がそれを含む表示部分より 広いことに由来しますので今回これを修正しました。

従来はCSSファイルでは以下の設定を適用していました。 赤字の幅設定が問題になっている部分です。

今回三種類のテンプレートに於いて幅サイズは二種類です。 従ってスクロールバーを発生せしめる #fbcom を 二種類に分割し、他方を #fbcom2 としました。 前者はトップページに、後者は他二テンプレートに適用します。 その上で幅設定をそれぞれに設定します。 そのCSSファイルに於ける記述が以下になります。

これら設定変更に拠って、 どうやら見苦しいスクロールバーの表示は避けられることになりました。