2005年01月26日

Blog改造 Vol.2「トップ画像ランダム表示」

第2回長らくお待たせしました!(待ってないって(^_^;))

今回はJavaScriptを使ってページを読み込む時にトップ画像をランダムに表示させる改造方法です。ちなみにこれは自分のBlogにも使っている改造です。よかったら参考にして下さい。

※もしかしたら不具合が起こるかもしれないので、テンプレートのデータをテキスト書類として保存しておいて下さい。

まずは、Blogの設定/管理→デザイン設定→カスタム→こちらのページ→トップの編集を選択してテンプレートの編集画面を開きます。
<title><$BlogTitle ESCAPE$></title>
</head>
ここの</title>と</head>の間に
<title><$BlogTitle ESCAPE$></title>
<script language="JavaScript">
<!--
photo = new Array();

//画像の指定。ランダムに表示したい数だけ増やす。photo[連番] = '画像URL';
photo[0] = '画像URL1'; //1つ目の画像
photo[1] = '画像URL2'; //2つ目の画像
photo[2] = '画像URL3'; //3つ目の画像
photo[3] = '画像URL4'; //4つ目の画像

r = Math.floor(Math.random()*photo.length);
document.write('<style type="text/css">');
document.write('#banner,#subbanner{background: url("'+photo[r]+'") no-repeat;}');
document.write('</style>');
//-->
</script>

</head>
このように赤字部分をコピーし貼り付けて追加し、それぞれ保存します。(青字部分はあっても無くても大丈夫)
※個別記事に貼り付ける時は注意してください。

最後にBlogの再構築(全ページ)を行なって確認してみてください。
(リロードして画像が切り替われば成功!)

「全ページ」で再構築しても「月別」「カテゴリ別」に変化が無い時は、それぞれ再構築メニューから
「月別」「カテゴリ別」を実行してみてください。
※再構築してもすぐには反映されないことがあるみたいです。

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

この記事へのトラックバック
今日は、新曲の発売日なので、麻衣さんがMai.K Diary更新してくれました。 『Love,needing』を聴いた、沢山の感想をお待ちしてます。 という事なので、皆さん沢山感想をTBしてあげましょう。 &nbsp; 麻衣さん頑張れ〜〜。
Mai.K Diaryが更新されています。【倉木麻衣最高です】at 2005年01月26日 15:57
      
    この記事へのコメント
          
  1. これは良いこと知りました♪ありがとうございますm(_ _)m
    ランダムで画像が表示されるんですか〜何にしようか当分、迷いそうですが
    今度使ってみようと思いますね!
    Posted by mercedex at 2005年01月26日 20:50
  2.       
  3. >mercedexさん
    たぶんLivedoorBlogならどのテンプレートでも対応していると思います。もしかしたら不具合があるかもしれないので、バックアップをして下さいね〜
    分からないことがあったら遠慮無くコメントに書いて下さいね。
    Posted by maco at 2005年01月27日 00:01