ページを選択

ストブロ

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

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

さくらのレンサバをLet’s Encryptでhttps対応 その5

レンタルサーバーforビギナーズ さくらのレンタルサーバーをLet's Encryptでhttps対応(SSL対応) 「その5 SSL証明書をwwwありとwwwなしに設定する。」 みなさんご機嫌いかがですか、久しぶりのレンタルサーバーforビギナーズです。...

さくらのレンサバをLet’s Encryptでhttps対応 その3

レンタルサーバーforビギナーズ さくらのレンタルサーバーをLet's Encryptでhttps対応(SSL対応) 「その3 混在コンテンツの解消」 みなさんご機嫌いかがですか、久しぶりのレンタルサーバーforビギナーズです。...

さくらのレンサバをLet’s Encryptでhttps対応 その1

レンタルサーバーforビギナーズ さくらのレンタルサーバーをLet's Encryptでhttps対応(SSL対応) 「その1 SSL証明書の申し込み」 みなさんご機嫌いかがですか、久しぶりのレンタルサーバーforビギナーズです。...

https化の実践

私用しているサーバーのhttps対応を先行させるべきか、社用で使用しているサーバーのhttps対応を先行させるべきか。 非常に悩みましたが、社用の方は構成がすっきりしているのでそちらの対応を先行させる事にしました。...

迷惑メールとの攻防

中々収録できないなぁ。 社内でも迷惑メールの研究を(勝手に)担当しているし、 迷惑メールの手口などには十分注意する様に心ぐうzがけているにも関わらず、先日地雷を踏んでしましました。...

https化への準備

今日から出張です。 自宅にいないので逆に出張先でできる作業は何かと考えました。 そこで、計画していたhttps化への準備を始めることに。 今日は手始めに同一サーバー内で動かしている2つのWordpressの整理。...

メルカリ、カウルを活用する。

backspacefmでメルカリの中澤さんという方がゲスト出演されていました。 ずいぶん昔の話です。 単純に中澤さんの印象が良かったので「じゃあ、メルカリ使ってみようかな」と思い立ち 大変不純なままにメルカリを使い始めました(笑)...

久し振りに更新が出来ている。

「忙しかったから」という訳でもないし「忙しくなくなったから」という訳でもないんだけど 久し振りにブログの更新が出来ています(笑) いま、https対応の為の準備をしています。 これまでWordpress管理画面は個別に共有SSL対応していましたが、...

光配線とPR-500MIとV6オプションと

おはようございます。 集合住宅に住んでいるのですが、これまで各戸へのネットワーク配線はVDSL方式でした。 これではフレッツ光契約でも100Mまでしか出せないんです。 そこで少しでも回線速度を稼ごうと申し込んだ「V6オプション」...

静的ページに外部のWordPressから記事を読み込む方法 解説

php7.1に対応し、mysqli(手続き型)の記述スタイルで 複数のWordpressから記事一覧を取得する為のphpです。 早速部分毎に解説していきます。 1)データベースへの接続 まずPHPの中でデータベースに接続する方法ですが、以下の部分です。...

0コメント


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

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

開催のお知らせ

詳細はこちら

国際ポッドキャストの日

International Podcast Day Event

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

まとめファンサイト