いろいろ試して、本当に色々いっぱい試して、やっとできたのがこの方法でした。
この2つ目の方法「CSSクラス切り替え」をmy鉄板としたいと思います。
まず、JavaScript。
WordPressでは、もうほぼほぼfunctionで呼び出してるので、ファイルにしておきます。
「よく使うJS」フォルダにも入れとけ。
$(function(){
var maxNum = 10, // 最大枚数
rdm = Math.floor(Math.random()*(maxNum))+1;
$('#full_bg').addClass('setView' + rdm);
});
最大枚数の数字を画像ファイルの数に合わせなきゃいけないのが、ややネックですかね。
つぎに、CSSで画像を列挙します。
今回は「真ん中を基準にフルスクリーンで」「白文字をのせるから画像を暗くして」の延長で「ヒーロー画像ひとつにしぼれないからランダム表示して」だったのでこんな感じになってますが。
基本は、IDには幅と高さとかその程度で良いようです。
#full_bg {
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
min-height: 100vh; /*スマホなどではみ出てしまう場合の対策*/
background-position: center;
background-size: cover;
}
.setView1 {background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), url(images/topimg_01.jpg);}
.setView2 {background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), url(images/topimg_02.jpg);}
.setView3 {background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), url(images/topimg_03.jpg);}
.setView4 {background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), url(images/topimg_04.jpg);}
.setView5 {background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), url(images/topimg_05.jpg);}
.setView6 {background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), url(images/topimg_06.jpg);}
.setView7 {background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), url(images/topimg_07.jpg);}
.setView8 {background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), url(images/topimg_08.jpg);}
.setView9 {background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), url(images/topimg_09.jpg);}
.setView10 {background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), url(images/topimg_10.jpg);}
しかし、この複雑怪異なソースを残すのには理由があります。
今回ならではの教訓があったのです。
画像を暗くするためのグラデーションは、あくまで画像と一緒でなければなりません。
＃のほうに記述したくなりますが、分けてしまうと画面がグラデーションになるだけで画像が出ないのです。
あと、画像が10個以上になっても「setView01」にしてはいけません。
桁を揃えたくなりますが、ゼロが入るとの画像のとき画面は真っ白になってしまうのです。
そんな、ちょっとしたコツは必要ですが、やっとできた～
試作段階で、画像の選定に迷って「とりあえず全部やって見せてよ」なんてクライアントには、良いかもしれないです。