ストブロ

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時間を返して。

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

Webalizerを再集計する

音声データを配信しているVPSのサーバーをやむなくSSL化した。すると、そこからWebalaizer(アクスセス解析機能)に正しくログが取れていない状態だった。気がついたのは約2ヶ月後(笑)普段あまり見ていないので。...

DIVI Builder で PageSpeed Insights を改善する

Googleの「PageSpeed Insights」はウェブサイトの表示速度を評価して、改善する為の検査ツールですが、評価内容が多岐にわたり中々スコアが上げられない感じになります。色々取り組みしているのを備忘録的に。...

さくらのVPSのSSL証明を自動更新

さくらのVPSでポッドキャストの配信を行っているが、これまではSSLを取得せずに放置してきた。そしたらGoogle先生が怒って、ウェブ上での再生が出来なくなりました(笑)と言うことでLet's Encyptを使用してSSL証明を取得しまし。...

「返信先」を指定していない場合の挙動

さくらのレンタルサーバーのメーリングリストでの挙動の問題と解決策です。前回に引き続きメーリングリストのシステム「fml」絡みの記事になります。...

さくらのMLで送信元への配信をスキップ

さくらのレンタルサーバーを利用してグループ内にメールを配信する「メーリングリスト」を使用している場合、一つ困ることがあります。...

IPv6環境での外部アクセス方法 その2

「IPv6 (IPoE MAP-E)環境でNASに外部接続出来る様にする環境設定」 前回に引き続きIPv6環境にてSynologyのNAS(今回はDS218J)にアクセスする手順を確認していきます。 1)DS218Jを家庭内LAN環境に接続する。...

IPv6環境での外部アクセス方法 その1 Synology DS218J

電器屋Walker Synology部略してSyno部(シノブ)です。 現在2ベイモデルのNAS DS218Jを使用していますが、半年ほど実用して色々分かってきたことを備忘録としてまとめていきます。 みなさんのNASライフのお役に立てれば幸いです。...

Synology部 略してSyno部 始めます!

電器屋Walkerのコーヒーは外部ストレージそSynologyのDS218Jに頼っています。 ここ数ヶ月実用してきて色々と分かってきたこと、興味が深まったこと、これから学びたいことが出てきました。...

Windows10とBSoDとexfat

突如Windows10でBSoDが表示された。SDカードを挿入したタイミング。 SDカードはOM-D E-M1 MarkⅡで直前までテスト撮影等をしていたもの。OM-D E-M1 MarkⅡではきちんと認識されている。...

0コメント


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