Amazon アソシエイトに参加していると,しばしば WordPress で商品の紹介をすることになります.ただ,Amazon の商品リンクは,左端に設置されます.そして,右側が空いてしまいます.同時に複数の商品を紹介するときには,その空いた空間を使い商品リンクを並べたくなります.その方法を示します.
以下に示すように,flexBox を使い要素の配置をすると品よく商品リンクを並べることができます.
<ul style="list-style:none; display:flex; justify-content:space-evenly"> <li> ここに1番目の商品リンクを記述する </li> <li> ここに2番目の商品リンクを記述する </li> ••• </ul>商品リンクがひとつの場合は,センタリングされます.もちろん,商品リンク以外を並べることも可能です.上手に使うと,結構便利な機能です.
以下に具体例として, WordPress 関係の複数の書籍を紹介します.