【WordPress】サイト幅でスライドショー画像のアスペクト比を切り替える（slick.js）

トップのバナー部分のスライドショーを作っているのですが、サイトの横幅でアスペクト比と画像を変える処理が必要で、せっかくなので記事にします。「slick.js」を利用しますが「slick.js」の利用の仕方は割愛します。

アスペクト比はどのような感じがベターか？

一般的にPCでの閲覧は横長、SPでは縦長になるので、PC用とSP用で別の画像を用意する。
フルHDで閲覧した時に、少しだけ下のコンテンツが見えるような状態にしたい🤔
スライドショーにはslick.jsを利用します。

992px以上は3:1で表示

上の写真は、フルHDサイズ（1920px × 1080px）のモニタで閲覧された事を想定してレイアウトしてみた🙂
ヘッダーおよびスライドショー部分は左右いっぱいに伸びる想定で、下部コンテンツ部分は左右最大は1280pxを想定。黄金比とか意味のあるアスペクト比にしたかったけど、適当なのがないので3対1にした。ヘッダーの天地サイズにもよるけどたぶんこのくらいの比率がPCでスライドショーを見せるんだったらちょうどいいのかも。

992pxから480pxの時は2.35:1で表示

横幅が992pxから480pxの時はシネマスコープのアスペクト比（2.35:1）にする事にしました。

480px以下の時は4:3で表示

480px以下の時は完全にスマホ、もしくはタブレットを意識しているので、ヘッダーの天地の高さを変え、スライドショー部分はアナログテレビのアスペクト比（4:3）で表示。こちらはレイアウトを変更したSP用の画像を利用します。

カスタム投稿「slider」を用意

「Custom Post Type UI」プラグインを利用し、カスタム投稿「slider」を追加します。「複数形のラベル」、「単数形のラベル」は「スライダー」にしました。

バナーを制作

PC用（横1920px、縦640px）

まずはPC用。3:1の画像を用意します。最大サイズはフルHDを最大で考えているので、横1920px、縦640pxでドキュメントを制作します。

この画像は992pxから480pxでも利用するので、ついでに2.35:1の画像場合も想定しておきます。内側の水色のガイド部分が2.35:1（横1504px、縦640px）です。このPC用画像でアスペクト比3:1の時と2.35:1の時の両方を想定して要素がはみ出さないようにレイアウトします。

JSでアスペクト比を自動計算する仕組みを制作されている方がおりました。これは便利😲

4:3、16:9などのサイズ一覧

問題がなければ「ファイル」>「書き出し」>「Web用に書き出し」で横1920px、縦640pxの画像を書き出しします（その後TinyPing等で軽量化してくださいね😉）

SP用（横800px、縦600px）

続いてSP用の4:3の画像を作ります。スマホ用のスライドショーなので縦組みの画像を制作しました。横幅480px以下でブレイクポイントで画像を切替えるので、4:3画像を用意します。レティーナディスプレイを想定して、横800px、縦600pxの画像を作成します。

カスタムフィールドを追加

PC用の画像はアイキャッチ画像を利用するとして、SP用のフォームを追加で用意します。フィールド名を「slider-sp」とし、返り値は画像URLにします。

画像をアップロード

カスタムフィールドを追加したので画像をアップします。アイキャッチにPC用、先程作ったカスタムフィールド「slider-sp」にSP用の画像をアップロードします。

スライドショー部分

header.phpに下記ソースを追加します。

カスタム投稿「slider」を読み込み、アイキャッチにはpcクラスを利用し、同列にimgタグでカスタムフィールド「slider-sp」にspクラスを利用します。

<?php if ( is_home() || is_front_page() ) { ?>
<ul class="slider">
<?php $args = array(
	'post_type' => 'slider',
	'posts_per_page' => -1
);
$the_query = new WP_query($args);
if ($the_query->have_posts()):?>
<?php while($the_query->have_posts()): $the_query->the_post(); ?>
<?php if((has_post_thumbnail())&&(get_field('slider-sp'))){ ?>
	<li>
		<?php the_post_thumbnail('full', ['class' => 'pc'] ); ?>
		<img src="<?php the_field('slider-sp'); ?>" class="sp">
	</li>
<?php } ?>
<?php endwhile; ?>
<?php wp_reset_postdata(); endif; ?>
</ul>
<?php } ?>

本当はpictureタグとsourceタグを利用しようと思ったのですが、sourceタグでアスペクト比をCSSの指定で利用がうまくいかず、imgタグをdisplay:noneで出し入れします。

「if (is_home() || is_front_page())」でトップページだけスライドショーを表示します。「if((has_post_thumbnail())&&(get_field(‘slider-sp’)))」でアイキャッチ画像とカスタムフィールド「slider-sp」に画像が指定されている時だけliタグが書き出されるようにします。

CSS制作

以下がCSS（SCSS）です。slick.js利用です。一緒に読み込み時の表示対策等入っていますが気にしないでください。

SCSS

.slider {
	position: relative;
	width: 100%;
	opacity: 0;
	transition: opacity .3s linear;
	&.slick-initialized {
		opacity: 1;
	}
	li {
		aspect-ratio: 3/1;
		position: relative;
		img{
			width: 100%;
			height: auto;
		}
		.pc {
			position: absolute;
			aspect-ratio: 3/1;
			object-fit: cover;
		}
		.sp{
			display:none;
		}
		@media screen and (max-width: 992px) {
			aspect-ratio: 2.35/1;
			.pc {
				aspect-ratio: 2.35/1;
			}
		}
		@media screen and (max-width: 480px) {
			aspect-ratio: 4/3;
			.pc{
				display:none;
			}
			.sp {
				display: block;
				position: absolute;
				aspect-ratio: 4/3;
				object-fit: cover;
			}
		}
	}
}

CSSのプロパティ「aspect-ratio」を利用して横幅922px以上は3:1、922pxから480pxは2.35:1、480px以下はpcクラスをdisplay:noneしてspクラスで4:3表示にしました。

まとめ

作ったあとに気がついたんですが。。。。😅
そもそも画像レベルでアスペクト比を固定しているからCSSでプロパティ「aspect-ratio」を利用する意味があまりないじゃん😂
まぁ3:1と2.35:1は一つの画像を「aspect-ratio」切替で利用しているからいいか🥴

sourceタグに直接width属性とheight属性いれればみたいだからその方がいいかな。。。。🙄

source要素にwidth/height属性を指定して各画像のアスペクト比の維持とCLSの改善を図る