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

Facebook Comments機能の表示幅により表示されてしまうスクロールバー はまぞう(HamaZo)ブログのテンプレートには

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

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

/* facebook comments */
  div#fbcom{
  margin-left:10px;
  padding-left:15px;
  background-color:#f2f2f2;
  width:465px;
  overflow:hidden;
}

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

/* facebook comments */
  div#fbcom, div#fbcom2{
  margin-left:10px;
  padding-left:15px;
  background-color:#f2f2f2;
  overflow:hidden;
}
div#fbcom{
  width:465px;
}
div#fbcom2{
  width:450px;
}

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

スポンサーリンク

「Facebook Comments機能の表示幅のカスタマイズ」への1件のフィードバック

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

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

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