Facebookライクボックスの横幅をスマホサイズ100%に！-WordPressラボ

Date：2014/09/23 | Category：WordPressテーマのカスタマイズ方法【HTML・CSSの基礎も】

※景品表示法に基づく表記：本記事には商品の広告が含まれています

LikeBoxはみ出してませんか？

フェイスブックページを運営されている方なら、通常WEBサイトにライクボックスを設置されていると思います。

ただ、サイトをいわゆるレスポンシブデザインにされた場合、ブラウザ幅を狭く（＝スマホなどで表示）した際に、ライクボックスが横にはみ出してしまうことが多々あります。

これは、LikeBoxを構成しているパーツの横幅が、px指定で固定されているせいです。

そんな場合、スマホ表示用のCSSに、次のソースを追記してみていただければと思います。

※以下は2014年9月時点の情報です。
FaceBookはマイナーチェンジが多いため、いきなり内容が通用しなくなるケースもございます。

ライクボックスの横幅を100%に指定するスタイル

上記を、スマホ表示幅のメディアクエリ内に追記しましょう。

また、左右に余白などを儲けたい場合は、

width: 98%;
margin-left: 1%;
margin-right: 1%;

などの指定を行えば、よろしいかと思います。

Tags