当ブログにはFacebookのプラグイン「Like Box」を設置しています。 この「Like Box」、Facebookの専用ページから直接コードを取得すると、横幅がある程度決められているため、レスポンシブWebデザインの場合などページの横幅が変化する場合、はみ出したりして困ることがあります。 今回「Like Box」を新たにコンテンツ内に設置するにあたり、コンテンツ幅が変化しても対応できるようにしたかったので調べてみたところ、とりあえずCSSだけで対応できたので、メモも兼ねて記事にしておきます。 「Like Box」のコードにはいくつか種類がありますが、「HTML5」と「XFBML」であれば、次のように記述します。 .fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget iframe[style]{ width: 100
![Facebookプラグイン「Like Box」の横幅を可変にしてレスポンシブにする方法 | SEOモード](https://cdn-ak-scissors.b.st-hatena.com/image/square/66063d3fc5a24c18a9d9b3382e4cdee0c81b3f1d/height=288;version=1;width=512/https%3A%2F%2Fwww.tyto-style.com%2Fblog%2Fwordpress%2Fwp-content%2Fuploads%2F2014%2F01%2Ffb-like-box-code.png)