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

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

2014年4月1日¦ カテゴリ:コヒ蔵の独り言 ¦ コメント (0)

静的ページのSNSボタン群の見直し

2014.03.16

最近はツイッターやfacebookに気軽にシェアしてもらう「SNSボタン」を付けるのが必須の条件になってきたように感じます。その他、PocketやFeedly等の「後で読む系」サービスに対しても手当が必要かな?と。
何よりもウェブに来てページを見てくれる人への利便性の提供が大事に思います。

これまではAddThisというソーシャルボタンを一気に解決してくれるサービスを利用していました。
でも、以外と自由が利かなくて(^^ゞ

困ったなぁと思っていると「あかめ女子のWebメモ」さんに大変良くまとまった記事が。
あかめ女子さんの記事はいつも目を通すようにしているのですが、いつも大変助かります♪

で、一念発起してまずは静的ページのボタンを見直し。
私は一時期CSSの書き方に悩んでいた時期がありまして、そんなときにサイトのリニューアルをしたものですからCSSの調整が大変でしたw
修正するのも面倒なので、その当たりは最小限にしてようやく綺麗に並んだSNSボタンが整備できました(`・ω・´)

次はワードプレスも修正せねば(=_=)むむむー

SNSボタンにお困りの方はあかめ女子さんの記事読んでみて下さいねー

2014年3月16日¦ カテゴリ:Coffeeの日記 - ウェブ更新情報 ¦ コメント (0)

INST-web、電器屋Walkerは「さくらのレンタルサーバー」を借りて運用しています。

2017年2月
« 8月    
 12345
6789101112
13141516171819
20212223242526
2728  

Photo Hito

PHOTOHITOブログパーツ

音楽素材Musmus

電器屋WalkerのBGMはこちらを利用させて頂いております。

RSS FEED

INST-web [ ストブロ ]のRSSフィード