• 2015.2.3
• TCDANカスタマイズ
• コメントを書く

AN(tcd014)で関連記事のサムネイルをなしにして記事タイトルのみのリスト表示にする

AN(tcd014)の関連記事は、サムネイルと記事タイトルが表示されるようになっています。ですが、アイキャッチ画像をほとんど使わない方の場合、「No Image」のサムネイルだらけになってしまいます。

変更前

変更後

ということで、サムネイルを表示せず、記事タイトルだけをリストで表示する方法を紹介したいと思います。

single.phpのサムネイル部分を削除する

single.php の <div id="related_post"> の中にある <a class="image" で始まる1行を削除します。

変更前

<div id="related_post">
  <h3 class="headline"><?php _e("Related post","tcd-w"); ?></h3>
  <ul class="clearfix">
   <?php while ($my_query->have_posts()) { $my_query->the_post(); ?>
   <li class="clearfix">
    <a class="image" href="<?php the_permalink() ?>"><?php if ( has_post_thumbnail()) { the_post_thumbnail('small_size'); } else { echo '<img src="'; bloginfo('template_url'); echo '/img/common/no_image3.gif" alt="" title="" />'; }; ?></a>
    <p class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></p>
   </li>
   <?php }; ?>
  </ul>
 </div>

変更後

<div id="related_post">
  <h3 class="headline"><?php _e("Related post","tcd-w"); ?></h3>
  <ul class="clearfix">
   <?php while ($my_query->have_posts()) { $my_query->the_post(); ?>
   <li class="clearfix">

    <p class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></p>
   </li>
   <?php }; ?>
  </ul>
 </div>

これだけで、関連記事にサムネイル画像は表示されなくなります。

サムネイルを消した状態です。

スマホだとこんな感じになります。

記事の表示スタイルを変更する

PCの表示では float:left; を使って、1行で2記事以上表示されるようになっています。

サムネイルの画像をなくした場合、1行に1記事表示されればOKなので、フロートしないように float:left; を削除して、2記事目以降がフロートしないようにします。

また、widthの指定もしないようにします。

それと、記事タイトルが中央寄せになっていますので、左寄せに変更します。変更するファイルは、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 -30px 15px 15px; }
#related_post li { float:left; margin:0 17px 0 0; width:108px; } /* float:left;と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:#ffffff; }
#related_post .headline { background:#eebbcb url(img/side/headline-heart1.png) no-repeat 4px 7px; color:#fff; font-size:14px; padding:0 32px; height:36px; line-height:36px; margin:0; }
#related_post ul { margin:15px -30px 15px 16px; }
#related_post li { margin:0 17px 0 0; }
#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:left; }
#related_post .title a { color:#333; }

スマホでは、元々フロートされていませんでしたので、style_sp.cssを変更する必要はありません。

フロートを解除して記事タイトルを左寄せにした状態

リストマークを追加する

AN(tcd014)では、リストタグで表示されるリストマークが表示されないようにCSSに書かれていて、そのままですとテキストだけのリストになってしまいます。

テキストだけでは、ちょっと淋しい感じなので、リストマークをつけたいと思います。

リストマークを好きな画像で表示する場合

CSSに以下を書き加えます。今回は、元々、テーマに入っているリスト画像(img/common/bullet1.gif)を追加してみます。

/* 関連記事のリストマーク */
#related_post ul li { background:url(img/common/bullet1.gif) no-repeat 0 10px; padding:0 0 0 10px; }

追加する場所は、style.cssの /* list */ 部分や、style_pc.cssの /* related post*/ の中、またはstyle_pc.cssの最後など、自分がわかりやすいところに追加してください。

style_pc.cssに追加した場合は、style_sp.css にも同じように追加しないと、スマホで見たときにリストマークが表示されません。

style.cssの /* list */ 部分だと、PCとスマホの両方に追加されます。

リストマークをつけるとこのようになります。

スマホではこのようになります。

リストマークの画像はお好きな画像をアップロードしてください。画像のサイズに合わせて、右paddingも調整してくださいね。

リストマークの大きさは、記事タイトルのfont-sizeとのバランスを考えて決めるといいと思います。

ちなみに、PCとスマホでは、記事タイトルのfont-sizeが違いますので、リストマークの大きさも変えた方がいい場合もあります。

例えば、元々指定されている font-size が 12px、line-height が 160% の場合、行の高さは、12px×line-height(160%)≒19px になりますから、高さのサイズが19pxに収まるくらいのサイズであれば、記事タイトルとのバランスもよくなるかと思います。