ロイヤルノート|ろくでもない知識をきみに。

ろくでもない知識をとにかくかき集めて、どこかの誰かのためにウェブの海へ放り投げているブログ

背景の画像をランダムで入れ替える《HTMLカスタマイズ》

f:id:vintraw:20170502014952j:plain

 

またいつもの「カスタムしたい病」が発症してカスタマイズしちゃったその記録がてら、背景画像をランダムで入れ替える方法をシェアしますね。
ページを見るたびに画像が入れ替わるっていうやつです。

「なんでそうなるの?」とか難しいコトは聞かないでください。
わかりません!
私、プログラムが専門じゃなかったのでわかりません!
なんとなくでそうなるっていう感覚でしか理解してません。

それにみんなだって、どうしてそうなるのかっていう難しい理論より、とにかく実現ができるシンプルな解説であればそっちのほうがいいよね。ねっ。

というわけで、JavascriptとCSSでやります。
超かみくだきますよ。

基本のおさらい・背景画像を指定するCSS

まずはこれがわかってないと、Javascriptのほうを解説してもチンプンカンプンになっちゃう。背景画像を指定するCSSの基本形をおさらいしましょう。

登場するidを仮に「KOKODAIJI」ってしときました。ここ大事だからね!
実際のあなたのWEBサイトでは別のidです、指定したい場所のidを確認しておきましょう。

-----こっちがHTMLの中-----
<div id="KOKODAIJI">
 ディブの中にはなんやかんや、HTMLの中身があって…(略)
</div>
↑このidの値を狙い撃ちして、これからCSS側で背景画像指定をするよ

-----こっちがCSSの中-----
#KOKODAIJI {
 background-image : url(ここに画像のアドレス) ; 
}
↑さっきの「KOKODAIJI」の値を入れる。指定したい箇所がidなら「#」classなら「.」を先頭にくっつけると指定できる

これが背景(background-image)に画像(url.....)を指定する基本形。
idは、ブログのヘッダーなら「#blog-title」とかそんな感じだと思います。

画像はみなさんはてなフォトライフにアップして使っていると思うんですが、アドレスがやたら長いですよね。

http://cdn-ak.f.st-hatena.com/images/fotolife/x/あなたのはてなid/20170427←画像アップした日/xxxxxxxxxxxxxxxxx.jpg  

たぶんこんな感じですよね(;'∀') ←みんな一緒だと信じたい
はい、ここまでがまずCSSで背景画像を1枚指定する基本形です。

<head>内にJavascriptを書いていく

ここまでで「わーい、背景に画像が指定できた!」とうまくいった人だけがこの先を読み進めていってください。
もしつまづいてしまった場合は、この先を読むと余計混乱してしまうと思うので…><

さてHead内に何かを書き足したい時はどこに書くんでしたでしょーかっ?

設定 ⇒ 詳細設定 ⇒ 検索エンジン最適化 ⇒ headに要素を追加 

そうですね、ここに書き込めばちゃんと読んでくれます。
さぁ次のパートがJavascript部分です。コピペの準備はいいですか!
色付きのところをご自分のidやら画像URLやらに書き換えるのですよ。
背景画像は何枚でも指定できますが、ここでは仮に4枚にしてます。

<script type="text/javascript">
   window.onload = function(){
        //var url = "a.jpg".split(',');
        var url=[];
        url[0] = '20170427/xxxxxxxxxx.jpg';
        url[1] = '20170426/yyyyyyyyyy.jpg';
        url[2] = '20170301/zzzzzzzzzz.jpg';
        url[3] = '20170405/vvvvvvvvvv.jpg';
        var n = Math.floor(Math.random() * url.length);
        var elm = document.getElementById('KOKODAIJI');
        elm.style.backgroundImage = 'url(http://cdn-ak.f.st-hatena.com/images/fotolife/x/あなたのはてなid/' + url[n] + ')';
    }
</script>

3箇所。
日付以降の画像URLと、画像を入れ替えたい場所のidと、日付より手前の全画像に共通するURL部分を書き込みましょう。
画像URLがわざわざ2つに分かれてるのがポイントですよ。後ろの部分だけをランダムで入れ替えます!

写真はアップした日付ごとのURLになるみたいなので、上記の通り日付より手前までを「共通」としておくのが一番URL指定ミスがないんじゃないかなと思います。

差し替えたい画像を増やしたい時は「url[4]・url[5]」と項目を増やせばOKです。

注意点

このJavascriptを実装する場合、最初に説明のために記載しました「CSSのほうでのbackground-imageの指定」は書かないでください!
CSSのほうにも背景画像の指定が書かれていると、最終的にソコが読まれて、ランダムスクリプトが無視されて1枚の画像が固定で表示されちゃいます。
あと、画像の大きさ次第ではちょっとページ読み込みが重くなるのでご注意くださいね!