ヘッダー背景画像をランダム表示
「ヘッダーの背景画像をランダム表示にしたい」
よくあるご相談のひとつです。
毎回個別にお答えするのもアレですので、記事にしておきますね。
注意点
- あくまでも「ランダム」ですので、連続して同じ画像が選出されることもあります。
- アクセス時に表示される背景をランダム選出する、というカスタマイズであり、スライダーのように画像を切替えるためのものではありません。
- どのテンプレートでも必ず機能するという保証はありません
- 各ページ種によってヘッダーの形状が変わるタイプのテンプレートでは非推奨(htmlが複雑なので難しいと思います)
手順説明
必要な作業
- 該当部位のid名をメモ
- 該当部位に対して既に行われているbackgroundに係るCSS内容の削除
まずは表示させる部位を見つけなければいけません。
私のテンプレートでは毎回
ヘッダー画像
あるいはそれに準ずるコメントをつけていますので、Ctrl+F(Windows)/ Command+F(Mac)キーを利用して探します。
そして 必ずid名が必要です。
仮にidが無くclass名しか付いていない場合には id名を追加してください。
私は基本的に背景に係るプロパティを一行でまとめています(ショートハンド)が、絶対ではありません。
まして他製作者様がどう書いているかまではわかりませんので、とにかく該当部位の背景関連の記述は削除します。
残しておいてもこれから行う作業でCSS側の指定は破棄されますが、ページが表示される際に一瞬元の指定画像が出てきてしまうことがありますので、なるべく削除してくことをおすすめします。
var randomimage = [];
randomimage[0] = '画像1アドレス';
randomimage[1] = '画像2アドレス';
randomimage[2] = '画像3アドレス';
var n = Math.floor(Math.random()*randomimage.length);
document.getElementById('ここにid名').style.background='url("'+randomimage[n]+'") center center /cover no-repeat';
</script>上記のJS内容をhtmlソースの </body> の直前に記載します。
body終了タグですのでhtmlソースのかなり後方にあります。
雛形では3枚の画像を指定できますが、それ以上あるいはそれ以下にすることも可能です。
前後内容をよく見て規則に従って追加ないし削減してください。
緑の部位に画像アドレスを記載しますが、FC2ブログのSSL化を踏まえ、スキームは省略しておく方が良いと思います。
*スキーム省略 = http: を省略
赤の部位にはid名を入れます。#は付けません。
X
getElementById('#header-banner')
✔
getElementById('header-banner')
2つの center という記述がありますが、最初のcenterは 水平位置、2つ目は 垂直位置 の指定です。
画像内のオブジェクトがどこにあるのかによって指定を変更してください。
水平方向で利用可能な値は left, center, right の3つ。
垂直方向で利用可能な値は top, center, bottom の3つです。
オブジェクトが水平「右」垂直「上」にあるので right top
オブジェクトが水平「左」垂直「下」にあるので left bottom
この位置合わせは全画像共通になります。各画像毎の変更はできません。
アクセス時、画像に中途半端な動きがついている場合
縮むあるいは拡大する、上からあるいは下からニュっと出てくるような動きがある場合、ヘッダー該当部位のCSS内容に イージング が付いているかもしれません。
例)
#header-banner {
margin: 0 auto;
width: 100%;
text-align: center;
-webkit-transition: .8s ease;
transition: .8s ease;
}
transition というプロパティがイージングですので、その行を削除することで修正できるかと思います。
サンプル中ヘッダーのブログタイトルクリックでお試し頂けます。
- 関連記事
-
-
ページ内スクロールと開閉プラグインの衝突
2017/08/31
-
ヘッダー背景画像カスタマイズ時の考え方
2017/08/28
-
ヘッダー背景画像をランダム表示
【現在閲覧中】
2017/08/28
-
FC2ブログのトップページ【全文表示タイプ】の難点を語る
2017/08/19
-
カラム変更のカスタマイズに応じない理由
2017/08/19
-
