2013-04-02

ワードプレスレスポンシブテンプレートで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にするとピッタリきれいになりますよ。

おすすめWordPressテーマ10選
by