Lognote

ネット集客に強い整体院サイトを制作

device-thumbnail-size-thumbnail

STINGER8の一覧サムネイルサイズをデバイス毎に変更する方法

公開日:2017-07-13
最終更新日:

STINGER8の記事一覧のサムネイルサイズは、デフォルトだと150pxの画像を100px四方の正方形に縮小して表示しています。

スマホでの閲覧のことを考えれば、この仕様のほうがスマートで一見よさそうですが、画像の中心以外が大きく削られてしまうのはちょっと残念です。

このブログでもそうですが、STINGER8を使われている方の中には編集でサムネイルに文字を入れている方も多いはずです。

分かりやすくするためにせっかく入れた文字も変な部分で欠けてしまったら、意味がなくなってしまいますし何となくダサいですよね。

ヤマカワ
別に気にならないという方もいるかもしれませんが、几帳面な性格の私にとってはムズムズが止まりません

WordPressは、functions.phpにサムネイルサイズを指定する記述をすることで、好きなサイズにサムネイルを変更することができます。

この機能を利用して、スマホではデフォルトの100px四方の正方形に、PCでは元々のアスペクト比のまま縮小して表示できたらよくないですか?

そこで今回は、WordPressの分岐機能を使って、デバイスごとにサムネイルの表示分けをするカスタマイズをしてみましょう。

最終完成イメージ

カスタマイズ完成イメージです。

◆PC表示
device-thumbnail-size-03
◆スマホ表示
device-thumbnail-size-04

カスタマイズの手順

  • functions.phpにPC用サムネイルの生成コードを追加する
  • サムネイル再生成プラグイン「Regenerate Thumbnails」をインストールする
  • itiran.phpにサムネイル表示の分岐を記述する
  • CSSでデザインを整える
  • (おまけ)スマホ閲覧時の概要を非表示にする

1)functions.phpにPC用サムネイルのサイズ指定を追加する

スマホ用のサムネイルは、STINGER8の親テーマのfunctions.phpに生成コードが記述されています。

ここでは、新しくPC用サムネイルの生成コードを追加しましょう。

以下のコードを子テーマのfunctions.phpに追加してください。

//サムネ生成
add_image_size('thumb300',300,200,true);

これで、これから新しくアップする画像のサムネイルは、150pxと300px両方で生成されるようになります。

このブログでアップしているサムネイルの元々のサイズは640×427です。
300×200にするとほんのちょっとだけ上下が切れてしまうのですが、427pxが2で割り切れないため、切りよく200pxとしています。

2)サムネイル再生成プラグイン「Regenerate Thumbnails」をインストールする

注意として、今後は2つのサイズでサムネイルが生成されますが、すでにアップされている画像には300pxのサムネイルが存在しません。

そこで、「Regenerate Thumbnails」というプラグインを使用します。

device-thumbnail-size-05

【WordPress Plugin】Regenerate Thumbnails
「Regenerate Thumbnails」は全ての画像のサムネイルを再生成してくれるプラグインです。今回のようにサムネイルの画像サイズを変更するようなカスタマイズをした場合はとても重宝します。
Regenerate Thumbnails — WordPress プラグイン

device-thumbnail-size-06

インストール後、[ツール] ⇒ [Regen, Thumbnails]から「すべてのサムネイルを再生成する」をクリックします。

画像が多いほど、パーセントバーが100%になるまで少し時間がかかります。

3)itiran.phpにサムネイル表示の分岐を記述する

itiran.phpのコードを、サムネイルが分岐する記述に変更します。

事前に子テーマにitiran.phpをコピーしてから編集してください。

以下のコードを探し、

<dl class="clearfix">
    <dt><a href="<?php the_permalink(); ?>">
	<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
		<?php the_post_thumbnail( '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; ?>
    </a></dt>

このように変更します。

<dl class="clearfix kanren-custom">
    <dt><a href="<?php the_permalink(); ?>">
        <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
            <?php if ( wp_is_mobile() ) : ?>
                <?php the_post_thumbnail( 'st_thumb150' ); ?>
            <?php else: ?>
                <?php the_post_thumbnail( 'thumb300', array('style' => 'width:300px;height:200px;') ); ?>
            <?php endif; ?>
        <?php else: // サムネイルを持っていないときの処理 ?>
            <?php if ( wp_is_mobile() ) : ?>
                <img src="サムネイルを指定しないときのスマホ用の画像URL" alt="No Image" title="No Image" width="150" height="150" />
            <?php else: ?>
                <img src="サムネイルを指定しないときのPC用の画像URL" alt="No Image" title="No Image" width="300" height="200" />
            <?php endif; ?>
        <?php endif; ?>
    </a></dt>

4)CSSでデザインを整える

