ページを選択

ストブロ

Coffee's Blog.

facebookのソーシャルボタン、コメント欄が切れる問題

執筆者 | 2014年04月01日 | ストブロ

先日修正したソーシャルボタン。
一見無事に動いている様でしたが、フェイスブックのボタンを押した時に問題があることに気がつきました。

リンクを共有する際にコメントを記入できるように吹き出し(コメント欄)が出るのですが、それがちゃんと表示されない・・・
途中で切れてるんですよね。

サイドバーの所では右側が切れる。
単記事の所では下側が切れる。

なんだこりゃ?という事で色々調べたり、悩んだり。

一般的には「iframe」要素に「max-width:100%」とかが指定してあると親要素の幅による制限を受けるそうで、
.fb_like iframe { max-width:"none !imortant"}
とかやると改善するらしいです。

私の風邪は喉から。
じゃなくて、私の場合はそれでは全く改善されず。

で、よーーーーくみてみると。
確かに親要素の横幅で切れている。
で、その親要素って厳密にどれよ?と見ていきました。

私のウェブサイトは現在2カラム構成。
右と左で分かれているのですが、どうやらその2カラムを分けるdivまで遡ります。

でも、floatやpositionって親要素から浮いている感じになるんじゃ?
あれ?って事でどうやら「overflow」の設定が怪しいことに気がつきました。

でも、overflowなんて、ナビゲーションを並べたりする要素にしか使ってないし・・・

ぴきーーーーーーん!

く、クリアフィックスっすかΣ(゜д゜;)

私のcssにはclearfixが設定されています。
当時色々調べて、それなりの物を設定したつもりなのですが、ここにありました。
overflow:"hidden"が。

これを削除したらあっさり解決。
私の2時間を返して。

クリアーフィックス的にもたぶん問題無いのか?
とりあえず、これで様子を見ます(´・ω・`)

使えば使うほどH4n Pro

ここ数年電器屋Walkerの収録はZOOMのR24にお世話になってきました。 でもこれからはH4n Proになりそうです。 テストすればするほど「あれ? 好きかも!?」と思うことがいっぱい! これって恋?違います、用途の違いなんです!...

RSS feedが上手く表示されなかった理由

先日の投稿で「index.htmlをindex.phpに変更して各ワードプレスのポスト一覧を取得して表示できるようにした」 と書きましたが、そももそどうしてそんなことをしなければならなかったか。...

第16回「maildrop、mailfilterによるメール振り分け 完成版」

これまでも「レンサバ迷惑メール対策」 や 「迷惑メール対策 後編」 等でさくらインターネットを初め多くのレンタルサーバーのメールシステムで採用されているであろう「maildrop、mailfilter」によるメール振り分けについてご紹介してきましたが、今回はそ...

未知との遭遇

新しい物に対して「これはないわー」とか「もう○○ブランドは堕ちたな」と物知り顔で言う時がある。 私も含めて。 でも、使ってもいない物に対してどうしてこんな風に言えるのだろう? と最近思います。 「自分が必要としない物=駄目なプロダクト」ではないでしょ?...

第3回「無線LANルーターの調整」

第2回までで、以下の2点がクリア出来ました。   1)RT-S300SE ブリッジ化成功(ひかり電話端末として動作) 2)無線LANルーター PPPoEでの接続成功、ルーター機能も有効  ...

第2回「無線LANルーターをルーターとして使う」

第2回「無線LANルーターをルーターとして使う」   続いて行きましょう。 1)無線LANルーターをRT-S300SEのLANポートに接続する。 この時点でまだパソコンを接続しないで下さいね。電源は入れてもOKです。...

第1回「RT-S300SEをブリッジ化するには」

以前からフレッツ光ネクスト(Bフレッツから自動移行)で使用しています。 今回無線LANルーターをバッファローのWRZ-1750DHP2に買換えましたが、その際に宅内のLAN環境を見直そうと思いました。  ...

第14回「Craftbukkit 1.7.9、UUID、Twitch配信」

レンタルサーバーforビギナーズ 第14回 「Craftbukkit 1.7.9、UUID、Twitch配信」 久しぶりにクラフトブキットのお話。難航している1.7系等 久しぶりのCraftbukkitのお話。...

0コメント


電器屋Walkerの過去配信のBGMで利用させて頂いております。

ポッドキャスト品質向上、整音テクニック 解説Live

開催のお知らせ

詳細はこちら

国際ポッドキャストの日

International Podcast Day Event

ツキイチ - 隣のポッドキャスト

まとめファンサイト