ヘッダのデザイン変更

…と、言うことで先週末の雪の日に行った変更点の解説です。

また、変更方法は私が行った方法で解説していきますので…
あまり突っ込まないで下さい…

ただし、間違い等ありましたら遠慮無く指摘願います。


ちなみに参考とした本ですが…
コレ…と、 コレの２冊です。

何も見ずにcssの書き換えは出来ません。
つーか、cssと言う言葉さえ知りませんでしたから！


まず、写真の加工を行います。

自分が使いたい写真を見つけ出し、それを適当な大きさに加工します。
あまり高さがあると、ブログタイトルだけで画面を占拠してしまいますのでご注意下さい。


現在、私のブログが使っている写真はコチラ↓

大きさは800×175ピクセルになります。


まず、これを画像フォルダに保存します。
保存された画像が表示されたら、使いたい写真をクリック！
そうすると新しいウィンドウが開いて画像が表示されますので、このアドレスをコピーしてメモ帳にでも保存しておいて下さい。



次に、私が使ったテンプレートですがシンプルのジャンルにあるクリアホワイト左になります。
このテンプレートだったら大体のカラーイメージが出来上がっているので、使うのに簡単かな？…と。

本当はクリアオレンジ左にしようかな？とも思ったのですが…
何となく…ですね。



選んだテンプレートでcssの編集が行えるかどうかは、矢印の先の赤丸にあるように「テンプレートの編集」と言うのが表示されれば大丈夫です。


まず、cssデータをメモ帳に複写します。
人によるかもしれませんが、私の場合、途中で訳が分からなくならないように編集の途中で番号をつけながらデータを保存しています。


cssデータを見ていくと…
/* ヘッダーの指定　*/
#header {
background-color: ;
padding:35px 0px;
background-image: ;
text-align: left;
}
と表示されているところが見つかります。


ここの５行目に書かれいている
　background-image: ;
ココの"："と"；"の間に
　url()
と半角で入力して下さい。

そうして、この括弧と括弧の間に、メモ帳に保存してある使いたい写真のアドレスを貼り付けます。


プレビューを見て、写真の上下が切れてしまっている場合は
先ほどの
　background-image: ;
の下に
　height:;
の１行を入力し"："と"；"の間に数値を入れて高さを変化させます。


また、これだと写真が繰り返されてしまいますので、私のように写真を繰り返したくない場合は
　background-repeat: no-repeat;
と言う１行を追加。


更に写真を真ん中に持ってきたい場合は…
　background-position: center;
と言う１行も追加します。
　左側によせる場合はcenterの変わりにleft。
　右側によせる場合はrightです。


今回、タイトルを右側に持っていったのですが、これは途中にある
　text-align: left;
この部分のleftをrightに書き換えただけです。


最終的には
/* ヘッダーの指定　*/
#header {
background-color: ;
padding:35px 0px;
background-image:url(使っている写真のurl);
height:150px;
text-align: right;
background-repeat: no-repeat;
background-position: center;
}
こんな感じになっています。
どうでしょう？

カウンターの表示方法は、また次回…