FC2ブログのテンプレート工房

以前にタイトル画像をランダムに変える方法を紹介しました。

しかしこの方法は、h1タグ内にJavaScriptを挿入するため、SEO的には良くありませんでした。

いままでのタイトル画像を透明な画像（透過gif）に置き換えて、その背景をランダムに変えるようにすれば、SEOに有効なランダム画像を実現できます。

SEOを考慮するならば、まずjavaScriptの外部ファイル化をするべきです。

【2012/01/14 追記】

この外部javascriptへのリンクはcssへのリンクよりも下に挿入してください。

そしてJSファイルの末尾に次の記述を加えてください。

var wall = new Array();

/* 使用する背景画像を好きなだけ記述 */
wall[0] = "画像１のURL";
wall[1] = "画像２のURL";
wall[2] = "画像３のURL";

var rnd = Math.floor((Math.random() * 100)) % wall.length;
document.write('<style type="text/css">表示箇所 { background-image:url(' , wall[rnd] , '); }</style>');

表示箇所の部分は、当サイトのテンプレートであれば

standardをお使いの方は
#header

lightframeをお使いの方は
#header_body

と変更してください。

画像のURLは各自用意したタイトルに表示させたい画像のURLを入れてください。
wall[3]、wall[4]・・・と、いくらでも画像を増やす事ができます。


そしてHTMLのh1タグを次の記述に置き換えてください。
タイトルを画像にしたときのSEOを考慮してあります。

<!--▼▼ ヘッダー ▼▼-->
～

<h1><a href="<%url>" title="<!--not_permanent_area--><%blog_name><!--/not_permanent_area--><!--permanent_area--><%sub_title><!--/permanent_area-->"><img src="http://blog-imgs-19.fc2.com/1/0/p/10plate/spacer.gif" alt="<!--not_permanent_area--><%blog_name><!--/not_permanent_area--><!--permanent_area--><%sub_title><!--/permanent_area-->"></a></h1>

～
<!--▲▲ ヘッダー ▲▲-->

さらにスタイルシートの末尾に次の記述を加えてください。

/* 透過gif (マウス反応範囲) */
h1 img {
height:50px; /* 高さ */
width:500px; /* 幅 */
border:0px;
}

/* タイトル背景画像 */
#header_body {
background-repeat: no-repeat; /* 繰り返し表示の有無 */
background-position: 30px 10px; /* 左の間隔、上の間隔 */
}

【2012/01/14 追記】

standardをお使いの方は#header_bodyを#headerにかえてください

透過gifの高さや幅、背景画像のポジション等の各数値を調整してください。

これでSEOに有効なランダムタイトル画像が表示出来ます。

関連記事

• 記事内のリストにだけ、リストアイコン画像を設定する (2009/05/07)
• コメントを含めた検索 (2009/05/05)
• タイトルの横に検索窓を設置する (2009/04/29)
• SEOを考慮したランダムなタイトル画像 (2009/04/26)
• コメントに敬称をつける (2009/04/25)
• タイトルを画像にしたときのSEO (2009/04/20)
• 横メニューバーを幅一杯に表示する（リキッドレイアウト） (2009/04/15)