超簡単カスタマイズ講座その1

お約束（？）したので、役に立つ（かもしれない）カスタマイズ方法を書きますね♪

カスタマイズははじめて……という人向けにいきたいと思います。
おそらく、BLOG初心者の方は機能的なカスタマイズより、見た目の変化の方が気になると思いますので、見た目を超簡単に変える方法をお教えしますね♪
（機能的なカスタマイズ方法なら、FC2ブログのテンプレート工房さんが大変わかりやすくて親切で、個人的にお勧めです＾＾）

↓のURLは、私がdo_meganeを、ためしに10分程度で色とヘッダー画像を変えるだけの簡単カスタマイズをしてみたものです。（画像加工時間は除く）
http://dokode.blog87.fc2.com/?style2=do_green&index

使っている画像はヘッダーのみ、後は色だけというシンプルさ。
それだけでも。見た目はずいぶん違いますよね♪
さすがに自分のソースだから早いと言うのもありますが、慣れればどなたでも一時間以内にこのようなカスタマイズなら出来るようになりますよ♪

で、具体的にそのカスタマイズ方法を、順に説明していこうかと思います。
元にするのはとりあえず眼鏡テンプレにしますね。
今、登録している最新版に添って、説明していきます。

まずはヘッダー画像を変えてみましょう。

スタイルシートの編集画面から、以下の箇所を探してください。
（わりと上の方にあります）。

/************************************/
/* ヘッダー */

#header{
text-align: left; /* 左寄せ */
width: 800px; /* ヘッダーの幅 */
height: 196px; /* ヘッダーの高さ */
background-color: #fff; /* ヘッダーの背景色 */
background-image: url(http://blog-imgs-14.fc2.com/d/o/k/dokode/bmegane1.jpg); /* ヘッダー画像のURL（変更したい場合はここを変えてください） */
background-repeat:no-repeat;
background-position: left top; /* ヘッダー画像を左上にひとつだけ置いています */
line-height: 1.3; /* 行間 */
padding: 0px;
margin: 0px 0px 10px 0px;
}

説明にも入ってますが、URLを変えるだけです。
画像のサイズは幅が800px以下ならなんでも構いません。
ぴったり合う必要はないので（もちろんぴったりでもOK、あとこのテンプレ自体、幅変更も簡単に出来ますので……この記事参照、サイズは何でも構わないのです）、適当な大きさの好きな画像を、ご自分のブログにファイルアップロードでUPしてください。
そのURLに書きかえます。（URLはアップロード画面で、画像のサムネイルをクリックすればわかります）。

上では
height: 196px; /* ヘッダーの高さ */
と設定してありますが、UPした画像の高さにあわせてここも書き換えてください。
これで左上端にあなたのUPした画像が表示されたはずです。

background-repeat:no-repeat;
background-position: left top; /* ヘッダー画像を左上にひとつだけ置いています */

この部分で画像を繰り返さず、左上にひとつだけ置くという設定をしています。
このleft topをright topにすれば右上端に画像を置けます。
centerにすれば、中央に置けます。
（ぴったりサイズでヘッダーのバナーを作った方は指定は何でも構いません）。

※他にも指定は色々あります。
right bottom（右下）
left bottom（左下）
center bottom（中央下）
center top（中央上）

もっと細かく指定したければ……
background-position:●% ●%;

●のところに色々入れてみると、位置が変わりますよ。
たとえば100% 0%ならright topと同じ指定をしたことになります。

さて、画像を置いた位置によって、ブログのタイトルや説明文の位置も加減してください。

/* ブログタイトル */
h1{
text-align: right; /* 右寄せ */
font-family: Verdana,Chicago,Arial,Helvetica,Osaka; /* タイトルのフォント */
font-size: 18px; /* タイトルの大きさ */
color: #000; /* タイトルの色 */
font-weight: bolder; /* タイトルの太さ */
margin: 0px;
padding: 120px 20px 0px 20px; /* ブログタイトルの位置、上・右・下・左の順に記述 */
}

/* ブログタイトルのリンク設定 */
h1 a:link, h1 a:visited, h1 a:active{
color:#000;text-decoration: none;
}
h1 a:hover {
color: #ccc;text-decoration: underline;
background: transparent; /* 背景透明 */
}

/* ブログ説明文 */
h2{
text-align: right; /* 右寄せ */
font-size: 13px; /* 説明文の大きさ */
color: #666; /* 説明文の色 */
font-weight: normal; /* 説明文の太さ */
margin: 0px;
padding: 10px 20px 0px 20px; /* 説明文の位置、上・右・下・左の順に記述 */
}

text-align: right;を
text-align: left;にすれば、字が左寄せになります。
text-align: center;で中央に配置されます。
paddingは余白を示していると思ってください。ここの数字を適当に変えてみて、画像の大きさや配置とのバランスを取ってください。

需要があるようなら、次回に続きます。