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

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

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

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

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

上では「head-image」に対してそれぞれのurlに対して画像が挿入され切り替えるようになっており、
それ以外のページでは、else ifで「display=”none”」を当てて表示されないようになっています。

また、背景色なども指定できるので、ページごとの装飾も可能です。