FacebookのPage PluginでPCは小さく、スマホは100%にするレスポンシブ対応CSS

FacebookページをWEBサイトに貼り付ける時に、使うpage plugin。

レスポンシブデザインにする場合、PCが500pxでタブレット、スマートフォンを100%にする場合は結構簡単なんですが、PCの時は240pxなど小さいサイズにしてスマートフォンの時は100%にする場合は少し工夫が必要です。


1.page pluginでは500pxで取得する


Page PluginのページのWidthには500を入力して、最大サイズである500pxのコードを取得します。

参考リンク：Page Plugin




2.CSSで下記を指定する

今回はブレイクポイント(画面によってCSSが切り替わるポイント)を2つにしました。
641px以上又は641px以下かというポイントです。

@media screen and (min-width:641px) {

  .fb-page {

    width:240px !important;

  }

}



@media screen and (max-width:640px) {

  .fb-page {

    width:100% !important;

  }

}

（240pxは指定したいサイズにすればOK）



fb-pageのクラス名は、Page Plugで生成されるクラス名でこれでパソコンの場合は強制的に小さいサイズのFacebookページにして、小さいサイズのブラウザであれば100%表示にすることができます。

ちなみにこのコードにして、パソコンのブラウザで縮小してレスポンシブにしても240pxのままになってしまいますが、スマートフォンでアクセスすると100%表示になっていますのでご心配なく。

またFacebookページのタグが古いと上手くいかないこともあるので、コード自体は新らしいコードで使いましょう。

最新投稿された記事はいかがですか？

• 南野どうなる?2015年冬から4大リーグにいったザルツブルクの選手をリストアップ！
• 毎日25分のオンライン中国語レッスンサイトまとめ。結構サイトによって金額と時間が違ってます。
• 中国語で覚えておきたい接続詞まとめ。
• [サッカーまとめ]2007-2016に欧州のクラブチームに移籍して日本人選手リスト。