wordpressの記事で画像を（底をそろえて）並べたい場合のCSSの書き方

ありそうでなかった画像の並べ方。HTML4.0派としてはtableタグを使えば、チョー簡単に並べられるわけですが、このご時世、それはあまりにもダサい。というワケでCSSによる画像の並べ方を。

例えば、リンゴとミカン、洋ナシの３つの画像を普通に画像登録してタグを挿入するとこのようになります。

CSSはLIを使う！

CSS全盛でTABLEタグはほとんど見かけなくなりました。その代わり、要素を横に並べるタグは<ul><li>—</li></ul>が良く使われます。

このタグをそのまま書けば、文字通り、下に向かって箇条書きにリスト表示されますが、ひとつの<li>をボックス的に使って横に並べる方法があります。

.yoko li {
     margin:0;
     padding:0;
     list-style:none;
     float:left;/※横並びは、ここがポイント！/
 }

LIで枠サイズと底ぞろえの指定

先ほどのCSSは余白をゼロにして、リストの丸ボタンを消し、横に並べる（float）ための指定を行いました。

今度は、各liに大きさと底揃えの指定を行います。

.yoko li {
    width:150px; /* liに挿入する画像の最大幅の大きさ */
    height:150px; /*  liに挿入する画像の最大縦の大きさ  */
    position:relative;
}
.yoko img {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

以上のCSS３セットをstyleや追加CSSに記載して、HTMLタグを挿入すればOKです。

HTMLタグはシンプル

<ul class="yoko">
    <li><img src="~~~yoko1.png" width="162" height="130" alt=""></li>
    <li><img src="~~~yoko2.png " width="162" height="120" alt=""></li>
    <li><img src="~~~yoko3.png" width="162" height="217" alt=""></li>
</ul>

リンゴとみかんの法則

ちなみに、今回のwordpressの画像を横に並べるテクニック。ショップサーブでもばっちり使えますよ！

そしてそ、リンゴとみかんの法則。ご存知でしょうか？

どこの誰が提唱したのかわかりませんが、言われてみれば確かに効果がありそう・・・そんな販売テクニックがリンゴとみかんの法則です。

簡単に言うと、商品をアピールする場合、論点をそらして、価格を安く見せる、お得感を感じられるような表現方法です。

例えば、あなたが、高級ソファーを販売しているとします。その時、販売価格を安く見せるというか、「価値あり」と思ってもらうために、類似品と比べるのではなく、「高級ホテル」などと比べるわけです。

このソファー（１セット５０万円）は、Rホテルに使われているブランドと同じものです。１泊７万円～１０万円くらいの部屋に使われています。

でも、ご自宅で使えば、１日（泊）わずか8,000（５年使用した場合）ほどでゆったりラグジュアリーな気分をお楽しみいただくことができます。

という感じですね。ま、例えが、いまいちかもしれませんが、一度、リンゴとみかんの法則を調べてみてください。販売心理学的な感じですね。