続、Facebookの「いいね!」ボタンのコメント欄が切れてしまうので対処するの巻。


公開日:2013年09月11日 水曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , , | 閲覧数:581 | Leave a comment

昨日のつづき。
Facebookの「いいね!」ボタンのコメント欄が切れてしまうので対処するの巻。

iframeが要素の下にかくれるので対処1 SNSが要素の下にかくれるので対処1

 

Facebookの「いいね!」ボタンのコメント欄が切れてしまうので対処するの巻。で、facebookのいいね!ボタンをクリックすると現れるコメント記入欄がちょん切れてしまうなどの不具合に対処してみた。

今日は、その続きで、
Facebookのコメント欄が、他の要素に隠れてしまったり、
右サイドにフローティングで設置したSNSボタン類が、他の要素に隠れてしまうなどの問題に立ち向かってみた。

Facebookのコメント欄が他の要素に隠れてしまう。

iframeが要素の下にかくれるので対処1

上図のように、「いいね!」ボタンをクリックしたら出てくるコメント記入欄が、他の要素の下に隠れてしまっている。

これは、通常HTMLは読みこんだ順に重なっていくので、
後に読み込むほど上に重なるから。

設置したSNSボタンは右にフローティングしているけども、実は実際にある場所は右サイドバー。
そして、今回上に表示されているFacebook Like Boxは、フッター部分。
読みこみ順で言うとフッターが最後なので、
Facebook Like Boxの方が上に重なってしまった。

重なり順を強制的に変更

この、重なり順序を変更するには、CSS(スタイルシート)で調整する。

z-index-スタイルシートリファレンス

z-indexプロパティは、ボックスの重なりの順序を指定する際に使用します。
z-indexプロパティは、positionプロパティでstatic以外の値が指定されている要素に適用されます。

上の様に、positionプロパティが設定されていないと効かないので注意。

数字が大きいほど上に重なります。

iframeが要素の下にかくれるので対処2

もうひとつ・・・

SNSボタンの上に他の要素が重なってしまう。

SNSが要素の下にかくれるので対処1

これも、上記同様。

SNSが要素の下にかくれるので対処1

ちゃんと、綺麗に重なったー!

だけど、また問題発見、、、
スマホの狭い画面で見ると、またまたコメント記入欄がちょん切れまーす_(_△_)ノ
iPhoneで見るとちょん切れてる

 

追記

2013/10/26 今現在、ソーシャルボタンは投稿内に2か所のみで、サイドバーとフローティングはやめました。
というのも、ソーシャルボタンが多いとページの読み込みがぐんと遅くなるようなので最低限に。
Zenbackのソーシャルボタンとaddthis(記事下のみ)のボタンだけにしてます。
それでも、まだ遅いんだけどね、、、

もし、気に入っていただけたらシェアしていただけると嬉しいです♪ この記事へのリンクはこちら↓コピーしてHTML編集画面に貼り付けでお使いください。

ブログの更新情報はこちらで配信中~
Feedlyで購読
follow us in feedly
更新をメールでお知らせ 配信: FeedBurner

sponsored


公開日:2013年09月11日 水曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , , | 閲覧数:581 | Leave a comment

著者 ねこもりや

どうぶつ占いは「コアラ」。ボーっとする時間が常に必要。”猫になりたい”とひたすら願う怠けもの。

My Photos

Leave a Reply

Required fields are marked *


CAPTCHA