Stinger5カスタマイズ！サムネイル画像を好きな大きさに変更する方法

記事一覧のサムネイル。
ページを訪れると真っ先に目に飛び込んでくる部分です。できるだけ見やすく、読者の方に見ていただきたいですね。

今回はそんなサムネイルのサイズを自由に変更する方法をご紹介します。
特に今までStinger3を使われていた方！前までと同じ方法ではサイズが変更できなくなっていますよ！

※この記事は「Stinge5」を使われている方向けです。「Stinger3」で同様のカスタマイズがしたいよ、という方はこちらの記事をご覧ください。

カスタマイズ前におさらい

デフォルトだとこうなってるよ！

まずはデフォルトのおさらいから。
記事一覧のひとつの記事に着目するとこんな構造になっています。

サムネイル部分には「dt」が割り当てられていて、CSSで「dtの幅は150px」「dtの画像はdtの横幅いっぱいに表示するよ」と指定されているんですね。

次に「itiran.php」を見るとこんな風に書かれています。

<?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; ?>

この中の「’thumb150′ 」の部分がサムネイルの大きさを指定するコードです。
具体的に’thumb150’がどんな大きさを表すのかは「functions.php」内の

add_image_size('thumb150',150,150,true);

に書いてあります。

今回はこの辺りを編集していきますよ。

カスタマイズ手順

今回の概要

まず「functions.php」に変更したいサイズのコードを追記します。
次に「itiran.php」で追加した新しいサイズを有効化します。
最後に「style.css」を調整しておしまいです。

Step1 functions.phpにコードを追加

まず「functions.php」にコードを追加します。以下のコードを追記してください。

add_image_size('好きな名前',横幅,縦幅,切り取りの可否);

追加する場所はもともとあったadd_image_size()の下にしておくと今後編集するときにわかりやすいですよ。

Step2 「itiran.php」でコードを有効化

次に追加したサイズを有効化します。元のコードの’thumb150’のところをStep1で追記した名前に変更してください。

<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <?php the_post_thumbnail( 'さっき決めた名前' ); ?>
<?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; ?>

Step3 「CSS」を調整

ここまで終えるとこのようになっているはず。

なんだかうまくいっていませんね。
これは「dtの横幅は150px」「dtの画像はdtの横幅いっぱいに表示するよ」とCSSで指定していることが原因です。

これを解消するために「style.css」に以下のコードを書き加えてください。

#topnews dt{
	width:自分で決めた幅px;
}

このコードを追加すると目的のサイズになります。

以上でカスタマイズは完了です。

あとがき

@Jimon_sさんをフォロー