Facebook
RSS Feed
Apr 2, 2013

レスポンシブテンプレートでFacebook Like boxを幅ぴったりにする方法

スクリーンショット 2013-04-02 10.47.22

今ちょうどレスポンシブ対応のテンプレートでサイトを作っていて、
FacebookのLike Boxの幅がはみ出てしまうのをどうしたらいいのかなーと調べてたら、
解決方法が載ってる記事がありました。

・FacebookのLike Boxをリキッドレイアウトへ対応させる方法

スタイルシートにちょっとコードを足すだけで解決したので、
もし同じようなことにハマってる人がいたら、参考になればと言うことで。

解決方法

div.fb_iframe_widget,
div.fb_iframe_widget iframe[style],
div.fb_iframe_widget span {
width: 100% !important;
max-width: 630px;
}

上記のコードをスタイルシートに書けば、幅が自動で変わるレスポンシブ対応になります。

Minimal WPのレスポンブテーマは本文エリアが最大630pxなので、max-width:630pxです。
ボックスにborderをつけてる場合は、左右1pxずつ引いて、
max-width:628pxにするとピッタリきれいになりますよ。

Posted in Blog, WordPress初心者講座Comments Closed 

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Slauson」
公式サイト/マガジン/ビジネス・企業
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト
WordPressテーマ(スマホ対応レスポンシブデザイン)「Pantomime」
ギャラリー・ポートフォリオ / 公式サイト