読者です 読者をやめる 読者になる 読者になる

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

DSC00142.JPG


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


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

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



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



しかし・・・

調べてみて書かれてあるようにやってみても
うまくいきませんでした。
(後でわかったのですが、画像への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;
}

これを変化させて、

h1 {
width: 750px;
height: 220px;
margin: 0 auto;
}

これでOKでした。


これが正しいやり方なのかは自分では判定できてませんが
一応これでよしとします。

あとはちょこっと全体の幅を広げようか・・なども考えていますが
雰囲気はこれで落ち着きそうです。

★元気の素です→にほんブログ村 その他日記ブログ 日々の気になることへ ありがとうございます〜♪