Royal Naught

和装読書男子の超雑記「ロイヤルノート」です

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

f:id:vintraw:20170502014952j:plain

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

「なんでそうなるの?」とか難しいコトは聞かないでください。

わかりません!

私、プログラムが専門じゃなかったのでわかりません。
「なんとなくそうなる」という感覚でしか理解しておりません。

というわけで、JavascriptとCSSで実現します
超かみくだきますよ。

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

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

登場するid名を仮に●にしています。
実際のあなたのWEBサイトでは別のidです、指定したい場所のidを確認しておきましょう。

HTML側の設定

<div id="●">
 ディブの中にはなんやかんや、HTMLの中身があって…(略)
</div>

まずidを指定してください。

このidの値を狙い撃ちして、これからCSS側で背景画像指定をします。

CSS側の設定

#● {
 background-image : url(ここに画像のアドレス) ;
 }

さっきのid「●」への指定を入れます。

指定したい箇所がidなら「#」、classなら「.」を先頭にくっつけます。

ここまでが背景『background-image』に画像『url.....』を指定する基本形。

CSSで背景画像を1枚指定する基本形となります。

雑談:はてなブログの中の話(うちがはてなブログサーバーですので)
はてなブログの皆さん、画像は「はてなフォトライフ」にアップして使っていると思うんですが、アドレスがやたら長いですよね。
http://cdn-ak.f.st-hatena.com/images/fotolife/x/あなたのはてなid/20170427←画像アップした日/xxxxxxxxxxxxxxxxx.jpg
皆さん、たぶんこんな感じですよね(;'∀')
自分だけなのだろうかと時々不安になります。

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

CSSでの背景指定のカラクリを理解なさっているかたは、この先を読み進めていただいて問題ありません。

もしつまづいてしまった場合は、この先を読むと余計混乱してしまうと思います…。

<head>の中に以下のJavascriptを書いてください。

はてなブログでは────

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

の場所に書きます。

Javascript(たぶんコピペ推奨?)

ランダムで登場させたい背景画像は何枚でも指定できます。

ここでは仮に4枚にしています。

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

3箇所書き換えてください。

1.http://cdn-ak.f.st-hatena.com/images/fotolife/x/あなたのはてなid/

まず、ここは入れ替える画像たちの共通しているURL部分を書きます。

このURLの続き(後ろ)だけをコロコロと入れ替え、画像を切り替える手法となります。

2.document.getElementById('●');

ここの●に、背景画像を指定しているID名を入れてください。

3.20170427/画像名1.jpg

画像URLの共通部分以降の、名称を入れてください。

筆者のコードサンプルでいうと、結果として1と3がつながり────

http://cdn-ak.f.st-hatena.com/images/fotolife/x/あなたのはてなid/20170427/画像名1.jpg

という画像が、2のID指定した場所に読まれるということになります。

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

注意点

このJavascriptを実装する場合、最初に説明のために記載した「CSSのほうのbackground-imageの指定」は書かないでください。

CSSのほうにも背景画像の指定が書かれていると、最終的にそっちが読まれて、ランダムスクリプトが無視され、CSS指定により1枚の画像が固定で表示されてしまいました。