いいねボタンのコメント欄が切れた時の直し方

LINEで送る
Pocket

いいねボタンのコメント欄が切れちゃう。

WP Social Bookmarking Lightを導入したのですが、画像の通りいいねボタンを押すとコメント欄がほとんど切れちゃってコメントできません。以前もクライアントさんのサイト制作の時に同じ現象が発生していたのですがその時記事にしなかったので今回改めて修正方法をご紹介します。

テーマのCSS編集で修正

方法は至って簡単。管理画面からCSS編集で下記を書き加えてあげるだけ。

外観 > テーマ編集 > スタイルシート(style.css)の一番下に追加

すると下記のようにきちんと表示されるようになっているはずです。max-widthが指定されていたりz-indexがコメント欄より上にきていたり、overflow:hidden;で表示が消されたりしているのが原因です。その原因を特定できるようであればその部分だけ適用してあげればOKですが今回は全部盛りにしました。

fbcommentbox2

WP Social Bookmarking Light以外の場合

紹介したこの方法はWP Social Bookmarking Lightの場合です。他のプラグインや導入方法で若干記述が変わったりしますので、その時のご自分の環境に合わせて修正する方法を紹介します。GoogleChromeでいいねボタンを右クリック、FirefoxならFIREBUGで、ieなら開発者ツールで要素を検証してみましょう。

fbcommentbox3

上記画像のように私のブログの場合は wsbl_facebook_like です。ここがfb-likeの場合は下記のように指定してあげましょう。

改善しな〜い!っていう方が居たらお知らせください。

WordPress以外の普通のホームページの場合

※7月4日追記

こちらも簡単です。下記のコードをCSSに書き加えたらいっぱつ解決です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">