スクロールがしづらい

Blog運営

Facebook Likeboxをレスポンシブにする方法

更新日:

どーも、cv0629です。実は先日WordPressのブログテーマをStinger5へと変更しました。

今回からレスポンシブデザインになったとのことで、それまで使っていたStinger3とは全く別物になった感じですね。

それで変えてみて「あ、こんなとこにも影響でるんだなー」ってのがちょこっと有りました。今回はその中でもFacebook Likeboxのレスポンシブ化について紹介します。

SPONSORED LINK

Likeboxをレスポンシブにしないとこうなるよ

FacebookのLikeboxについては、以前ブログの記事にしました。やっぱりこれがあると何となくカッコいいですよね!

【関連記事】ブログで皆がやってるFacebook Likeboxの設置方法

Likeboxを作るにあたっては横幅と高さを自由に決められるのですが、設置した後にStinger5のようなレスポンシブデザインにするとちょっと気持ち悪いことになります。

それがこちら。

スクロールがしづらい

あ〜たまにこういうブログあるよね…スクロールする時ぐねぐねして気持ち悪いよね。

更に下に行くと…

Likeboxがはみ出てる

はみ出てるーーーーー!さっと直しましょう。

Likeboxのレスポンシブ化はすごく簡単(IFRAME版)

まずは公式サイトにアクセスしてください。

Likebox公式サイト

そこで高さと横幅を入力して普通に作ってください。もちろんFacebook Page URLにはご自身の設定したいURLを入れてくださいね。

getcode2

そして「Get Code」をクリック。

iframe

表示されたコードの種類から「IFRAME」を選んでください。そしてここからが大事

likebox5

表示されたコードの下の方にある「width:〜px;」と指定されたとこを「width:100%;」に変更してください。そして、表示させたい場所に貼り付けてください。

そうするとレスポンシブできっちりしたLikeboxになるんです。

最後に

何かを変更する時には検証環境とか欲しいね。ローカルで作れるXAMPPとかあるから導入すっか。

 

Amazonで評価の良いFacebook本(Kindle版)

-Blog運営

Copyright© cv0629 , 2017 AllRights Reserved.