メインビジュアルに画像を表示する

2018.05.22 カスタマイズ

メインビジュアルに画像を設定してみましょう。

今回はPC・タブレット・スマホそれぞれに合わせて3つの画像を用意し、メディアクエリで画像が切り替わるようにします。

「メインビジュアル」に記述

「メインビジュアル」に「カスタムHTML」ウィジェットを設置し、以下のソースコードを貼り付けます(画像のパスは各自で変更してください)。

<div id="mv_pc"><img src="PC用メインビジュアル画像のパス" alt=""></div>
<div id="mv_tab"><img src="タブレット用メインビジュアル画像のパス" alt=""></div>
<div id="mv_sp"><img src="スマホ用メインビジュアル画像のパス" alt=""></div>

子テーマのstyle.cssに記述

子テーマのstyle.cssに以下のソースコードを貼り付けます。

displayプロパティを使ってPC・タブレット・スマホで画像の表示・非表示を切り替えています。

@media (min-width: 769px) {

	/* PC用メインビジュアル */
	#mv_pc {
		display: block;
	}

	/* タブレット用メインビジュアル */
	#mv_tab {
		display: none;
	}

	/* スマホ用メインビジュアル */
	#mv_sp {
		display: none;
	}

}

@media (min-width: 481px) and (max-width: 768px) {

	/* PC用メインビジュアル */
	#mv_pc {
		display: none;
	}

	/* タブレット用メインビジュアル */
	#mv_tab {
		display: block;
	}

	/* スマホ用メインビジュアル */
	#mv_sp {
		display: none;
	}

}

@media (max-width: 480px) {

	/* PC用メインビジュアル */
	#mv_pc {
		display: none;
	}

	/* タブレット用メインビジュアル */
	#mv_tab {
		display: none;
	}

	/* スマホ用メインビジュアル */
	#mv_sp {
		display: block;
	}

}