ブログのFacebook「いいね!」ボタンの表示が切れる問題を解決するCSSの書き方

ブログのFacebookのいいねボタンが切れる問題の解決方法

ブログに設置しているFacebookの「いいね!」ボタン切れてませんか?自分で押して確認してますか?

当ブログの「いいね!」ボタンも押して確認してみましたが…うっわ。切れてる…

『これじゃ「いいね!」どころの話じゃない!』と、すぐさま対策しました!

今回は、「もしかしたらうちのFacebookのいいねボタンも切れてるかも…」と、心当たりのある方はすぐにチェックしてね!というお話。

「いいね!」ボタンが途中できれる。

Facebookの「いいね!」ボタンが途中で切れてませんでしたか?よっひー(@yosiakatsuki)です。

たらハコは見事に切れてこんな感じ↓

Facebookのいいねボタンが切れてる

こんなんじゃ全然「いいね!」とは言えない…

あんまり自分のブログの「いいね!」ボタンを押す機会なんてないので気づきませんでしたが、確認してみてよかったです…

早めの対処で「いいね!」しやすいブログを目指します!

特にレスポンシブWEBデザインでは注意が必要!

上の写真の例は「いいね!」ボタンが表示されているiframeに「max-width:100%」が適用されているのが原因でした。

特にレスポンシブWEBデザインなどのリキッドデザインではmax-width等の指定をすることが多いと思います。

たらハコもiframeにmax-widthを指定して、YouTubeの埋め込みが横幅に収まるようにしていました。

  iframe {
    max-width : 100%;
  }

『「いいね!」ボタンが切れる問題』対策!

「いいね!」ボタンが切れる問題の原因はiframeのmax-widthでしたので、その部分を改修します。

  iframe {
    max-width : 100%;
  }

これは、記事内のiframeが横に飛び出さないようにするためのスタイルなので消すわけにはいきません。

なので、「いいね!」ボタン部分のiframeだけmax-widthの指定を解除します。

追加したスタイルはコチラ↓

  .fb-like iframe {
    max-width : none;
  }

クラスに「.fb-like」が指定された要素の子要素中のiframeだけmax-widthを解除しました。

結果はコチラ↓

いいねの内容が表示されました

ちゃんとコメント欄が表示されています!

これでようやく「いいね!いいねいいね!」って感じです。

たらハコは記事下の1か所だけしかないのでこれで完了ですが、複数個所に「いいね!」ボタンを設置している方はそれぞれ確認してみてください。

よっしーのひとこと

よっひー

調べてみると「overflow : hidden」が原因で「いいね!」ボタンが切れてしまうパターンもあるようです。

「いいね!」ボタンの親要素に「overflow : hidden」は指定しないほうがよさそうですね。

せっかく「いいね!」を押してもらっても、コメント入力欄が残念なことになっていたら思わず「いいね!」を取り下げたくなっちゃいますよね…

「いいね!」したことを後悔させないためにも、一度「いいね!」ボタンの表示を確認してみてはいかがでしょう。

ではまた。