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にするとピッタリきれいになりますよ。

ホームページからの集客できてますか?

ワードプレステーマ「Minimal WP」
Minimal WPのWordPressテンプレートは、月間45万PV超のブログ運営のノウハウを詰め込んだミニマルデザインテンプレート。HTML不要で初心者でも簡単におしゃれなホームページが作れます!ブログ・自社メディアを始めるなら今がチャンスです!
by
関連記事