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

公開日: : 最終更新日:2014/08/23 Stinger, Wordpress ,

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

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

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

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

Sponsored Link

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

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

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

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

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


 これは!と思ったらシェアして頂けると嬉しいです
  • このエントリーをはてなブックマークに追加
  • Pocket
  • 111 follow us in feedly
Loading Facebook Comments ...

Comment

  1. […] 「これは!ログ」の「Stinger5カスタマイズ!サムネイル画像を好きな大きさに変更する方法」 […]

  2. R子 より:

    はじめまして。
    いつもstinger5のカスタマイズ記事を分かりやすく書いていただき、ありがとうございます!!
    参考にさせていただいています。

    教えていただいたとおりサムネイルを大きくすることはできたのですが、サムネイルと右側の記事の隙間がなくなってしまいました。
    5pxぐらいの隙間を入れようと思い、スタイルシートを下記のように変更してみました。

    #topnews dd {
    padding-left: 175px;
    }

    #topnews dd {
    padding-left: 115px;
    }

    ・・が、変化がありませんでした。。

    topnews dt と dd の間に隙間を入れるには上記の方法ではできないでしょうか??

    ご迷惑をお掛けしますが、教えていただけると大変助かります。

    よろしくお願い致します。

  3. R子 より:

    こんにちは。
    先日、質問させていただいた者です。
    こちらで試しているうちに解決できました。
    ご迷惑をお掛けしてすみませんでした。

    よろしくお願い致します。

    • Jimon より:

      R子さんこんにちは。

      確認が遅くなり申し訳ありません。
      解決できたようでなによりです。

      よろしくお願い致します。

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PROFILE

Jimon Profile
Jimon
東海地方の大学院生。おしゃれなグッズやiPhone,Macの情報など、人に教えたくなる「これは!」というモノを発信していきます。
お問い合わせ

About


おしゃれな小物とiPhone,Macの情報発信ブログ。
管理人『Jimon』(@jimon_s)がこれは!と思ったアイディア、ニュース、活用術を発信していきます

PAGE TOP ↑