公開した当ブログのスマートフォン版デザイン。デフォルトだと固定幅レイアウトになるので、スマートフォンサイトでは可変幅になるようCSSで調整しました。その実装方法をご紹介します。Plugin」というソーシャルプラグインが登場しました。Box」が、2015年6月で終了します。Plugin」に変更しましょう。こちらのプラグインは、最大幅が500pxしかありませんが、自動的にデバイスに合わせて幅が可変されるようになっており、本記事で紹介しているカスタマイズが不要になります。Box」は今後一切使えなくなりますので、速やかに新しいコードへ移行することをオススメします。実装するとこんな感じになります!まずは縦向きで表示させた場合。これは固定レイアウトでも同じように表示できますよね。さっきのを横向きにしてみると、このように横幅ピッタリに可変します。Boxは縦向き表示のときと幅は変わらず、デザイン上意図しない余白ができて、なんだか不恰好・・・。可変幅レイアウトにしてしまえば、そんな心配ありません。CSSだけで可変レイアウトにというわけで、可変幅レイアウトにするCSSがこちら。Boxが可変幅レイアウトになります。Comments」といったものも影響を受けること。そこで、実装する際には、限定的にCSSが働くようにしなければなりません。Boxの外側を別のidやclassで指定したブロック要素で囲むようにします。その上で、先程のCSSをほんの少し変えてやればOKです。Boxのか可変幅レイアウトを実現できます。この方法は他のソーシャルプラグインに限定して可変幅にする場合にも使えますよ。スマートフォンサイトだけでなく、レスポンシブデザインのサイトにソーシャルプラグインを設置するときにも便利なんじゃないでしょうか。以前書いた、ツイートの埋め込みを可変幅レイアウトにする方法と合わせて実装すると、よりいいんじゃないかと思います。Embedですが、これをどんな横幅にもピッタリと対応させる方法をまとめてみました。カズキフリーランスのウェブディレクター。