WordPress備忘録　特定カテゴリの投稿のアイキャッチ画像を横に並べた時の右端余白の調整方法

まずはアイキャッチ画像をquery postsを使って取得します。

<?php query_posts('cat=4&showposts=6');
if (have_posts()) : while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink(); ?>" >
<?php the_post_thumbnail(array(200,200)); ?></a>
<?php endwhile; endif; wp_reset_query(); ?>

cat=4&showposts=6では、カテゴリーID：4の投稿を6件表示する指定をしています。ちなみにカテゴリーIDはダッシュボードの投稿、カテゴリで、カテゴリ名の上にカーソルを重ねると、ブラウザの下の部分に表示されます。
array(200,200)では、表示させるアイキャッチ画像の大きさを指定しています。ここでは、200としました。

これで、表示させたいカテゴリのアイキャッチ画像を好きな件数だけ表示できるので、あとは、スタイルシートで見栄えを整えてやるだけなんですが、実は僕は、触り始めの頃、ここで、つまずいてしまいました。(^^;

取得したアイキャッチ画像を横並びにするために、float:leftを使うと思いますが、上の例では、色をつけた外枠の幅を680px、外枠の余白を25px、画像の幅を200px、画像と画像の間の余白として、右marginを15pxにしています。これだと、外枠の幅から余白分を引くと630pxで、それに対して画像幅と画像の右marginの合計は645pxになるので、次のように右端の画像が下に落ちてしまいます。

今度、枠の中に収まるように、画像の幅を195pxにすると、画像幅と右marginの合計は630pxになり、画像は下に落ちないようになりますが、当然のことながら、下のように、左端に比べ、右端の余白が15px大きくなってしまいます。

これが静的なページなら、右端の画像部分にだけ、右marginが0のclassを付加するだけなんですけど、Wordpressのアイキャッチ画像を表示する場合は、動的なわけで、どうしたもんかと、当時、ちょっと悩んでしまったわけです。(^^;

ということで、その解決方法を２つ書いてみたいと思います。

HTML

<div style="width:630px; padding:25px 25px 10px 25px; background-color:#bbbed5; overflow: hidden; ">
<div id="thum1">
<ul >
<?php query_posts('cat=4&showposts=3');
if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>" >
<?php the_post_thumbnail(array(200,200)); ?></a>
</li>
<?php endwhile; endif; wp_reset_query(); ?>
</ul>
</div>
</div>

CSS

#thum1 {overflow: hidden; width: 630px;}
#thum1 ul {margin: 0px;
padding: 0; 
width:645px;
}
#thum1 ul:after { content:" "; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }
#thum1 li {display:block; padding: 0;
width:200px; margin-right:15px; margin-bottom:15px; float:left;
}

#thum1 ul で、ulの幅を645pxにして、敢えて外枠からはみ出させます。そして#thum1の幅は630pxにして、overflow: hiddenで、はみ出る部分を非表示にします。これで、綺麗に収まります。実際に表示してみると、こんな感じです。

HTML

<div style="width:630px; padding:25px 25px 10px 25px; background-color:#bbbed5; overflow: hidden; ">
<div id="thum2">
<ul >
<?php query_posts('cat=4&showposts=3');
if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>" >
<?php the_post_thumbnail(array(200,200)); ?></a>
</li>
<?php endwhile; endif; wp_reset_query(); ?>
</ul>
</div>
</div>

CSS

#thum2 ul {margin: 0px;
padding: 0; 
}
#thum2 ul:after { content:" "; display: block; clear:both; visibility:hidden; }
#thum2 li {display:block; padding: 0;
width:200px; margin-right:15px; margin-bottom:15px; float:left;
}
#thum2 li:nth-child(3n) {margin-right:0px}

疑似クラス:nth-child()を使って、3の倍数のリストだけ、右marginを0にすれば、綺麗に収まります。実際に表示してみると、こんな感じです。

どちらも見た目は一緒なんですけど、画像の上にカーソルが乗った時に、動作をつけたりする場合は、解決方法２の方が、場合によっては都合が良いような気がします。(^^;

<?php the_title(); ?>

を入れて、アイキャッチ画像と一緒にタイトルを表示させたり、カーソルが乗った時に画像を半透明にしたり、拡大したり等、動作をつけたりして、あとは、お好みでって感じでしょうか・・・。(^^;