2013-04-02
ワードプレスレスポンシブテンプレートでFacebook Like boxを幅ぴったりにする方法
今ちょうどレスポンシブ対応のテンプレートでサイトを作っていて、
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にするとピッタリきれいになりますよ。
2013-04-02 by