どうも、うふのわーるです。
ちょっとご無沙汰しておりました。
まあ、世間的にもお盆ということで
ﾌﾞﾛｸﾞを休んだ大義名分は立つのかなと
勝手に思っておりますが
久々に自分のﾌﾞﾛｸﾞを見ていたら
無性にデザインに物足りなさを感じたため
少し手を加えてみました。
さて、どこを変えようかと考えてみましたが
やはり変更するのであれば
見栄えのする「ヘッダー」に、ということで早速検索。
結構、皆様ご丁寧に解説してくださっているので
御蔭さまで非常にスムーズにカスタマイズ完了。
うん、うん。
思いのほか良い具合で
なかなかの自己満足度ですが
忘れないように備忘録を。
【ヘッダーカスタマイズのポイント】
・ヘッダー用画像の作成（横：980px/縦：300px）
・カスタム可能なテンプレートへ変更
・サイズを適正に調整した画像をアップし画像パスをコピー
・編集画面でｃｓｓの下記部分を変更
■■■■■■■■■■■■■■■■■■■■■■■■■■
/* (3-2) ブログヘッダー
--------------------------------------------*/
ここの部分を削除し（※１）をコピー＆ペースト
/* (3-3) コンテンツエリア
--------------------------------------------*/
■■■■■■■■■■■■■■■■■■■■■■■■■■
（※１ここから）赤字のみ
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background-image: url(コピーした画像のパス);
background-repeat: no-repeat;
background-position: center top;
width: 980px;
height: 300px;
margin-bottom: 15px;
}/* ←ブログヘッダーに背景画像を敷きたいとき */
/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea {}
/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea {
text-indent: -9999px;
}
/* クリックするとブログのトップに移動 */
.skinTitleArea a.skinTitle {
width: 980px;
height: 300px;
display: block;
}
/* skinDescriptionArea ブログの説明エリア */
.skinDescriptionArea {
text-indent: -9999px;
}
（※１ここまで）
以上。
ちなみに（※１）内の
margin-bottom: 15px;
↑は、ヘッダーとﾌﾞﾛｸﾞコンテンツの間隔指定なので
お好みで入れてもいれなくてもOK。
美意識やこだわりが強い人であれば
画像の選定に時間がとられるかもしれませんが
編集作業自体は所要時間は30分もかからずできるので
お手軽に気分転換したいという場合にはもってこいの方法かと。
（賢明な読者の皆様は大丈夫かと思いますが念の為。
ヘッダーも然り、ﾌﾞﾛｸﾞで使用する画像は
自前か著作権フリーなものにすることをお忘れなく。）
CyberAgentさんも無料で使用できるデザインを
いくつも用意してくれてはいますが
誰もが同じものを使っているということに我慢がならず
既存のテンプレートデザインでは不服だという人は
ささっと変えてしまった方が
記事の更新にも身が入るのではないでしょうかね。
格好から入るというのも、結構大事だいじ。
おっ、己へのプレッシャーですな（笑）
