ヘッダー背景画像をランダム表示

カスタマイズ

2017/08/28 2020/03/03 12

vanillaice (Akira)

Instruction VanillaJS 初心者向け

「ヘッダーの背景画像をランダム表示にしたい」

よくあるご相談のひとつです。
毎回個別にお答えするのもアレですので、記事にしておきますね。

注意点

あくまでも「ランダム」ですので、連続して同じ画像が選出されることもあります。
アクセス時に表示される背景をランダム選出する、というカスタマイズであり、スライダーのように画像を切替えるためのものではありません。
どのテンプレートでも必ず機能するという保証はありません
各ページ種によってヘッダーの形状が変わるタイプのテンプレートでは非推奨(htmlが複雑なので難しいと思います)

手順説明

必要な作業

該当部位のid名をメモ
該当部位に対して既に行われているbackgroundに係るCSS内容の削除

まずは表示させる部位を見つけなければいけません。
私のテンプレートでは毎回

ヘッダー画像

あるいはそれに準ずるコメントをつけていますので、Ctrl+F(Windows)/ Command+F(Mac)キーを利用して探します。
そして必ずid名が必要です。
仮にidが無くclass名しか付いていない場合には id名を追加してください。

私は基本的に背景に係るプロパティを一行でまとめています(ショートハンド)が、絶対ではありません。
まして他製作者様がどう書いているかまではわかりませんので、とにかく該当部位の背景関連の記述は削除します。
残しておいてもこれから行う作業でCSS側の指定は破棄されますが、ページが表示される際に一瞬元の指定画像が出てきてしまうことがありますので、なるべく削除してくことをおすすめします。

<script>
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名を入れます。#は付けません。

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 というプロパティがイージングですので、その行を削除することで修正できるかと思います。

Sample

サンプル中ヘッダーのブログタイトルクリックでお試し頂けます。

Instruction VanillaJS 初心者向け

12 コメントをどうぞ

There are no comments yet.

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

To Out-of-styleの件内緒さん

こんばんは。
以前にもコメント頂いているはずなので申し訳ないのですが、ブログアドレスをください（￣∀￣；）
確認に参りますのでよろしくお願いします。

で、Out-of-styleですが、画像の変な動きというのは具体的にどういったものでしょうか。
画像には特にエフェクトは設けておらず、ページ全体のフェイドインエフェクトのみのはずなので、「画像が」というのがちょっとよくわかりません。
この記事を参照してヘッダーに画像を敷いたということでしょうか。
確認にはお邪魔しますが、環境が違う場合全く同じ見え方ではない場合があります。
ブログアドレスを頂く際に

・パソコンのOS名 (windows10, macOS Sierra など)
・ブラウザ名とIEの場合はバージョン名

をお伝えください。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Akira

To Out-of-styleの件内緒さん②

こちらの記事内容とは関係ないようですので移動をお願いします。
お手数おかけします。

http://vanillaice000.blog.fc2.com/blog-entry-555.html

ロビンソン

お世話になります。
先日ブログカードのblockquoteの件でお尋ねした際に、header-banner用スクリプトとheader-banner2用スクリプトをエリア変数で分けるようにアドバイスをいただき実行しました。

今気づいたんですがiPhoneからの閲覧で、汎用ページでheader-bannerが表示されなくなっています。
もしかしたら、スタイルシートの記入ミスかiOSのバグでしょうか？
使用デバイスはiPhone X iOSは11.3です。

お忙しいところ何度も恐れ入りますが、修正点があればご教示いただければと思いお尋ねします。

Akira

To ロビンソンさん

大変失礼しました。
ロビンソンさんはテンプレートをClassicaに変更されてたんですね。
私の勘違いです。ごめんなさい。

となると結構面倒なことになりますね (´・ω・｀)
「header-bannerとheader-banner2の画像を分ける」という点は譲れないと仮定するとhtml内容がちょっとアレでソレになります(が対象エリア以外では読み込まれませんので表示負荷等は無関係です)
単純にメインhtmlファイルが見辛くなるという意味です。

やり方はいくつかあるんですが、複雑にならない方にしておきますね。
その代わり同じ内容がいくつも記載されることになります。
ただ修正などは繰り返しが発生するとはいえもう一方の書き方よりは随分容易だと思います。たぶん。


1の内容


2の内容


2の内容


2の内容


2の内容


2の内容


2の内容


2の内容


