横幅に合わせ並ぶ個数を自動調整するスタイルシート

ファンブログにアップロードした画像URLの調べ方は「ファンブログでアップロードした画像の場所」に書いてあります。

上のキャプチャー画面はブラウザの表示サイズで横に並ぶ数が自動で変わります。意味がわからない方は、試しに今開いているこのページのサイズを色々と変えてみてください。画像が横に２個並んだり、１個だけになったりします。

今回のテクニックを駆使した記事が「ゲーマーブログの収益アップにアクセストレードを強く薦める理由」です。リンクをクリックすると別画面で、その記事が表示されますので、見比べながら説明をご覧いただければ、理解が早いかと思います。

floatとwidthで横の個数を自動調整

上のキャプチャー画面は全部、横幅320ピクセルのアフィリエイトです。ブラウザの表示画面が660ピクセル以上あれば、横２個x縦2個の表示、なければ横1個x縦4個で表示します。ソースコードは以下の通りです。

<style type="text/css">
p.capture{
 float:left;
 margin-right:10px;
}
</style>

<p class="capture"><a href="リンクURL" target="_blank"><img src="画像URL" alt="" border="0" /></a></p>
<p class="capture"><a href="リンクURL" target="_blank"><img src="画像URL" alt="" border="0" /></a></p>
<p class="capture"><a href="リンクURL" target="_blank"><img src="画像URL" alt="" border="0" /></a></p>
<p class="capture"><a href="リンクURL" target="_blank"><img src="画像URL" alt="" border="0" /></a></p>
<p style="clear:left;">大きさも色々選べる。</p>

float:leftで画像を左寄せにしています。さらにmargin-right:10pxで画像の右側に10ピクセルの余白を作ります。これで2つ並んでもピッタリとくっついてしまいません。

画像自体が320ピクセルで、右に余白が10ピクセルつくと、合計330ピクセルです。ですから表示領域が660ピクセル以上あれば、横に2個並びます。しかし、足りない時には、横ではなく下に移動します。

最後にclear:leftを絶対に忘れないようにしてください。