他ブログ最新記事

--年--月--日 --:--

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

ブログのタイトル画像をランダムに表示させる

2010年04月21日 01:23

いっつも同じタイトル画像ってのも飽きてきたのでランダム表示されるように改造しました。

最初は自分でランダム表示の方法を考えてうまく導入できたんですが、
ブログのテンプレートを提供してくださっているサイト様のほうで導入方法が分かりやすく説明されてありました。
なんだったんだオイラの1時間は・・・orz
ただ若干「ん?」ってトコロもあったんで、自分流にアレンジして導入。
見事タイトル画像がランダム表示されるようになりました!

このタイトル画像をランダム表示にする方法、ブログのテンプレート毎に様々な方法があります。
今回は自分の使用しているテンプレートを例に導入方法の一つを説明したいと思います。

自分のテンプレートではタイトル画像のURLがCSSに記載されていました。

.header-container {
/* ■ 使用する画像のurl */
background-image : url("画像URL");

/* ■ 背景位置の設定(左からの位置 上からの位置)*/
background-position : 50% 50%;

/* ■ 上から黒背景部分までの余白の大きさ */
padding-top : 210px; /*(画像サイズに合わせて適当に)*/
}


CSSにはタイトル画像のURLを複数記載することは出来ません。
ランダムで表示されるようにするにはJavascriptをHTMLに埋め込む必要があります。
なので<head>タグ内に以下のJavascriptを追記します。

<script type="text/javascript">
<!--
// 画像URLを格納する配列の生成
var imglist = new Array();
// 画像URLを格納
imglist[0] = "画像URL1";
imglist[1] = "画像URL2";
imglist[2] = "画像URL3";
// 配列の要素数を元に配列のインデックスをランダムに選択
var selectnum = Math.floor(Math.random() * imglist.length);
// <style>タグの生成、出力
var output = '<style>.header-container { background-image : url("' + imglist[selectnum] + '");}<¥/style>';
document.write(output);
// -->
</script>


本来ならばCSSに記載されているタイトル画像が表示されますが、
このJavascriptでタイトル画像のURLをランダムに選んでスタイルシートに上書きしています。

もう一度言いますが、この方法はあくまで一例です。
テンプレート毎に導入方法は変わってきます。
ただ、Javascriptでランダムに表示させる処理をHTMLに追記するのは共通の方法だと思います。
HTMLやJavascriptの知識がある方は一度チャレンジしてみてはいかがでしょうか?

分かりにくかったらスイマセンm( _ _ )m
関連記事
スポンサーサイト



コメント

    コメントの投稿

    (コメント編集・削除に必要)
    (管理者にだけ表示を許可する)

    トラックバック

    この記事のトラックバックURL
    http://mocheblog.blog22.fc2.com/tb.php/254-260d5ee1
    この記事へのトラックバック



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