ねことくまとへび

はてなブログはまだベータ版ということもあり、デザインの細かい指定をすることができません。私の手元にははてなダイアリーで使っていた、JOE画伯 *1 作の素敵な画像があるのですが、残念ながら現時点ではタイトル画像に指定することはできないのです。

しかし、幸いにして、はてなブログではスタイルシートについては自由に書くことができます。これを利用すれば、タイトル画像らしきものを表示することはできそうです。以下、参考までに。

h1#title {
background: url(http://d.hatena.ne.jp/images/diary/s/silence1998/titleimg.jpg) no-repeat top right;
width: 2648px;
height: 236px;
margin: -50px 0 50px -2000px;
float: left;
}

img要素を指定できないのなら、背景を画像にして、タイトルの文字自体をブラウザ表示範囲外に追い出せばいいじゃない！　という発想です。

まず、backgroundのurlにはタイトル画像に使用したいURIを指定してください。続いて、widthには画像の縦のサイズ+2000pxを、heightには画像の横のサイズを指定します。

marginについてですが、左マージンは-2000pxを指定します。上、下、右マージンに関しては、お好みで調整してください。デザインのテンプレートによって綺麗に見える数値は変わってくると思いますので。

さて、これでタイトル画像を表示することができました。実際には、左に長いh1の領域が取られ、その左端（ブラウザの表示範囲外）にタイトルの文字列が表示され、右端（今までタイトル文字列が表示されていた場所）に画像が表示された結果、あたかもタイトル画像が表示されているように見えているだけなのですが。

ちなみに、この手法には一つ問題点があります。それは、ブログのトップへのリンクがなくなってしまうことです。HTMLのソース上、トップへのリンクはタイトルの文字列に張られています。つまり、タイトルの文字列をブラウザ表示範囲外に追い出してしまった以上、そのリンクをクリックする手段がないのです。これは盲点だった。

というわけで、はてなさんは早くタイトル画像の指定機能を追加してください！