ウェブ、ショウジン

Facebook Like Boxを幅100%にする(レスポンシブWebデザイン対応)

2012-7-4
Category
CSS Facebook

通常、そのままウィジェットを仕込んだだけでは幅は固定。埋め込んだウィジェットのソース内でwidth=”100%”にしてもダメ。widthの指定自体をなくしてもダメ。

これをたとえばレスポンシブWebデザインに対応させるために幅100%に設定したい場合は以下のCSSを追加すればよい。


/* Facebook Like Box width:100% */
.fbcomments,
.fb_iframe_widget,
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fbcomments iframe[style],
.fb_iframe_widget span{
    width: 100%! important;
}

これで、Like Boxが入っている親要素内でLike Boxの幅は100%になってWindowサイズに追従して変化するようになる。

読み込んでいるLike Boxのソースが変わってしまうともちろん効かなくなるだろうけれども(class名が変わるとか)とりあえずはこれで大丈夫かと。

以下の記事にお世話になりました。ありがとうございます。

約36時間でレスポンシブデザインを作る!効率最優先で作るため必要だったリソースや情報色々

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