いいね!のコメント欄が隠れる、切れる、はみ出さない。大丈夫きっと、ここに解決策がある。

LikeButton

あなたにも解決策がきっとここにある!!... はず。

毎日ワクワクしてますか!?AllSync.jpへようこそ。ほんのさっきまでタイトル通りの事で困っていて、ググりまくっていたSync.です!

最近やっとこさSNSボタンの設置にとりかかった当ブログなのですが、「いいね!」した時に、コメント付きで投稿する表示が隠れる(切れる)症状に悩まされていました。よ〜く考えてみたらそれってCSSの設定のせいだったんですよね。

Web系の方やちょっとわかっている方にすれば、簡単な話なのですがきっと気づかず困っている人もいるだろうと、備忘録も兼ねて解決方法をアップしておきやす!


「いいね!」して、表示されるコメ欄が隠れる(切れる)場合の対処方法

[code:css] /*他の要素の下に隠れる場合*/ .fb-like iframe { z-index: 9999; } [/code]
[code:css] /*ブロック内からはみ出さない(隠れる)場合*/ .fb-like iframe { overflow: visible; } [/code]
[code:css] /*いいね!ボタンと同じ横幅で切れる場合*/ .fb-like iframe { max-width: none!important; } [/code]

上記のいずれかの理由でほぼ原因は決まっているはずなんですが、ここで解決しなかった人がおられたらほんまにすいません...。スタイルシートは、後述されたものが優先して反映されるので、「いいね!」ボタンを設置しているブロック要素のCSSよりあとに、このスタイルを書き込むなど試してみてください。


AllSync

実はこの症状を一ヶ月間くらいどうしようもできず放置していました(笑)。おかしいと思いながら「いいね!」してくれていた人すいません。(平謝り)