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

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

SEOを考慮したランダムなタイトル画像

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

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

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

SEOを考慮するならば、まずjavaScriptの外部ファイル化をするべきです。
【2012/01/14 追記】この外部javascriptへのリンクはcssへのリンクよりも下に挿入してください。

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

var wall = new Array();

/* 使用する背景画像を好きなだけ記述 */
wall[0] = "画像1のURL";
wall[1] = "画像2のURL";
wall[2] = "画像3の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に有効なランダムタイトル画像が表示出来ます。

関連記事
[ 3984 ]
こんにちわ~ ありんこです

いたおさんのテンプレートを使わしてもらっています

一つ質問があります
頂いたコメントが長くなり、スクロールを付けたのですが
TOPが崩れてしまいました
(プラグイン1が下がって、プラグイン2が左に移動した)
しかし、貰ったコメント欄にはスクロールバーが付きました

何か解決方法がありましたら
教えてください

♪(゚▽^*)ノ凸
[ 2009/04/27 15:37 ] [ 編集 ]
[ 3986 ] > ありんこさん
申しわけありません。これはちょっとみただけでは解りそうにありません。

こちらの記事に従って問題の切り分けをしてみてください。
http://10plate.blog44.fc2.com/blog-entry-165.html
[ 2009/04/27 22:57 ] [ 編集 ]
[ 3988 ]
すいません、急遽仕事で長崎に行くことになり、ブログもう少し先になります。。。。。。
どうもすいませんでした。

あなろぐ
[ 2009/04/27 23:25 ] [ 編集 ]
[ 3993 ] > あなろぐさん
マイペースで行きましょう^^
[ 2009/04/28 22:19 ] [ 編集 ]
[ 4003 ]
いきなりですが、タイトル画像にアクセスカウンターをのせるやり方を教えてください

http://marianet.blog96.fc2.com/

こちらのサイトのようにしたいです

よろしくお願いします!
[ 2009/04/29 19:41 ] [ 編集 ]
[ 4013 ] > 天(^^)空さん
この画像は背景です。

タイトルを画像とするのではなく、タイトルの背景を画像にする必要があります。

ヘッダー背景に画像を表示する
http://10plate.blog44.fc2.com/blog-entry-105.html

そうすれば画像とアクセスカウンタを重ねて表示することができます。
[ 2009/04/29 23:59 ] [ 編集 ]
[ 4816 ] IE6での表示がうまくいきません。
こんばんは。いたおさんの作ったテンプレートが非常にカスタマイズしやすく使いやすいので、現在使用させていただいております。

質問なのですが、どうやら自分のブログで、IE6でヘッダーのランダム表示ががうまく表示されていないみたいです。

自分は今Firefox3.0を使用しているのですが、そちらでは上手く表示できているのですが、上記の方法の通りやったのですがIE6で上手く表示されていないようです。

その他のブラウザでは試していないのですが、その他のブラウザでもうまく表示されていないんじゃないかという不安があります。

改善するいい方法はないでしょうか?よろしくお願いします。
[ 2009/07/04 23:02 ] [ 編集 ]
[ 4818 ] > AKさん
以下の環境で見てみましたが、いずれも正常に表示されていました。

Mac:Safari4,Firefox3,IE5
及びMac上で動くWindowsXPのIE6

IE6で上手く表示されないとはどのような感じですか?
真っ黒になるのですか?ランダムにならないということですか?
[ 2009/07/04 23:49 ] [ 編集 ]
[ 4822 ]
ご確認ありがとうござりました。私のIE6では真っ暗に表示されてしまいます。私のIE6がおかしいのかもしれません。

お手数おかけしました。一応きちんと表示されているとのことなので安心しました。

また、困ったことがあったら質問いたします。ありがとうございました。
[ 2009/07/05 03:12 ] [ 編集 ]
[ 4824 ] > AKさん
AKさんのIE6で見えない原因が解りませんが、こちらのIE6で問題なかったので大丈夫かなとは思います^^;
[ 2009/07/05 12:05 ] [ 編集 ]
[ 5132 ]
なぜかTOP画像がずれてしまいます。
どうしたら直せるのでしょうか?
[ 2009/07/28 12:47 ] [ 編集 ]
[ 5142 ] > Geckoさん
スタイルシートの次の数値を調整してください。

