OGPに対応しますた。

2014.04.04

以前から気になっていたソーシャルボタンを修正して満足していたのもつかの間。 また別の問題に気がつきました。 facebookのいいねボタンを押すと・・・ あれ? コメント欄が切れる? いいねボタンを押した時に表示されるサムネイル、タイトル、サマリーが表示されるコメント欄。 自分のコメントを入れたりしてフェイスブックのタイムラインに表示させる機能の筈なのですが、上手く表示されません。 色々調べてみるとこのコメント欄はiframeを使用しているらしく、 CSSのリセットなどで、このiframeに対して何か指定していると問題が出る場合が多いらしい。 例えば「(親要素に対して)幅は100%ね!」的な。 そこで、CSSを調べてみたが私はiframeに対して設定をしていません。 念のため、以下のコードを追加して様子を見るも・・・・ .fb_like iframe { max-width:none !important;} 変化無し。 じゃあ、どの要素に幅の影響を受けているかを見てみた。 どうやら、2カラム構成の右側のdivの外枠に影響を受けてるっぽい。 ふむ でもfloatは枠の外へ飛び出しちゃう筈だから・・・divのサイズに影響を受け・・・あれ? float解除しちゃえばその限りじゃないか。 じゃあclearfix? まさか(笑) って事で、クリアフィックス関係の記述を見ていたら、 over... 続きを読む

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

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

2014.04.01

先日修正したソーシャルボタン。 一見無事に動いている様でしたが、フェイスブックのボタンを押した時に問題があることに気がつきました。 リンクを共有する際にコメントを記入できるように吹き出し(コメント欄)が出るのですが、それがちゃんと表示されない・・・ 途中で切れてるんですよね。 サイドバーの所では右側が切れる。 単記事の所では下側が切れる。 なんだこりゃ?という事で色々調べたり、悩んだり。 一般的には「iframe」要素に「max-width:100%」とかが指定してあると親要素の幅による制限を受けるそうで、 .fb_like iframe { max-width:"none !imortant"} とかやると改善するらしいです。 私の風邪は喉から。 じゃなくて、私の場合はそれでは全く改善されず。 で、よーーーーくみてみると。 確かに親要素の横幅で切れている。 で、その親要素って厳密にどれよ?と見ていきました。 私のウェブサイトは現在2カラム構成。 右と左で分かれているのですが、どうやらその2カラムを分けるdivまで遡ります。 でも、floatやpositionって親要素から浮いている感じになるんじゃ? あれ?って事でどうやら「overflow」の設定が怪しいことに気がつきました。 でも、overflowなんて、ナビゲーションを並べたりする要素にしか使ってないし・・・ ぴきーーーー... 続きを読む

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

INST-webのウェブサイトは「さくらのレンタルサーバー」で運用しています。

電器屋Walkerの音声ファイル配信は「さくらのVPS」で運用しています。

adsence




2017年12月
« 11月    
 123
45678910
11121314151617
18192021222324
25262728293031

音楽素材Musmus

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

RSS FEED

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