はてなダイアリーのタイトル画像を変えてみた

ブログの読み込みが遅いのが気になっていて
テンプレートの画像も影響しているようなので
慣れ親しんだテンプレートですが思い切って変えることにしました。

このブログは画像やら写真を結構載せるので
あまりいろんな色があるテンプレートは避けようと思ってます。

するとなんだか味気なくて
やっぱりタイトルの背景だけでも変えてみようと思い
この度挑戦しました。

はてなダイアリーは選んだテンプレートにもよりますが、
カスタマイズはなかなか手強くて
慣れてくるとふ〜んなるほど。ってこともありますが、
意味が分からない時がよくあります。

しかし・・・

調べてみて書かれてあるようにやってみても
うまくいきませんでした。
（後でわかったのですが、画像へのURLが間違っていたようです）

なので、やり方を変更。
背景にタイトルロゴも入れた状態の画像を作って
設定にある「タイトル画像の変更」を利用して
背景ごと変えてみることにしました。

先に、テンプレートのタイトル背景におさまる画像を
作っておく必要があります。
もちろんタイトルも画像内にいれて保存しておきます。

で、仕上がりはこれ↓

タイトルをh1で指定したテキストで入れるより
この方が見た目はキレイで気に入ってます。

この画像全体をタイトル画像と考えてアップします。

設定→ブログの設定→タイトルの設定→タイトル画像のところで
「参照」をクリック、保存しておいたPC内の画像を選びます。

何度も言いますが、
ここの設定はブログタイトル（テキスト）を画像に変更する設定なので
タイトル背景全体をここに入れるんなら
CSS（スタイルシート）も触らないと位置がずれてしまいます。

CSSではブログタイトルの表示位置を指定してある
不要な要素は外しました。

元々のCSSは

/*:: title ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
h1{
padding: 40px 15px;
width: 690px;
_width: 750px;
*width: 750px;
font-size: 130%;
text-align: left;
color: #222222;
font-family: Trebuchet MS, Myriad, Helvetica, Arial, sans-serif;
clear: both;
margin: 0 auto;
font-weight: bold;
background: #f0f0f0;
border: solid 15px #ffffff;
}
h1 a{
text-decoration: none;
border: none;
color: #444444;
}