Stinger8サムネイル画像を大きくして、スマホのレイアウト調整してみた。 [WordPress]

Stinger8のサムネイル画像のサイズは、100×100pxと小さくアイキャッチとしてはちょっと弱いので少し大きくしてみました。
そのままだとスマホのレイアウトが崩れてしまうのでそちらも調整。

今回はいじるのは、style.css、itiran.php、kanren.php。
あと、Wordpressの管理画面からも設定が必要。
おまけでsidebar.php。

目次

1. サムネイルの画像を大きくする。
2. 「NO IMAGE」の設定。
3. スマホのレイアウト調整。
4. おまけ
5. まとめ

サムネイルの画像を大きくする。

今回サムネイル画像のサイズを大きくしたのは、トップページ、カテゴリー、タグ一覧表示と記事下の関連記事。
対象はメイン（st-aside）側のサムネイル画像です。右カラム（#side）のサムネイル画像はそのまま。

サムネイルサイズの大小の基準は「抜粋文」の有無。

スマホで見たときにサムネイル画像と抜粋文が横並びにあると改行が多くて読みずらい。

右カラムの新着はサムネイル画像と記事タイトルだけなので横並びにしてもおかしくはない。

それにPCの場合は、メインと右カラムでメリハリつけないとアイキャッチの意味がボケてしまうので、右カラム側はそのままにしています。

作業の考え方は、全体のサムネイルを大きくして、右カラムのサムネイルを小さくする。です。

サムネイルサイズは「width: 200px」のアスペクト比は「16:9」にしてみました。

style.cssに追加。

.kanren dt {
    float: left;
    width: 215px;
}

.kanren dt img {
    width: 200px;
    height: 113px;
    object-fit: cover;
}

.kanren dd {
    padding-left: 215px;
}

右カラムの設定はこちら。

#side .kanren dt {
	float: left;
	width: 100px;
}

#side .kanren dt img {
	width: 100px;
	height: 100px;
}

#side .kanren dd {
	padding-left: 115px;
}

サムネイル生成サイズを変更。

サムネイル生成サイズの変更を管理画面から行います。

設定　＞　メディア

サムネイルのサイズを150pxから300pxに変更。

サムネイルの設定はこれで終了。

「NO IMAGE」の設定。

「NO IMAGE」の作成。

上記「注意」同様、デフォルトの「NO IMAGE」画像のサイズは150×150pxしかないので、300×300pxで新たに作成し画像をアップロードします。

itiran.php、kanren.phpを修正。

「itiran.php」と「kanren.php」にある以下の部分を

<?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; ?>

先ほどアップした「NO IMAGE」画像のURLに書き換えます。

<?php else: // サムネイルを持っていないときの処理 ?>
	<img src="https://www.lovedigitalgoods.com/wp-content/uploads/2018/09/no-image_300.png" alt="no image" title="no image" width="300" height="300" />
<?php endif; ?>

「NO IMAGE」の設定はこれで終了。

スマホのレイアウト調整。

サムネイルの表示サイズが200×113pxなのに対して、サムネイル生成の設定を300pxにしたり、「NO IMAGE」のサイズを300×300pxで設定してきたかというと、スマホのレイアウトを縦にする場合、サムネイルの表示サイズを300×169pxにしたかったので、サムネイルサイズが300px必要だったわけです。

style.cssに追加。

スマホ設定の箇所に以下を追加。

.kanren dt {
    float: none;
    width: 300px;
	margin:0 auto 10px;
}

.kanren dt img {
    width: 300px;
    height: 169px;
    object-fit: cover;
}

.kanren dd {
    padding-left: 0;
}


#side .kanren dt {
	float: left;
	width: 100px;
}

#side .kanren dt img {
	width: 100px;
	height: 100px;
}

#side .kanren dd {
	padding-left: 115px;
}

おまけ

トップページ右カラムの新着はメインの一覧とかぶるので、トップページだけ右カラムから新着を外しました。

sidebar.phpに追記。

11行目あたりにあります。

		<?php get_template_part( 'newpost' ); //最近のエントリ ?>

これをこんな感じに。

<?php if ( !is_home() ) : ?>
		<?php get_template_part( 'newpost' ); //最近のエントリ ?>
<?php endif; ?>

まとめ

今回のカスタマイズは、PC版のサムネイルを大きくすることもあったんですけど、スマホ版でのレイアウト調整のほうが比重は大きかったかな。

スマホでの閲覧率は高いので、今後もスマホの閲覧のしやすさは意識していきたい。

それと今回サムネイルのサイズを300×300pxにしたことで、PCの一覧表示をスマホと同じように縦レイアウトにするのも容易にできるのではないかと。

それはまたの機会に。