コメント欄のデザインを整えます。

以下のCSSを子テーマに追加してください。

.kanren {
	margin: 0 !important;
	padding: 0 !important;
}
.kanren dl {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #d2d7e6 !important;
	overflow: hidden;
	text-align: left;
}
.kanren dt {
	padding: 10px;
	display: inline;
	float: left;
}
.kanren dt a img {
	position: relative;
}
.kanren .kanren-t a {
	text-decoration : none;
	line-height: 1.5;
	letter-spacing: .1em;
}
.kanren-descr p {
	font-size: 13px !important;
	line-height: 1.5 !important;
	letter-spacing: .1em !important;
}
.kanren dd {
	padding: 10px;
	padding-left: 115px;
}
.kanren dl { position : relative }
.kanren dl:first-child { padding-top: 0; !important}
.kanren dl:last-child { padding-bottom: 0; border-bottom: none !important}

/*media Queries PCサイズ(960px以上)
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {
	
	.kanren-custom dt {
		width: 300px;
		margin-right: 30px;
	}
	.kanren-custom dt img {
		width: 300px;
	}
	.kanren-custom dd {
		padding-left: 20px;
	}
	.kanren-custom dd h3 {
		margin: 10px 0;
	}
	.kanren-custom dd h3 a {
		color: #333;
		text-decoration: none;
		font-size: 22px;
		line-height: 1.5;
	}

}

5)(おまけ)スマホ閲覧時の概要を非表示にする

ここまでで、デバイスごとのサムネイルの表示分けはできました。

ここからはおまけです。

スマホ表示をしたとき以下のようなデザインとなっていますが、概要欄が縦にはみ出してしまっていて格好悪いですね。

device-thumbnail-size-08

これを、スマホ表示のときだけ非表示にしてみましょう。

itiran.phpから以下のコードを探し、

<div class="smanone2">
	<?php the_excerpt(); //抜粋文 ?>
</div>

このように変更します。

<?php if ( wp_is_mobile() ) : ?>
<?php else: ?>
<?php the_excerpt(); //抜粋文 ?>
<?php endif; ?>

完成イメージです。

device-thumbnail-size-07

縦がはみ出さなくなり、とてもスマートになりました。

以上、「STINGER8の一覧サムネイルサイズをデバイス毎に変更する方法」という記事をお届けしました。

-STINGER
-

この記事のタイトルとURLをコピーする

オススメ商品はこちら!

STINGER8の一覧サムネイルサイズをデバイス毎に変更する方法
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

stinger8-footer-3column-customize-thumbnail

STINGER8のフッターに3カラムウィジェットを設置するカスタマイズ方法

STINGER8のフッターに3カラムウィジェットを設置する方法を紹介します。 STINGER7をご利用の方はこ …

footer-3column-customize-thumbnail

ちょっと寂しいSTINGER7のフッターをカッコよくカスタマイズしてコンテンツを増やそう!

STINGER7のフッターをもう少し華やかにしたい!そう思ったことはないでしょうか?この記事では、フッタ...

sns-follow-button-thumbnail

STINGER8の記事下にサムネ付きでフォロー誘導ボックスを設置する方法

STINGER8の記事下にいいねボタンやフォロワー誘導ボックスをサムネ付きで設置する方法を紹介します。

stinger8-pager-css-customize-thumbnail

STINGER8のページネーションを少しおしゃれにするCSSデザイン例

WordPressの記事が増えてくると、ページネーションのデザインも気になってきます。STINGER8のページネー...

stinger8-404-and-search-customize-thumbnail

STINGER8の404エラーページをカスタマイズしてクローラー巡回促進対策してみた

意外とカスタマイズで見落としがちな検索結果ページと404エラーページ。 この二つのページはあまり人の目に触れる …

コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい