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

Pocket
LINEで送る

まずは、内容の都合上、スマホ用のメディアクエリを書き込んでありませんので、スマホでは、この記事は、まともに表示されません。宜しくお願いします。(^^;

下の6枚の画像は、このブログの安曇野の風景カテゴリの最新記事6件のアイキャッチ画像を表示させたものです。

まずはアイキャッチ画像を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のアイキャッチ画像を表示する場合は、動的なわけで、どうしたもんかと、当時、ちょっと悩んでしまったわけです。(^^;

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

解決方法1

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で、はみ出る部分を非表示にします。これで、綺麗に収まります。実際に表示してみると、こんな感じです。

     

解決方法2

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にすれば、綺麗に収まります。実際に表示してみると、こんな感じです。

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

<?php the_title(); ?>

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

  • 高瀬ダムのダム湖を望む紅葉
    濁沢の滝・高瀬ダムの紅葉
  • 有明山と向日葵畑
    お盆を過ぎると秋の雰囲気が
  • 有明の田んぼの水鏡
    大峰高原のタンポポの風景・有明の田んぼの水鏡
  • レンゲソウの花
    ビューティフルシーズン到来 レンゲソウの花
  • 田多井観音堂の枝垂桜2
    今年の桜はもちが良かった!(^^)
  • 大王わさび農場の紅梅
    安曇野の風景は早朝がおすすめ! 大王の紅梅・山の中腹の雪
   
Pocket
LINEで送る

YASUKE YAMURA

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ツールバーへスキップ