AN(tcd014)の関連記事を横2記事×縦3記事で6記事表示にする

AN(tcd014)では、PCで表示したとき、投稿ページに表示される関連記事は5記事が横並びに表示されるようになっています。これを横に2記事並べて、縦に増やしていく方法を紹介します。

変更前

関連記事に表示される記事数を変更する

関連記事に表示される記事数を、single.phpで変更します。横に2記事表示するので、偶数個がいいかと思います。

今回は、横に2記事×縦に3記事で6記事表示されるようにしたいと思います。

<?php // related post
      if ($options['show_related_post']) :
      $odd_or_even = 'odd';
      $categories = get_the_category($post->ID);
      if ($categories) {
      $category_ids = array();
       foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
        $args=array(
                    'category__in' => $category_ids,
                    'post__not_in' => array($post->ID),
                    'showposts'=>5,
                    'orderby' => 'rand'
                  );
       $my_query = new wp_query($args);
       if($my_query->have_posts()) {
 ?>

‘showposts’=>5, の部分が、表示される記事数です。この数字を 6 に変更してみます。

<?php // related post
      if ($options['show_related_post']) :
      $odd_or_even = 'odd';
      $categories = get_the_category($post->ID);
      if ($categories) {
      $category_ids = array();
       foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
        $args=array(
                    'category__in' => $category_ids,
                    'post__not_in' => array($post->ID),
                    'showposts'=>6,
                    'orderby' => 'rand'
                  );
       $my_query = new wp_query($args);
       if($my_query->have_posts()) {
 ?>

これで6記事表示されるようになります。

style_pc.cssで1記事分の幅を変更する

まず、横に2記事だけが入るように、#related_post ul の margin を調整し、#related_post li の width を変更します。高さは、サムネイルが入る高さを指定します。

また、記事タイトルはサムネイル画像の右側にfloatされて入ってくるので、画像の右marinを0から15pxに変更して、画像と記事タイトルの間に余白を作るようにします。

それから、タイトルを中央寄せから左寄せに変更します。

変更前

/* related post*/
#related_post { margin:20px; border:1px solid #ccc; background:#f9f9f9; }
#related_post .headline { background:#b9b9b9; color:#fff; font-size:14px; padding:0 18px; height:36px; line-height:36px; margin:0; }
#related_post ul { margin:15px -30px 15px 15px; }
#related_post li { float:left; margin:0 17px 0 0; width:108px; }
#related_post .image { float:left; background:#fff; border:1px solid #ccc; padding:7px; margin:0 0 5px 0; }
#related_post .image img { width:90px; height:auto; display:block; }
#related_post .image:hover img { opacity:0.6; }
#related_post .title { font-size:12px; margin:0; line-height:160%; text-align:center; }
#related_post .title a { color:#333; }

変更後

/* related post*/
#related_post { margin:20px; border:1px solid #ccc; background:#f9f9f9; }
#related_post .headline { background:#b9b9b9; color:#fff; font-size:14px; padding:0 18px; height:36px; line-height:36px; margin:0; }
#related_post ul { margin:15px 0 15px 16px; }
#related_post li { float:left; margin:0 16px 10px 0; width:294px; height:106px; }
#related_post .image { float:left; background:#fff; border:1px solid #ccc; padding:7px; margin:0 15px 5px 0; }
#related_post .image img { width:90px; height:auto; display:block; }
#related_post .image:hover img { opacity:0.6; }
#related_post .title { font-size:12px; margin:0; line-height:160%; text-align:left; }
#related_post .title a { color:#333; }

横に2記事が3段になり6記事表示されるようになりました

関連記事-2記事を3段で6記事表示

サムネイル画像のサイズやマージンなどは、お好みで調整してくださいね。