2009年08月12日
ヘッダー画像をランダムに変える（画像リンク付）
「ヘッダー画像をランダムに変えて表示する」では、ブログにアクセスする度に、5 種類のヘッダー画像からランダムに表示を変える方法をご紹介しました。今回は、ちょこっと発展させまして。
ランダムに表示させたヘッダー画像全体に、ブログのトップページのリンクを付ける方法をご紹介します。
この方法によって、ブログのタイトルやブログの説明文を文字ではなく、ロゴなどの画像として表示することができますし。
それ以外の情報も、ヘッダー画像に入れることができるようになります。
このブログは、「オリジナル★テンプレートの作成」機能を使って作った、オリジナルテンプレートを使っています。
「オリジナル★テンプレートの作成」で作ったテンプレートの場合、ヘッダー画像のサイズは、横 750px 縦 200px ですので、このサイズの画像をとりあえず 5 種類を作り、つぎのファイル名でブログにアップロードしました。
title-00.jpg
title-01.jpg
title-02.jpg
title-03.jpg
title-04.jpg
画像一覧の画面で表示されるサムネイル画像をクリックすると、アップロードした画像の URL がブラウザのアドレスバーに表示されますが。
アップロードしたそれぞれの画像の URL は、つぎのようになるようです。
//img01.shiga-saku.net/usr/etc/title-00.jpg
//img01.shiga-saku.net/usr/etc/title-01.jpg
//img01.shiga-saku.net/usr/etc/title-02.jpg
//img01.shiga-saku.net/usr/etc/title-03.jpg
//img01.shiga-saku.net/usr/etc/title-04.jpg
即ち、ブログの URL が http://△△△.shiga-saku.net/ の場合は、
//img01.shiga-saku.net/usr/△△△/ファイル名
に、なります。
ヘッダー画像をアップロードし、その画像の URL を確認したら、次のコードをコピーして、画像の URL 部分をご自分のブログにアップロードしたヘッダー画像の URL に書き換えてください。
<!-- ヘッダー画像をランダムに変えて表示・画像リンク版 -->
<script language="JavaScript">
<!--
// タイトル画像をランダムに表示する JavaScript
// 画像 URL
img = new Array();
img[0] = "//img01.shiga-saku.net/usr/etc/title-00.jpg";
img[1] = "//img01.shiga-saku.net/usr/etc/title-01.jpg";
img[2] = "//img01.shiga-saku.net/usr/etc/title-02.jpg";
img[3] = "//img01.shiga-saku.net/usr/etc/title-03.jpg";
img[4] = "//img01.shiga-saku.net/usr/etc/title-04.jpg";
n = Math.floor(Math.random()*img.length);
// 画像表示とトップページへのリンクタグの生成
document.write("<a href='<%BlogUrl%>' title='<%BlogTitle%>' target='_top' accesskey='1'>");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");
//-->
</script>
<!-- ヘッダー画像をランダムに変えて表示・画像リンク版 END -->
例えば、こんな感じになります。
img[0] = "//img01.shiga-saku.net/usr/△△△/1つ目の画像のファイル名";
img[1] = "//img01.shiga-saku.net/usr/△△△/2つ目の画像のファイル名";
img[2] = "//img01.shiga-saku.net/usr/△△△/3つ目の画像のファイル名";
img[3] = "//img01.shiga-saku.net/usr/△△△/4つ目の画像のファイル名";
img[4] = "//img01.shiga-saku.net/usr/△△△/5つ目の画像のファイル名";
「img[0] = "」の「"」や、ファイル名の後ろの「";」などをうっかり削除してしまうと、画像が正常に表示しませんのでご注意ください。
ヘッダー画像の数を、例えば 3 つにしたい場合は、
img[0] = "//img01.shiga-saku.net/usr/△△△/1つ目の画像のファイル名";
img[1] = "//img01.shiga-saku.net/usr/△△△/2つ目の画像のファイル名";
img[2] = "//img01.shiga-saku.net/usr/△△△/3つ目の画像のファイル名";
だけ記述し、
img[3] = "//img01.shiga-saku.net/usr/△△△/4つ目の画像のファイル名";
img[4] = "//img01.shiga-saku.net/usr/△△△/5つ目の画像のファイル名";
の部分を削除してください。
7 つに増やしたい場合は、続けて
img[0] = "//img01.shiga-saku.net/usr/△△△/1つ目の画像のファイル名";
img[1] = "//img01.shiga-saku.net/usr/△△△/2つ目の画像のファイル名";
img[2] = "//img01.shiga-saku.net/usr/△△△/3つ目の画像のファイル名";
img[3] = "//img01.shiga-saku.net/usr/△△△/4つ目の画像のファイル名";
img[4] = "//img01.shiga-saku.net/usr/△△△/5つ目の画像のファイル名";
img[5] = "//img01.shiga-saku.net/usr/△△△/6つ目の画像のファイル名";
img[6] = "//img01.shiga-saku.net/usr/△△△/7つ目の画像のファイル名";
というように、追記していってください。
さて、このコードを使って、
・ トップページ
・ 個別記事
・ アーカイブ
の 3 つのテンプレートの一部を書き換えて挿入するんですけれど。
個別記事だけ、字下げが行われていますので、場所を探す際にご注意ください。
<div id="banner">
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
<div class="description"><%BlogDescription%></div>
</div>
の部分を、
<div id="banner">
<!-- ヘッダー画像をランダムに変えて表示・画像リンク版 -->
<script language="JavaScript">
<!--
// タイトル画像をランダムに表示する JavaScript
// 画像 URL
img = new Array();
img[0] = "//img01.shiga-saku.net/usr/△△△/1つ目の画像のファイル名";
img[1] = "//img01.shiga-saku.net/usr/△△△/2つ目の画像のファイル名";
img[2] = "//img01.shiga-saku.net/usr/△△△/3つ目の画像のファイル名";
img[3] = "//img01.shiga-saku.net/usr/△△△/4つ目の画像のファイル名";
img[4] = "//img01.shiga-saku.net/usr/△△△/5つ目の画像のファイル名";
n = Math.floor(Math.random()*img.length);
// 画像表示とトップページへのリンクタグの生成
document.write("<a href='<%BlogUrl%>' title='<%BlogTitle%>' target='_top' accesskey='1'>");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");
//-->
</script>
<noscript>
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
<div class="description"><%BlogDescription%></div>
</noscript>
<!-- ヘッダー画像をランダムに変えて表示・画像リンク版 END -->
</div>
というように書き換えます。
赤い文字の部分が、書き換えを行う部分です。
下線の部分、「accesskey='1'」については、「accesskey属性について」の記事で少し触れています。
画像の表示のプログラムは、「eWeb」様の記事を使わせて戴きました。
+ 画像をランダムに表示する／eWeb +
http://javascript.eweb-design.com/0804_ri.html
Posted by お京 at 22:32
│記事テンプレート
