Stinger3カスタマイズ！サムネイルが大きくできないときは.sumboxが原因かも

サムネイル、トップページで記事の横に出てくる画像ですね。
記事の顔になってくる部分なのでカスタマイズしている方も多いのではないでしょうか。

Stingerのサムネイルサイズはデフォルトでは150*150pxになっています。
このサイズ、小さくする場合には簡単なのですが大きくする場合には少し落とし穴があるんです。

今回はサムネイルサイズを150*150pxより大きくする際につまづきがちなポイントと対処法をご紹介します。

基本の作業

まずは拡大・縮小共通の作業から。
変更するのは「functions.php」と「home.php」です。

Step1　functions.phpの変更

まずfunctions.phpの7行目あたりをみるとこのような記述があると思います。

//アイキャッチサムネイル
add_theme_support('post-thumbnails');
add_image_size('thumb100',100,100,true);
add_image_size('thumb110',110,110,true);

ここに自分の設定したいサイズを追記しましょう。

//アイキャッチサムネイル
add_theme_support('post-thumbnails');
add_image_size('thumb100',100,100,true);
add_image_size('thumb110',110,110,true);
add_image_size('好きな名前',横幅,縦幅,切り抜きでよければtrue);

Step2　home.phpの変更

続いてhome.phpも変更していきます。
以下のコードを探してください。

<?php
$title= get_the_title();
the_post_thumbnail(array( 150,150 ),
array( 'alt' =>$title, 'title' => $title)); ?>

この中のarray(150,150)がサイズを表しています。
ここをさきほど設定した名前に変更してください。

<?php
$title= get_the_title();
the_post_thumbnail('さっき決めた名前',
array( 'alt' =>$title, 'title' => $title)); ?>

サムネイルを小さくしたい場合にはここまでで作業は完了です。
例えば50*50pxだとこのようになります。

ここからポイント！

ではいよいよ大きくするときのポイントです。
150*150px以上にする場合にはもう1つ作業が必要になります。

問題の場所

Stingerのサムネイル周りはこのような構造になっています。

サムネイル画像は.sumboxの中に入っているんですね。
で、問題になってくるのがcssのこのコード。

.entry .sumbox {
	float: left;
	height: 150px;
	width: 150px;
}

そうなんです、外枠の.sumboxが150*150pxに指定されているんです。
これでは大きくならないわけですね。
以下のように修正しましょう。

.entry .sumbox {
	float: left;
	height: さっき決めた縦幅;
	width: さっき決めた横幅;
}

見た目の調整のためにこちらも変更します。

.post .entry .entry-content {
	float: right;
	width: (380-sumboxを大きくした分)px;
	padding-left: 20px;
}

これで作業は完了です！
cssを設定する前とあとを比較するとこのようになります。

あとがき

@Jimon_sさんをフォロー