AN(tcd014)の関連記事に表示される記事数を4に変更する

AN(tcd014)の関連記事に表示される記事数を変更する

AN(tcd014)では、single.php(単一記事の投稿)に関連記事を表示するphpコードが入っていますので、YARPPなどのプラグインを使わなくても関連記事が表示されるようになっています。

デフォルトでは、記事タイトルの font-size が 12px で、最大で5記事まで表示されるようになっています。

ですが、それが私には小さく感じたこと、このサイトでは記事本文の font-size を 16px にしていて、それだと記事本文と関連記事のバランスが少し悪く感じてしまいました。

ですから、関連記事の記事タイトルの font-size を 14px にして、サムネイル画像も少しだけ大きくして、4記事までの表示になるようにカスタマイズしています。

変更前

関連記事デフォルトの状態

変更後

関連記事-4記事均等

今回はこの5記事表示される関連記事を4記事表示に変更するカスタマイズ方法を紹介します。

カスタマイズをする場合の注意
必ずバックアップを取って自己責任でお願いします。もし何らかのトラブル等がおこっても、私は一切の責任を負えませんのでご了承ください。

関連記事に表示される記事数を変更してサムネイルとフォントサイズを大きくする

変更するファイルは、single.phpとstyle_pc.cssです。

single.phpで表示する記事数を変更

single.phpで、<?php // related post と書かれた部分を探してください。

<?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, の部分が、表示される記事数です。この数字を 4 に変更します。

<?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'=>4,
                    'orderby' => 'rand'
                  );
       $my_query = new wp_query($args);
       if($my_query->have_posts()) {
 ?>

これで、表示される記事数が4記事になります。

関連記事が4記事になり右にスペースができます。

関連記事-4記事表示

style_pc.cssで1記事分の幅を広げてサムネイルとフォントサイズを大きくする

表示される関連記事が4記事になることで、減った1記事分のスペースが右側にできてしまうので、1記事ずつの領域を広げて調整します。

また、1記事ずつの領域を広げる分、サムネイル画像の大きさと記事タイトルのフォントサイズも大きくして調整します。

変更するファイルは、style_pc.cssです。style_pc.cssで、single post page の中にある /* related post*/ という部分を探してください。

まず、#related_post ul で指定されている右のmarginを-30pxから0に、左のmarginを16pxにします。

次に、#related_post li で、関連記事1記事分のwidth(幅)を108pxから139pxに、右marginを17pxから16pxにします。

marginやwidthの数字は、4記事が均等におさまるように私が計算した数字なので、これじゃなきゃいけないということはありません。お好みで調整してくださいね。

変更前

/* 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 0 0; width:139px; }
#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; }

これで表示されている4記事が均等になりました。

関連記事の1記事分の幅を広げた状態

関連記事-1記事分のwidthを広げた状態

あとはサムネイル画像の大きさやフォントサイズの大きさを調整してバランスを整えます。

まずサムネイルの画像の大きさですが、#related_post .image img で指定されている、widthを90pxから123pxにしてみます。

そして、記事タイトルのフォントサイズは、#related_post .title にある font-size で、私は12pxから14pxにしてみました。

/* 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 15px; } 
#related_post li { float:left; margin:0 16px 0 0; width:139px; } 
#related_post .image { float:left; background:#fff; border:1px solid #ccc; padding:7px; margin:0 0 5px 0; } 
#related_post .image img { width:123px; height:auto; display:block; }
#related_post .image:hover img { opacity:0.6; }
#related_post .title { font-size:14px; margin:0; line-height:160%; text-align:center; }
#related_post .title a { color:#333; }

すると、いい感じに4記事がおさまりました。paddingの数字は変更していないので、画像と画像の枠のあいだは変わっていません。

関連記事のサムネイルサイズを調整した状態

関連記事-4記事均等

記事タイトルは、ちゃんとサムネイルの下に表示されていますが、実際は画像の横に回り込んでいます。画像の横に記事タイトルが回り込めるスペースがないため、画像の下に表示されているんですね。

これは、最初から回り込まない設定にしておくこともできます。

関連記事の記事タイトルの回り込みを解除する

変更するファイルは、style_pc.css です。スマホで見た時には、回り込んでいるほうがいいので、style_pc.css のみを変更します。

変更前

/* 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 15px; } 
#related_post li { float:left; margin:0 16px 0 0; width:139px; } 
#related_post .image { float:left; background:#fff; border:1px solid #ccc; padding:7px; margin:0 0 5px 0; } 
#related_post .image img { width:123px; height:auto; display:block; }
#related_post .image:hover img { opacity:0.6; }
#related_post .title { font-size:14px; margin:0; line-height:160%; text-align:center; }
#related_post .title a { color:#333; }

#related_post .title に clear:both; を書き足します。

変更後

/* 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 15px; } 
#related_post li { float:left; margin:0 16px 0 0; width:139px; } 
#related_post .image { float:left; background:#fff; border:1px solid #ccc; padding:7px; margin:0 0 5px 0; } 
#related_post .image img { width:123px; height:auto; display:block; }
#related_post .image:hover img { opacity:0.6; }
#related_post .title { clear:both; font-size:14px; margin:0; line-height:160%; text-align:center; }
#related_post .title a { color:#333; }

回り込むようになっているのに、回り込めなかったとしても、特に問題はないと思うので、この部分はお好みでカスタマイズされてください。

関連記事

コメント

  • トラックバックは利用できません。
  • コメント (0)

  1. この記事へのコメントはありません。

トップページに戻る

サイト内検索

おすすめ記事

ページ上部へ戻る