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

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

:2014/8/20 STINGER Wordpress

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

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

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

スポンサーリンク

記事内リード文下_PC

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

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

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

デフォルトの設定はこんな感じ

サムネイル部分には「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);

に書いてあります。

add_image_size()の意味

add_image_size()内の各項目の意味は次の通り。

add_image_size()の説明

最後が「true」だと指定した横幅・縦幅で切り抜き、「false」だとリサイズされます。

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

カスタマイズ手順

今回の概要

まず「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で指定していることが原因です。

つまりどんな大きさにしてもdtの幅になる

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

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

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

完成!おつかれさまでした!

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

あとがき

サムネイルは記事の顔!よく考えてサイズや内容を決めましょう。
Stinger5はレスポンシブなのでスマホ側からの見た目も考慮してくださいね。

最後まで読んでいただきありがとうございました。
Jimon(@jimon_s)でした。

jimon


記事下_W左_PC

記事下_W右_PC

-STINGER, Wordpress
-,

サイドバー上_PC

CATEGORY
この記事のカテゴリ
STINGERの親カテゴリ
ブログ内の他のカテゴリ
更新チェックはこちらから!