晴れ時々曇り

以前の私のブログは色だけであまり楽しそうではありませんでした。そこでスタイルシートの変更にチャレンジしてみたのです。
以下に私のスタイルシートの変更方法を書きます。
参考にされる前に一言、以下の内容は自己責任にて実施の事。
不具合など発生しても私は一切責任を負いません。

それでは自分の風ブログのトップページを開き、マウスで右クリックしてソースの表示を選択してください。
するとソースがメモ帳で開かれます。開かれたソースの中から以下の部分を探してください。
＜link rel="stylesheet" href="http://xxxx.kazelog.jp/xxx/styles.css" type="text/css" /＞は書かれている部分(xxxxは皆さん違います、自分の物に変えてください)
次にそのhttp://xxxx.kazelog.jp/xx/styles.cssをアドレスバー(上のアドレス(D)と書かれているところ)にコピーしてstyles.cssを開きstyles.cssを開きます。
たぶん開くとそのままダウンロード画面になると思います。（ホームページ作成ソフトFrontPageなどお持ちの方はソフトが立ち上がってしまう事があります）そのソースをメモ帳などにコピーしてお使いください。

ダウンロードしたstyles.cssをメモ帳などで開き、必要な項目を記入し保存します。（ここでstyles.cssに別の名前を付けて保存すると便利です）ここからは区別するためにxxx.cssとします。
※注意・・・ここでは必ず元のstyles.cssは別に保存して置きましょう。(万が一の為)
保存が完了したら次にコントロール→ファイル→先程のディレクトリー(入れ物)私で言えばwinのディレクトリーの中にstyles.cssをアップロードします。（styles.cssの名前を変えない場合は元のstyles.cssが入っているディレクトリーに入れると上書きになってしまいます。注意してください。）必ずどこにアップロードしたか控えておいてください。入っている場所が解らないと、後でxxx.cssを指定出来なくなってしまいます。(アップは何処でも構いません)
(アドレスを控える)ファイルからは画像と違ってどこにあるか表示されません。
2005/4/11のバージョンアップで表示される様になりました。m(_ _)m

※注意・・・今度作ったstyles.cssの名前も覚えやすい名前に変えておきましょう。

*****改造(変更箇所)*****以下の部分を探して変更してください。
変更箇所は/**/の部分です。
※color: #xxxxxxの部分は色の指定です。自分の好きな色を指定してください。
※font-familyはフォントの種類・font-sizeはサイズ・font-weight文字間・line-height行間・text-align文字を揃える方向・margin-bottom枠からの上の離れです。
※下の方にカラーチャート（色見本）へのリンクを貼ってあります。
　　参考にしてください。

①本文の文字サイズ
<変更前>
.content p {
color: #333333;
font-family: Georgia, Times, serif;
font-size: small;
font-weight: normal;
line-height: 150%;
text-align: left;
margin-bottom: 10px;
}

<変更後>
.content p {
color: #333333;
font-family: MS UI Gothic, Times, serif; /*フォントの指定*/
font-size: medium; /*フォントサイズの指定*/
font-weight: normal;
line-height: 150%;
text-align: left;
margin-bottom: 10px;
}

②タイトルの背景に画像を入れる
<変更前>
#banner {
font-family: Georgia, Times, serif;
color: #FFFFFF;
background-color: #869BB0;
text-align: left;
padding: 15px;
border-bottom: 1px dashed #FFFFFF;
height: 69px;
}

<変更後>
#banner {
font-family: Georgia, Times, serif; /*フォントの指定*/
color: #FFFFFF;
background-color: #597FA3; /*背景色指定背景画像に近い色に変更*/
background-image:url(http://xxxxx.kazelog.jp/xxx/images/xxxx.jpg); /*背景画像のアドレスを指定*/
background-repeat: no-repear; /*背景画像は繰り返さない指定*/
text-align: left;
padding: 15px;
border-bottom: 1px dashed #FFFFFF;
height: 150px; / * 画像の高さ */
}
注意・・・画像の高さを記入する、繰り返さないも記入すること。

③タイトルの前にアイコンを付ける
<変更前>
.content h3 {
color: #6699CC;
font-family: Verdana, Arial, sans-serif; /*フォントの指定*/
font-size: small;
text-align: left;
font-weight: bold;
margin-bottom: 10px;
}

<変更後>
.content h3 {
color: #DC143C;
font-family: MS UI Gothic, Arial, sans-serif; /*フォントの指定*/
font-size: medium; /*フォントサイズの指定*/
padding:10px 0px 10px 40px; /*余白を設定 */
background-image: url("http://xxxxx.kazelog.jp/xxx/images/xxxx.gif"); /*アイコン画像のアドレスを設定*/
background-position: topleft; /*左寄せの設定*/
background-repeat: no-repeat; /*画像は繰り返さない指定*/
text-align: left;
font-weight: bold;
margin-bottom: 10px;
}

注意・・・padding:10px 0px 10px 40px;でアイコンを入れた時の周りとの余白を調整する。
　　　　　pxは上右下左の余白の順番です。画像は繰り返さない指定をしないとアイコンだらけになってしまいます。
最後にアップロードしたxxx.cssを使う設定に変更します。
ウェブログ→設定を変更する→ウェブログの副題（キャッチフレーズ）：の欄に下記を追加します。
＜link rel="stylesheet" type="text/css"href="http://アップロードしたxxx.cssのアドレス記入"/＞
以上でスタイルシート(styles.css)は変更になっていると思います。だめならもう一度はじめからやってください。m(_ _)m
よくスペルの書き間違いがあります、落ち着いて記入してください。
(不明の点はスタイルシート css などで検索をかけてみてください。丁寧に説明されているページがあります。)
※晴れ時々曇りのカラーチャートです参考にしてみてください。

■ＣＳＳには余計な改行はしないでください。・・・それではがんばってね !!