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

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

:2014/6/22 STINGER Wordpress

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

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

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

スポンサーリンク

記事内リード文下_PC


基本の作業

まずは拡大・縮小共通の作業から。
変更するのは「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だとこのようになります。

50*50pxの場合

ここからポイント!

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

問題の場所

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

.entryの中身

サムネイル画像は.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を設定する前とあとを比較するとこのようになります。

css設定前後

あとがき

僕がサイトを作る際つまづいたポイントだったので、記事にしました。
お役に立てば幸いです。

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

jimon


記事下_W左_PC

記事下_W右_PC

-STINGER, Wordpress
-,

サイドバー上_PC

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