ブログの読み込みが遅いのが気になっていて
テンプレートの画像も影響しているようなので
慣れ親しんだテンプレートですが思い切って変えることにしました。
このブログは画像やら写真を結構載せるので
あまりいろんな色があるテンプレートは避けようと思ってます。
するとなんだか味気なくて
やっぱりタイトルの背景だけでも変えてみようと思い
この度挑戦しました。
はてなダイアリーは選んだテンプレートにもよりますが、
カスタマイズはなかなか手強くて
慣れてくるとふ〜んなるほど。ってこともありますが、
意味が分からない時がよくあります。
しかし・・・
調べてみて書かれてあるようにやってみても
うまくいきませんでした。
(後でわかったのですが、画像への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でした。
これが正しいやり方なのかは自分では判定できてませんが
一応これでよしとします。
あとはちょこっと全体の幅を広げようか・・なども考えていますが
雰囲気はこれで落ち着きそうです。
