スポンサーサイト

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

ヘッダー画像をランダムに表示する方法(高速版)

前回「ヘッダー画像をランダムに表示する方法」で紹介したやり方はヘッダー以外のCSSの要素全てに応用が行く汎用性の高い方法でしたが、やはり表示速度が低下するというデメリットがありました。

ヘッダー画像のみに特化した方法を取れば表示速度の低下を大きく軽減することが出来ることが分かったので改めて紹介します。

ちなみに、上の画像はサクサク for iPhoneという高速化(メモリ解放してるだけ?)アプリの画像です。

味のある絵柄で気に入ってます。

 

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

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

 

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

   1: <script type="text/javascript">
   2: var img = new Array();
   3:  
   4: /* 使用する背景画像を好きなだけ記述 */
   5: img[0] = "画像アドレス";
   6: img[1] = "画像アドレス";
   7:  
   8: var rand = Math.floor(Math.random()*img.length);
   9:  
  10: document.write('<a href="ジャンプ先のアドレス"><img src=',img[rand],' border="0"></a>');
  11:  
  12: </script>

画像を増やしたい時は、img[2],img[3]・・・と追記して下さい。

ジャンプ先のアドレスもお好みで変えて下さい。ホームアドレスになっていることが多いです。

 

以上です。

単純にCSSをいじらずにHTML上で完結しているのが高速化の理由だと思います。

ただこの方法だと背景画像指定ではなくタダの画像の挿入なので、文字との重ね合わせが出来ないです。

何かしら方法があるのかも知れませんが、僕には分かりませんでした。

関連記事
                

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

コメントの投稿

Secret

カテゴリ
プロフィール

けんじぃ

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

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

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

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

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