指定したページでメイン画像を切り替える

2018.07.18

トップページのメインビジュアルとは別に、それぞれの内部ページに対して、違うメイン画像を表示させたい場合があるかと思います。

wordpressなどでは、phpの条件分岐でページ単位にコンテンツを表示させたりできますが、

静的なhtmlやショッピングサイト構築のサービスなどの条件で、指定したページでメイン画像を切り替えたい場合、

urlで条件分岐させて、動的に画像を切り替えることが可能です。

<div class="head-image"><img src="http://www.○○.jp/img/main_img_01" alt="メイン画像"></div>

1	<div class="head-image"><img src="http://www.○○.jp/img/main_img_01" alt="メイン画像"></div>

<script>
$(window).bind("load", function(){

	// 現在ページのURL
	var url   = location.href;

	if(url == "http://www.○○.jp/page-01"){
                $('.head-image').css({'display':'block','background':'#070E14'});
		$('.head-image').children('img').attr('src', 'http://www.○○.jp/img/main_img_02');
	}
	else (url == "http://www.○○.jp/page-02"){
                $('.head-image').css({'display':'block','background':'#070E14'});
		$('.head-image').children('img').attr('src', 'http://www.○○.jp/img/main_img_03');
	}
	else (url == "http://www.○○.jp/page-03"){
                $('.head-image').css({'display':'block','background':'#EC8A99'});
		$('.head-image').children('img').attr('src', 'http://www.○○.jp/img/main_img_04');
	}
        else if{
                $('.head-image').css('display','none');
        }
});
</script>