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

LikeBoxはみ出してませんか?

fb-likebox

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

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

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

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

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

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

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

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

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

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

人気の無料メール講座を、ご利用ください。

  • 【プロ直伝】制作前に必ず行う2つのこととは?
  • 【重要】収益サイト制作者が取るべき手段は何か?
  • 【発表】魅せるデザインのラインナップはこちらです。
  • 【無料】必ず入れておくべき、フリープラグイン8選!
  • 【一瞬】瞬時にサイトの印象を引き立てる方法。
  • 【3.5倍】こうして成約率が急上昇しました。
  • 【注意】なぜ記事を増やしてもアクセスが伸びないのか?

※下記のフォームからメール講座に ご登録いただけます。

記事をシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする
  • Google+で共有する

Tags


Trackbacks & Comments

Trackback URL for this post:

Leave a Reply