stinger5をカスタマイズ!TOPの記事一覧のサムネイル画像とタイトルを縦並びにする!

SEOテンプレートとして有名な「STINGER5」ですが、
これの通常のTOPページの記事一覧と言えば、
大抵写真とタイトル・本文抜粋が横並びで以下のように表示されるかと思います。

stinger5demo

 

その並びをカスタマイズしようというのが今回の趣旨です。

 

 

目標は、以下のようなかたち。

 

 

うぇぶらる 足立区 フリーランス

 

 

基本は以下のコードを、小テーマ内のstyle.cssやら、stinger5本体のstyle.cssの一番下かどこかにでもコピペし、テンプレートファイル「itiran.php」の6行目と8行目を修正します。
ただし、小テーマを適用している人は、場合によっては表示がおかしくなるかもしれないのでご了承ください。

 

 

まずはCSSの方。


/*-----------------------------
TOP一覧ページ サムネイル画像を縦並びにする
------------------------------*/
#topnews dd{
padding: 20px 5px 10px;
}

#topnews dt {
width: 100%;
height: 300px;
float : none;
clear : none;
overflow: hidden;
}

#topnews dt img {
width: 100%;
}

上記をコピペしたら、
次はテンプレートファイル「itiran.php」を修正します。


<div id="topnews">
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <dl class="clearfix">
    <dt> <a href="<?php the_permalink() ?>" >
      <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <?php the_post_thumbnail( 'thumb150' ); ?>
      <?php else: // サムネイルを持っていないときの処理 ?>
      <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
      <?php endif; ?>
      </a> </dt>
    <dd>

ハイライト部分を以下のように修正します。


<div id="topnews">
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <dl class="clearfix">
    <dt> <a href="<?php the_permalink() ?>" >
      <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <?php the_post_thumbnail( ); ?>
      <?php else: // サムネイルを持っていないときの処理 ?>
      <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.jpg" alt="no image" title="no image"/>
      <?php endif; ?>
      </a> </dt>
    <dd>

以上です。

解説

 

 

やっていることは簡単。

dtのフロートを解除して、
横幅150pxを100%に変えてあげるだけ。

 

 

※ただし、それだけでは、dt内の画像が小さいままなので
dt内のimgの横幅を100%に指定してあげること。

 

 

加えて、imgを囲っているdtの高さを300px指定。
これは人によって、200pxにするでも、何でも良し。

注意点としては、等比が崩れてしまうのでimg自体の高さを指定してはいけません。
imgを囲っているdt内の高さを指定してそこからはみ出ている部分を
「overflow:hidden」で非表示にすることで、画像の等比を崩さずに表示させています。

続いて、テンプレートファイルの方は、
サムネイル画像を表示させる時に、150px×150pxで表示させるのを解除し、フルサイズで表示させるようにしています。
フルサイズと言っても、先ほどのcssで100%で指定しているので、枠内からはみ出る事はありません。

サムネイル画像がない場合についても、width=”100px”で表示されるのを解除し、100%表示になるようにしています。

 

以上!

 

サムネイルとタイトルを横並びにするか、縦ならびにするかはあくまで本人の趣味でしかないかもしれませんね。。