/* タイトル背景画像 */
#header_body {

background-position: 30px 10px; /* 左の間隔、上の間隔 */
}
[ 2009/07/28 20:54 ] [ 編集 ]
[ 5474 ]
いつも拝見させてもらってます
質問なんですけど画像が左寄せになってしまいます
どうすれば良いのですか?
[ 2009/08/16 14:03 ] [ 編集 ]
[ 5475 ] > REDさん
現状確認のためにURLを教えてください。
[ 2009/08/16 14:43 ] [ 編集 ]
[ 5743 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2009/08/31 03:05 ] [ 編集 ]
[ 5815 ] 中央揃えの画像→タイトル
タイトル画像を中央揃えにして、タイトルと重ならないように出来るでしょうか?

http://hamusoku.com/
こちらのサイトのように、
・ランダムないろいろな大きさの画像を中央揃え
・タイトル画像の下にタイトルとサイト紹介文
のようにしたいです。、
[ 2009/09/04 02:48 ] [ 編集 ]
[ 5824 ] > フォームEWさん
タイトル画像をランダムに変える
http://10plate.blog44.fc2.com/blog-entry-88.html

この記事の中の記述を<h1>~</h1>の中にではなく、
<div style="text-align:center">~</div>の中に記述し、
<h1>~</h1>の上に設置してください。
[ 2009/09/04 20:26 ] [ 編集 ]
[ 5839 ]
希望通りになりました!
ありがとうございます。
[ 2009/09/05 02:07 ] [ 編集 ]
[ 5841 ] > フォームEWさん
希望通りになって良かったです^^
[ 2009/09/05 02:32 ] [ 編集 ]
[ 5893 ] テンプレート使わせていただいています
はじめまして。YUZUKIと申します。

いたおさんのテンプレートを使わせていただいています。
初心者なのですが、こちらのサイトを参考にしながら、
色々カスタマイズに挑戦しています。

タイトル“背景”をランダムに変える方法について質問です。

この記事を参考に、
javaScriptの外部ファイル化をして、
その末尾に

var wall = new Array();

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

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


と入れて、HTMLでJSファイルのURLを指定したら
背景がランダムになるかな?と思ってやってみたのですが、
そうすると、タイトルの背景画像が全く表示されなくなってしまいます。

このやり方は間違っているのでしょうか?


とりあえず現在は、HTMLに

<script language="JavaScript"><!--
var wall = new Array();

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

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


と入れて、タイトル背景がランダムになるようにしています。


[ 2009/09/06 20:02 ] [ 編集 ]
[ 5901 ] > YUZUKIさん
外部ファイル化するときに全角スペースが含まれてしまった可能性があります。
外部ファイルにした状態を見たいので、もう一度外部ファイル化に加えてもらえますか。
[ 2009/09/07 01:36 ] [ 編集 ]
[ 5921 ] 外部ファイルにしてみました
いたお様

もう一度外部ファイル化に加えてみました。
やはりうまく表示されないみたいです。

お手数をですがアドバイスをお願いいたします。。。
[ 2009/09/07 23:56 ] [ 編集 ]
[ 5922 ] > YUZUKIさん
タイトル画像を変えたいようですね。それであれば外部ファイルの中の
body

#header_body
に変えてください。
[ 2009/09/08 00:02 ] [ 編集 ]
[ 5939 ] うまくいきました!
ちゃんと表示されるようになりました。
これからも、サイトを参考にさせて頂きながら
いろいろいじってみようと思います。

どうもありがとうございました!
[ 2009/09/08 23:02 ] [ 編集 ]
[ 5940 ] > YUZUKIさん
ランダムに表示されるようになりましたね。
解決して良かったです^^
[ 2009/09/09 00:09 ] [ 編集 ]
[ 6734 ] タイトル説明文についてなんですが・・・
こんにちは、すらいむと申します、いつも貴方様のブログでカスタマイズさせてもらってますm(_ _)m

質問なのですが
私のブログのタイトル説明文が邪魔で説明文を取り除きたいのですがこれはできるのでしょうか?
またこれを消したらなにか悪影響はあるのでしょうか?

