はてなダイアリーのトップ絵を変えよう

トップの画像をちょっとインフラ部っぽくした．東京オフィスに置いてあるL2スイッチ．

結構トップ絵*1を弄りたい人は居ると思うのだけど，公開デザインを触ったり，おもむろに表示されるスタイルシートのテキストボックスに何を打てばいいのかわからないだろうなぁと実感．そこでメモ．どなたかの参考になれば良いな．

大抵（というか全部？）のデザインのトップのタイトルはh1タグで囲まれている

<h1><a href="http://d.hatena.ne.jp/hxmasaki/">はてなクラフト(仮)</a></h1>

トップの画像はimgタグで差し込まれているのではなく，このh1タグの背景としてスタイルシートで設定されている．
例えば，このダイアリーのデザインFragments_grではこのようになっている．

h1 {
margin: 5px auto 0 auto;
padding: 68px 0;
width: 740px;
max-height: 14px;
height: 150px;
background: #9c3 url('h1_gr.png') center top no-repeat scroll;
color: #fff;
font-size: 14px;
font-weight: normal;
white-space: nowrap;
letter-spacing: 0.2em;
text-indent: 0.5em;
line-height: 1.2;
overflow: hidden;
}

トップ絵となっている背景画像には

background: #9c3 url('h1_gr.png') center top no-repeat scroll;

からわかるように，"h1_gr.png"という画像ファイルが読み込まれている．
ちなみにこれ→http://d.hatena.ne.jp/theme/fragments_gr/h1_gr.png

このファイルではなく，自分でアップロードした画像を読み込ませるには，ダイアリーの管理画面で
[デザイン]->[デザイン編集]のページの一番下のスタイルシートと書かれているところのテキストボックスに，

h1 {
background: #9c3 url('アップロードした画像のURL') center top no-repeat scroll;
}

と入力すればよい．
ちなみに

• #9c3は画像の後ろ側の色
• center,topは画像の表示位置
  • center以外にはleft,right
  • top以外にはbottom
• no-repeatは画像を1度だけ表示するの意

なので，こちらも自由にカスタマイズ出来る．

このダイアリーの場合はフォトライフにアップした画像を読み込ませているので，
この画像のURLを入力している．

ついでに，アップした画像とダイアリーのタイトルの被り方が気に入らない場合はこのようにして動かしたので，最終的には以下のようなスタイルシートを書いた．

h1 {
background: #9c3 url('http://f.hatena.ne.jp/images/fotolife/h/hxmasaki/20080720/20080720023151.jpg?1216488734')  no-repeat scroll;
text-align:right;
}

以上，どなたかの参考になれば．

CSSにご無沙汰過ぎた．自分で公開デザイン作ろうという意欲が沸いたり沸かなかったり．
もっとナウでヤングなスタイルがあったら良いなぁ．

*1:絵サイトっぽい言い方だけど何て呼ぶんだろう