はてなダイアリーにヘッダー画像を入れる方法

はてなダイアリー標準のデザインに若干の寂しさを感じ、ブログヘッダーを入れる方法を調べました。

なお、ヘッダー画像の入れ方については「jkondoのはてなブログ」を参考にさせて頂いています。

前提条件

● ベースとなるテーマは「hatena2」を利用しています。利用テーマが異なる場合は、本稿で説明するヘッダー画像のサイズが異なる場合がありますのでご注意ください。

● ヘッダー画像は私が管理しているホームページに保存しました。フォトライフpicasaFlickerなども利用可能と思いますが、本稿での説明は割愛いたします。

なお、利用したヘッダー画像は、以下のサイトで紹介されている画像を利用しています。
Blog Headers For Free Download – Smashing Magazine

用意するもの

● ヘッダーに利用する画像。
「hatena2」テーマの場合は横910ピクセル、縦180ピクセルです。ベースに利用するテーマによってサイズは異なりますのでご注意ください。

● ヘッダー画像の保存場所
あらかじめ、ヘッダー画像を特定のURLに保存してブラウザから参照できるようにしておきます。

設定方法

(1) はてなダイアリー管理画面の左メニューから「デザイン」-「デザイン編集」を選択します。
(2) 画面上部の「詳細」タブを選択し、画面の一番下の「スタイルシート」入力欄に以下のコードを入力します。


h1 {
background:#333 url('ヘッダー画像のURL') no-repeat; /* 背景画像の設定 */
color:#000; /* 背景色の設定(特に必要なし) */
padding-top:70px; /* 丈夫のパディング */
border-bottom:1px solid #ddd; /* ヘッダー下の区切り線 */
}
h1 a,h1 a:visited{
color:#000; /* 文字色 */
font-size:xx-large; /* 文字の大きさ */
}

(3) 「この内容に変更する」ボタンを押して内容を保存する。

これでヘッダーが設定されます。

設置例

本方式の設置例は、以下の通りです。


追加情報

IE8で表示したところ、画像のサイズが小さく、余白が黒く表示されてしまします。
回避策として、画像サイズを少し大きめに作成しました。
現在ヘッダー画像は、IE8でもそれなりに表示されるように横1500ピクセル、縦300ピクセルにしてあります。