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

メインビジュアルに画像を設定してみましょう。
今回は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;
}
}
この記事を気に入ったら
いいね!&フォローしよう最新情報をお届けします