またいつもの「カスタムしたい病」が発症して、カスタマイズしちゃったその記録がてら、背景画像をランダムで入れ替える方法をシェアします。
ページを見るたびに画像が入れ替わるっていうやつです。
「なんでそうなるの?」とか難しいコトは聞かないでください。
わかりません!
私、プログラムが専門じゃなかったのでわかりません。
「なんとなくそうなる」という感覚でしか理解しておりません。
というわけで、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枚の画像が固定で表示されてしまいました。