昨日公開した当ブログのスマートフォン版デザイン。 このデザインを作成するにあたって、ちょっとカスタマイズしたのが、Facebookのソーシャルプラグイン「Like Box」です。 デフォルトだと固定幅レイアウトになるので、スマートフォンサイトでは可変幅になるようCSSで調整しました。その実装方法をご紹介します。 Page Pluginでは不要です 追記 「Like Box」が取下げられ、その代替として「Page Plugin」というソーシャルプラグインが登場しました。 こちらのプラグインは、最大幅が500pxしかありませんが、自動的にデバイスに合わせて幅が可変されるようになっており、本記事で紹介しているカスタマイズが不要になります。 「Like Box」は今後一切使えなくなりますので、速やかに新しいコードへ移行することをオススメします。 実装するとこんな感じになります! まずは縦向きで表示
![Facebook Like Boxを可変レイアウトにして横幅ピッタリにするカスタマイズCSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/34e37c1a6ac77e5eb6bac03bdd26751bc1195e6a/height=288;version=1;width=512/https%3A%2F%2Fmbdb.jp%2Fwp-content%2Fuploads%2F2012%2F11%2Flikebox-width-customize-01-320x315.jpg)