【Stinger7】サムネイルの画像の大きさを変更する方法

このサイトはStinger7というテーマで作っていますが、デフォルトだとサムネイルの画像が小さかったので、少し大きくしています。

今回はそのサムネイル画像の大きさを変更する方法を書きます。

Top pic via:Tin Hoang

Sponsored Links

【Stinger7】サムネイル画像の大きさを変更する方法（レスポンシブに端末毎に合わせられるようにします）

編集するphpファイルは下記となります。

・style.css

・itiran-thumbnail-on.php

まずは 「style.css」に、サムネイル用のクラスを新たに作成します。

style.cssに下記のコードを追加します。

/*サムネイルサイズ変更*/
/*PC*/
@media only screen and (min-width: 500px) {
.itiran-custom dt {
	width: 320px;
}

.itiran-custom dt img {
	width: 320px;
}

.itiran-custom dd {
	padding-left: 330px;
}
}


/*iPhone 6s Plus*/
@media only screen and (max-width: 500px) {
.itiran-custom dt {
	width: 200px;
}

.itiran-custom dt img {
	width: 200px;
}

.itiran-custom dd {
	padding-left: 210px;
}
}

/*iPhone6*/
@media only screen and (max-width: 380px) {
.itiran-custom dt {
	width: 180px;
}

.itiran-custom dt img {
	width: 180px;
}

.itiran-custom dd {
	padding-left: 190px;
}
}

/*iPhone5*/
@media only screen and (max-width: 320px) {
.itiran-custom dt {
	width: 140px;
}

.itiran-custom dt img {
	width: 140px;
}

.itiran-custom dd {
	padding-left: 150px;
}
}

上記では「itiran-custom」というクラス名で作成しました。端末毎にサイズ変更となるように指定しています。

次に「itiran-thumbnail-on.php」でサムネイルについてのクラス指定している箇所がありますので、

そこのクラスを上記で作成したクラスに差し替えます。

「差し替えコード」 

<div class="kanren <?php st_marugazou_class(); //サムネイルを丸くする ?>">
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<dl class="clearfix itiran-custom" >

上記3行目の「dlタグ」の「class="clearfix itiran-custom"」が変更した部分となります。（それ以下のコードについては割愛してます） 

これでサムネイルの画像の大きさ変更は完了です。

端末毎に指定しないと、iPhone SEでは大きすぎ、PCでは小さすぎ。。とかになってしまうので、やはりレスポンシブな設定にした方が得策ですね。

ぜひ参考になれば幸いです。 

Sponsored Links