【解決済み】いいねボタンのコメント入力が見切れる時の対処 - frasm.net

frasm

フラズム
恋と冒険が、僕を大人にしたブログメディア
Update!
    No items.

【解決済み】いいねボタンのコメント入力が見切れる時の対処

ボタン類のテスト、全部押してますか? 僕はなかなか適当です。

先日、このブログでいいねボタンを試しに押してみたところ、ガッツリと見切れて表示されてなかったので、対処法をシェア。

こういう残念なエクスペリエンスって、せっかくイイネを押してくれた人にめちゃくちゃマイナスイメージですね。僕なら二度と押すまい、って思いますね。

CSSの調整で直りますので、とりあえず自ブログのボタンを押しましょう。

いいねボタンのコメント欄が見切れた時の対処方

症状の確認

2014-05-16_2154

▲本来こうなって欲しいのに…

2014-05-16_2153

▲見切れちゃう。

残念な結果ですね。

対応

まずは上記サイト様を見てもらえれば話早いのですが、チェックする基本的なポイントをまとめると、

  1. content部分とsidebarで対処が違う。今回はcontent部分とする。
  2. 親要素のoverfrow:hiddenを疑う。hiddenしてたら外す。
  3. iframeのmax-widthを疑う。div.fb-like iframeのmax-widthをnoneにする。

引っかかるポイントは上記の(2)(3)かなと。

まずは、要素の高さを成り行きにするために指定しがちな「overfrow:hidden」。FBいいねコメント欄が親要素より大きい場合、漏れた部分はhiddenされますので。

次に、レスポンシブ対応の為に全iframeにmax-widthを100%あたりを仕込むと、いいねボタンのコメント欄(iframeで描画されている)にも影響をおよぼすようです。

そのために、いいねボタンのコメント欄(div.fb-like iframe)のmax-width指定をnoneにして、一旦キャンセルすると、(2)(3)で問題解決となるパターンが多そうです。

▲コレだと全部のいいねボタンが対称になるので、親要素を指定して対象を絞った方が安全かなぁ。

まとめ

高さの成り行きのためのoverflow:hiddenは便利なんだけど、結構実害があったりするので、clearfixをちゃんと当てるべきだなと思いました。

自分のブログのボタンは全部押しておけ!と、バッドエクスペリエンスは思っている以上にダメージでかい!ってことをお忘れなきよう。

-スポンサーリンク-
Follow!

オススメのデザインのこと はコレ!

コメントを残す

frasm
Follow!