ブログタイトルは通常テキストだが、このブログでは「α」がフォントによってだいぶ変わってしまうのでかっこ悪い。そこでバナーの背景画像にタイトル文字を絵として書いて、スタイルシート(CSS)だけを変更して、タイトル文字部分だけをトップにリンクするようにした。

また、タイトルはh1タグで記述されているが、h1タグは検索ロボットにとっては重要なタグで、h1タグが無くなると検索ロボットがタイトルテキストを収集してくれなくなるので、テキストのタイトルは見えなくするだけにした。こうすればCSSが読み込まれない環境（携帯など）ではテキストタイトルが表示される。

手順は以下のとおり。
１．タイトル文字の入ったバナー画像を用意する。基本的には元にあったバナー背景画像と同じ大きさにしないとややこしい。このとき、タイトル文字部分の左上座標と幅、高さをメモっておく。

２．使っているスタイルシートを開き、以下の赤の部分を探す。

#banner{
font-family:arial, Helvetica;
height:211px;
margin:0px;
padding:0px 0px 0px 20px;
text-align:left;
background-image:url(http:⁄/reinbowbridge.up.seesaa.net/image/Top_banner2NT.gif);
background-repeat:no-repeat;
}
h1 {
margin:0px;
padding: 30px 10px 10px 0px;
font-size:20px;
font-weight:bolder;
}
h1 a{
color:#597903;
font-family:arial, sans-serif;
text-decoration: none;
font-weight:bolder;
}

３．以下の赤の部分を挿入、紫の部分を書き換える。

#banner{
font-family:arial, Helvetica;
position:relative; ←このボックスの中にあるもの(今回はh1タグ）の基準となるように宣言
height:211px;
margin:0px;
padding:0px 0px 0px 20px;
text-align:left;
background-image:url
(http:⁄/reinbowbridge.up.seesaa.net/myimages/Banner01_820_128.gif);
↑作った画像をアップしてそのurlを記述。
background-repeat:no-repeat;
}
h1 {　
margin:0px;
padding: 30px 10px 10px 0px;
font-size:20px;
font-weight:bolder;
}
h1 a{　 ← h1のうちaが定義されているもの（タイトル文字部分）だけを対象にカスタマイズ
text-indent:-9999px;　←　タイトル文字を飛ばして見えなくする
display:block; ←　念のため、ブロック要素宣言
width:190px;　←　タイトル文字部分の横幅
height:24px;　←　タイトル文字部分の縦幅
position:absolute; top:15px; left:20px;
　↑　バナー画面左上からの、タイトル文字左上の座標
margin:0px;　←　念のため
padding:0px;　←　念のため
color:#597903;
font-family:arial, sans-serif;
text-decoration: none;
font-weight:bolder;
}

HTMLはいじらない。これで画像の上に透明なボックスが出来て、そこにカーソルを持っていけばリンクしていることが分かるはず。
透明ボックスの位置調整のために h1 a{ } のなかに
border:#BBB 1px solid;
を入れてボックスの位置、大きさを見ながら調整し、最後にこの行を消す方がやりやすいかも。

余談

ブログタイトルを画像にすると<h1>タグが無くなり、SOE対策上検索エンジンに引っかかりにくくなる。CSSで、display: none;を記述してHTMLには<h1>タグを入れる方法をどこかで読んだので、それを使用した。
また、タイトル（バナー）画像はイメージマップになっている。

あと、Geckoエンジンで見るとレイアウトが崩れているので、それも直さないといけない。
疲れた・・・。

• タイトル文字を画像にした(HTML内にはタイトル文字や説明文はテキストで残っている）


• バナーを背景からHTMLのコンテンツにした（イメージマップにするため）


• 過去ログとカテゴリ毎のページの最初に一覧を表示するようにした。


• 背景画像を軽量化し、表示を軽くした。

seesaaのサイト構造はこうなっているらしい：

• 特定のカテゴリがトップページに表示されないようにした。


• マージンを見直して段差が無いようにした。


• Geckoエンジンで表示の乱れを修正した。

他のブログの写真を見ていると、背景が黒の方が写真が映えるというか、コントラストがはっきりするような気がする。そこでSeesaaの黒背景のテンプレートを探すと、意外と気に入ったものがなかったので自分で作ることにした。CSSは以前にちょっと勉強していたが、改めてやるとなかなか難しい。DreamweaverMXのリファレンス機能などを使いがら試行錯誤でCSSを記述。
まだちょっと変なところや、デザイン上のバランスが悪いが、徐々にチューンアップしていくつもり。以下、変更点をメモ書き：

• 背景画像、上部バナー画像等を自作した


• 記事部分のみ、背景を濃灰色にし、文字を白にした。


• 日付毎にその日の記事をだすのではなく、記事タイトル行に日付をつけるようにした。


• ブログカスタマイズのカテゴリを作成した。

今後、ブログカスタマイズについてもこちらに記事を載せる予定。メモなのでトップページには出ないようにしたいと思う。どうやるのかは思案中。