Facebookの「いいね!」ボタンを埋め込んでいたんですが、少々前にコメント欄がDIVの枠に隠れてしまっていることに気づきました。

とりあえず記事コンテンツ下部に余白を作って対応してたんですが、これでは無い方がいいという状態。。。

Facebookコメント欄が隠れた状態
Facebookコメント欄が隠れた状態


テンプレートのCSSに変更を入れて対応して、正しく表示されるようにしました。

Facebookのコメント欄が正しく見えてる状態



ただし、このボタンを埋め込んでいる記事本文側への影響があるので、ちょっと時間があるときにでも(あるのか?)修正するか、もしくはこの際なのでテンプレートをがらっと変えつつ対応しようかと思います。



一応他のサイトでも同じ理屈なので、何をしたかは書いておこうと思います。


■「いいね!」ボタンがヘッダや、どのページでも同じ位置に描かれている場合

ボタンを含む<div>のスタイルでposition=absoluteを指定してレイアウトが崩れないのであれば、あとはz-indexで他の<DIV>よりも大きな値を指定してやれば前に出ると思います。



■「いいね!」ボタンが”記事の下部”など、動的コンテンツに関連して描かれている場合

この場合、大抵の場合、position=relativeの指定になっています。z-indexの指定だけでは前に出てくれません。隠れている原因として考えられるのは、「いいね!」ボタンを含む親の<div>でoverflow=hiddenが指定されていることです。

親の<div>(親のdivで指定した大きさの領域)からはみ出てしまいそうな要素は親のDIV要素内でしか表示されません。そこで、親のDIVで指定されているoverflowをoverflow=visibleにしてやれば、冒頭の図のように前に出てくれます。ただ、記事の中に更にDIV要素があり、そこで回り込みなどさせている場合なんかは記事コンテンツの崩れも生んでしまう可能性があります。

また、今使っているテンプレートはDIV要素全体がhidden指定されているので、これをvisibleにしてしまうとかなり崩れてしまいます。

なので、とりあえず今まで通りボタンの下の幅を広めに取っての対応は続きます。。。

サイト内検索

長押しで
スクロール