こうするしかないですね (´・ω・｀)
こうなってしまうので当記事の最初の注意事項にある通り
各ページ種によってヘッダーの形状が変わるタイプのテンプレートでは非推奨(htmlが複雑なので難しいと思います
になるわけです。

一つにまとめる場合は繰り返しは発生しませんがコード内にエリア変数が複雑に入り込みますので… うーん、やっぱこっちのほうがマシではないかと。

それとテンプレート専用記事以外の場合にはテンプレート名を書いてもらった方が良いかもしんない。
私の利便で言ってるだけなので申し訳ないのですが ^^;
特に大きくカスタマイズされている場合私の作品でもどれかわかんない時とかある(笑)
もちろん強制ではないですが、私のミスや勘違いを防いで頂いた方が解決が早いもので。
自分のダメさを他の方に肩代わりさせるのでホントに申し訳ないんだけども、私がミスって時間食った時の方がもっと申し訳ないので… って伝わりますかね。すみません（￣∀￣；）

ロビンソン

解決しました

早々にご回答いただきありがとうございます。
注意点として明記されているのを見落として、好きなように導入していたみたいです。
ご対応いただき、感謝いたします。

テンプレート名の件は申し訳ありませんでした。
何度も質問させていただいて、やり取りさせていただく内に無意識に初心というか礼を欠いていたようで、余計なお手間を取らせました。

これからは当該テンプレート記事以外では、利用テンプレート名を明記した上で質問するようにします。
今後ともよろしくお願いします。

Akira

To ロビンソンさん(完了のご報告)

こんにちは。

私すぐ間違えるものですからお手数おかけしてすみません。
修正できたようで安心しました。
お疲れ様でした :)

びん

Akiraさん

今晩は。

2020年から「Lilting」を使わせていただいておりますがこちらの機能は「Lilting」でも可能でしょうか。

Akira

To びんさん

こんばんは。お返事遅くなりました (*_ _)

Liltingの場合は「個別記事のヘッダー画像」と「個別記事以外のページのヘッダー画像」が分かれていますので、本記事の内容に処理を足す必要がありますができますよ。

-----
まず
<header id="header-banner"
を検索するとLiltingのデフォルト内容にありますので、下記のスクリーンショットに従って該当部位を削除します。削除した場所に新たに内容を追加しますので場所を見失わないよう注意してください。白背景部位が削除対象です。

https://blog-imgs-134.fc2.com/v/a/n/vanillaice000/user-ss-2020-03-03----1200.png

削除した場所に以下の内容を追加。

<header id="header-banner" style="background: url(<%topentry_image_url>https://blog-imgs-111.fc2.com/v/a/n/vanillaice000/liltingbg.jpg) center center /cover no-repeat;">

個別記事では各記事のサムネイル(アイキャッチ)画像がヘッダー画像になります。サムネイル対象の画像が存在しない場合には
https://blog-imgs-111.fc2.com/v/a/n/vanillaice000/liltingbg.jpg
の画像がヘッダー採用されるようになっていますが変更可能です。個別記事についてはランダム表示は採用せず、サムネイル有りは各対象画像、サムネイルなしは特定画像、といったように固定を行うようにしてください。

続いてトップページなど個別記事以外のページでの処理を行います。こちらはランダムヘッダーです。以下の内容をテンプレートhtmlの</body>直前に追加。赤字部位のみ書き換え必須です。


<script>
var randomimage = [];
randomimage[0] = '画像アドレス';
randomimage[1] = '画像アドレス';
randomimage[2] = '画像アドレス';
var n = Math.floor(Math.random()*randomimage.length);
document.getElementById('header-banner').style.background='url("'+randomimage[n]+'") center center /cover no-repeat';
</script>


以上です。よろしくお願いします。

びん

できました！

Akiraさん

ご丁寧な説明ありがとうございました。できました。
以前、どこかで見かけたブログでヘッダーの画像が変わる仕様だったので自分のブログでも
できたらいいなと思っていました。

Akira

To びんさん(完了のご報告)

こんばんは。

うまくいったようで良かったです。お疲れ様でした :)

0 この記事へのトラックバック

この記事にトラックバックする(FC2ブログユーザー)

カスタマイズ

手順説明

アクセス時、画像に中途半端な動きがついている場合

コメント 12 コメントをどうぞ

トラックバック 0 この記事へのトラックバック

12 コメントをどうぞ

0 この記事へのトラックバック