お忙しい中申しわけありません。
[ 2009/10/31 09:48 ] [ 編集 ]
[ 6740 ] > すらいむさん
赤い部分を削除してください。消しても特に悪影響はありませんが、万が一に備えてバックアップをとってからカスタマイズしてください。

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

<div class="intro"><%introduction></div>

<!--▲▲ ヘッダー ▲▲-->
[ 2009/10/31 23:49 ] [ 編集 ]
[ 6972 ] ありがとうございました!
いたおさんのアドバイスで↑のような所はありませんでしたがなんとか消せるようになりました!
まだ説明文は消さないですが色々と工夫して見やすいブログにしたいと思います!本当にありがとうございました!
[ 2009/11/14 16:54 ] [ 編集 ]
[ 6981 ] > すらいむさん
解決して良かったです^^
[ 2009/11/15 00:48 ] [ 編集 ]
[ 7605 ]
こちらの記事を見て JSファイルの外部ファイル化をしたのですが
タイトル画像を追加しようとするたびに
書き換えた別のJSファイルをupしないといけないのでめんどうです

なんとかならないでしょうか?
[ 2009/12/31 15:57 ] [ 編集 ]
[ 7606 ]
すみません
自己解決(というか元に戻)しました。
[ 2009/12/31 16:00 ] [ 編集 ]
[ 7614 ] > ショボーンさん
面倒だと思いますが、これは他に手がありません^^;
[ 2009/12/31 23:11 ] [ 編集 ]
[ 8594 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2010/03/04 22:08 ] [ 編集 ]
[ 8610 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2010/03/10 01:54 ] [ 編集 ]
[ 8968 ]
すみません;知恵をお借りしたく参りました(泣
問題なんですが、どうしても画像がトップに表示されないんです。
使っているテンプレはいたお氏のStandard wide whiteです。
javaはファイル化しました。
下記がjavaのプログラムです。



function showMore(varA1, varB1){
var123 = ('varXYZ' + (varA1));
varABC = ('varP' + (varA1));
if( document.getElementById ) {
if( document.getElementById(var123).style.display ) {
if( varB1 != 0 ) {
document.getElementById(var123).style.display = "block";
document.getElementById(varABC).style.display = "none";
} else { document.getElementById(var123).style.display = "none";
document.getElementById(varABC).style.display = "block"; }
} else { location.href = varB1;
return true; }
} else { location.href = varB1;
return true; }
}
var wall = new Array();

/* 使用する背景画像を好きなだけ記述 */
wall[0] = "http://blog-imgs-49.fc2.com/h/i/g/higesama666/head_01.jpg";
wall[1] = "http://blog-imgs-49.fc2.com/h/i/g/higesama666/head_02.jpg";
wall[2] = "http://blog-imgs-49.fc2.com/h/i/g/higesama666/head_03.jpg";
wall[3] = "http://blog-imgs-49.fc2.com/h/i/g/higesama666/head_04.jpg";

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

</style>');




ほかにトップに仕込む画像が見当たらず、全部同じ画像で名前を変えただけです。
サイトは↓です。
http://higesama666.blog.fc2.com/

よろしくお願いします。
[ 2012/01/14 19:43 ] [ 編集 ]
[ 8971 ] > ひげさん
すみません、記事に説明が足りませんでした。このjavascriptはスタイルシートの内容を変更するため、head内の中でもcssへのリンクよりも後に外部javascriptへのリンクを挿入する必要があります。cssへのリンクがどれか解らないときは外部javascriptへのリンクを
</head>
のすぐ上に挿入しておけば大丈夫です。

記事の情報が不十分で申しわけありませんでした。記事に追記しておきました。
http://10plate.blog44.fc2.com/blog-entry-190.html#a20120114a
http://10plate.blog44.fc2.com/blog-entry-190.html#a20120114b
[ 2012/01/14 22:09 ] [ 編集 ]
[ 8972 ]
ありがとうございます!
無事ヘッダーをランダムにすることに成功しました!
[ 2012/01/14 22:24 ] [ 編集 ]
[ 8974 ] > ひげさん
成功して良かったです^^
[ 2012/01/15 21:22 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
ユーザータグ


△ ページトップへ戻る