Facebookのプラグインである「Like Box」はWebサイトとFacebookページを
両方運用している所にとってはかなり使う頻度の高いものですけど
Facebookから発行されたコードをそのまま貼り付けると、
横幅が固定されてしまうので、レスポンシブサイトにはちょいと不格好。
なので、横幅を100%にすればいいやんとCSSに下記を加えればOKです。
.fb-like-box,
.fb-like-box span,
.fb-like-box iframe[style]{ width: 100%!important; }
普通、レスポンシブ対応サイトに貼り付けようとしているのならば
Like Boxのコード発行の際にはHTML5を選んでいるだろうという前提なので
上記のCSSはiframeやXFBMLでコード発行した場合には使えません。
ちなみにXFBMLの場合はこうすればOK。
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{ width: 100%!important; }
えーい、じゃあiframeの場合も書いておきましょう。
iframeの場合は発行されたコードをdivで囲ってやって
そのdivのクラス名が例えば「fb-likebox」とすると下記でOK。
.fb-likebox iframe{ width: 100%!important; }
このやり方だけはエントリー題名である「CSSのみ」ではなくなります(笑)
さすがにレスポンシブサイトでiframeを使うのはあまりないとは思いますが念のため。
