スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
                

ヘッダー画像をランダムに表示する方法

今、このブログはこんな感じで2枚のヘッダ画像をランダムに表示しています。

このやり方について紹介したいと思います。


まず最初にデメリットですが、スクリプト処理が入るので読み込みが遅くなることがあります。

どの程度影響するかはサイトの構成によって変わります。ちなみに、このサイトはちょっとではありますが体感できる範囲で遅くなってます。

 

では、方法です。

まず、テンプレートのHTMLの方を編集します。

管理画面だとこんな感じです。

 

<head>~</head>の後に以下のスクリプトを挿入します。

   1: <script type="text/javascript">
   2: window.onload = function(){
   3: var img = new Array();
   4:  
   5: /* 使用する背景画像を好きなだけ記述 */
   6: img[0] = "画像のアドレス";
   7: img[1] = "画像のアドレス";
   8:  
   9: var rand = Math.floor(Math.random()*img.length);
  10:  
  11: document.getElementById("header").style.backgroundImage = "url("+img[rand]+")";
  12:  
  13: }
  14: </script>

画像を増やしたい時は、img[2],img[3]と追記していきます。

 

何をやっているかというとID:headerのbackgrundImageに画像アドレスを渡しています。

ここで大事なのはIDです。このブログの場合はheaderですが、ブログによっては違いますし、IDを変えればヘッダ以外の画像もランダムに変更することが出来ます。

 

次にCSSを変更します。

管理画面だとこんな感じです。

 

   1: div#header {
   2:   width: 1230px;
   3:   height:135px;
   4:  
   5:   margin-left: auto;
   6:   margin-right: auto;
   7:  
   8:   padding-bottom:2px;
   9:   padding-top: 15px;
  10:   margin-bottom: 0px;
  11:  
  12:   background: url(画像アドレス)#171717 no-repeat right top;  
  13: }

backgroundの所の画像アドレスを消せば完了です。画像アドレス先ほどのスクリプトが生成してくれます。

 

実は前々からやりたいとは思っていたんですが、なんか難しそうだなぁ~と敬遠してたんですよね。

やってみると簡単で拍子抜けしました(笑)

デメリットはあるのですが、とっても簡単で凝ってる感じにできるのでオススメです。

関連記事
                

tag : ブログ作成 ヘッダー画像 ランダムに表示 FC2ブログ

コメントの投稿

Secret

No title

いただきます!(`Д´)ゞ

色々と関連のところを読みあさったんですが、ボクの思考回路では理解できなかったんですよね・・・。

そろそろ完成品ができそうなので、それに応じて試してみます!

No title

とぉと(めかおやじ)さん

こんばんは、コメントありがとうございます。

お役に立てたようでうれしいです。
ちなみに、高速版の記事を今日掲載してますので、そちらの方法をオススメします。
カテゴリ
プロフィール

けんじぃ

Author:けんじぃ
ガンプラ初心者というか入門者です。このブログを通じていろんな方と知り合えたらと思っています。よろしくお願いします。

最新コメント
プレミアムバンダイ オススメ商品
プレミアム バンダイ
Amazon オススメ商品
Powered by amaprop.net
月別アーカイブ
アクセスランキング
[ジャンルランキング]
趣味・実用
3716位
アクセスランキングを見る>>

[サブジャンルランキング]
模型・プラモデル
489位
アクセスランキングを見る>>
アクセスカウンタ
メールフォーム

名前:
メール:
件名:
本文:

製作状況
HGBF ハイモック
サフチェック中です。9月中頃完成予定です。
スポンサードリンク
完成品ギャラリー
人気記事
スポンサードリンク
相互リンクサイト更新チェック
逆アクセスランキング
相互リンク
登録順になってます。相互リンク募集中です。
スポンサー
フリーエリア
フリーエリア
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。