さあラストスパート！
第４回となるファンブログのカスタマイズ、
今回の変更でページ全体のイメージが変わります〜(^O^)／

ファンブログのカスタマイズ（目次）

さて前回やったヘッダー部分の画像変更。
出来たでしょうか？

残念ながらこれが出来ないとこの回は出来ません。。。
もう一度チャレンジしてくださいね(^O^)／
ttp://fanblogs.jp/burikama/archive/317/0

さて、出来たという方は続きですよ〜(^^♪

今度はこの以下の部分に注目！！

/* 背景 */
html {
background:url(https://fanblogs.jp/burikama/file/313/g2-DYoNOqsw.jpg);
}

もしくは、、、

/* 背景 */
html {
color: #006;
}


もうお分かりですね(^O^)／
背景を変えるには、、、

background・・・のアドレスを変更すれば良いのです(^^♪
backgroundがなく、colorとなっている場合は色で指定してあります。
colorの右にある数字を変えてみるとどうなるかわかると思うので
本来は６桁なのですがここでは省略されています。
色は記事を書くときに文字色を変更したときに出てくる
＜色：＃ff0000＞のところを参考にすれば好きな色に出来るかと。。。
是非試してみてくださいね(^O^)／
あとcolorを画像に変更したい場合は、colorの行を消してbackground・・・
にしてもらえればＯＫですよ〜(^^♪

さて、ここで問題となるところがあります。

背景ってブラウザの大きさで変わりますよね〜？
そう思いませんか？？

heightもwidhtもありませんよね？！

・・・

答えは、背景画像は小さい画像が集まったものになってます(^O^)／

たとえば私のブログなら・・・



この画像を使っています。
背景画像としては結構大きい部類かと・・・

背景画像に関しては、検索すればフリー（無料）で色々画像が
もらえるところがありますので、探してみてください(^O^)／

その際、著作権とかには注意してくださいね＼(-o-)／
注意書きにブログで使用可とか書いてありますので。。。

そうすればわかると思いますが、私が使っている画像の
１/４以下のサイズが多いでしょう。

では前回の記事を参考にして、画像を用意して変更してみましょう！
画像の大きさは気にしなくてもいいですよ♪
それが並ぶことを想像して決めてくださいね(^O^)／

さて、背景の変更が上手くいった方は、
もうブログの見た目が全然違うものになっていると思います(^^♪

でも細かい部分、記事のタイトル部分であったりが
まだスキンと同じはずです。

ではここからは自分でそれを探して変更する方法です(^O^)／

ご自分のブログを表示させて右クリックして、
前回を参考にソースを表示させてください。

表示されたソースの変更したい部分にある文字列を
ソースの中から探してください。

私のブログであれば、プロフィール部分の「私の秘密♪」を
見つけ出します。

そうすると、、、

＜td class="side_title"＞私の秘密♪＜/td＞

という部分が見つかりました。

さて属性という言葉を覚えてますでしょうか？
タグの中に「class」という属性がありますね。

これは色々使われますが、どのＣＳＳ使うかって
いうのにも使用されています。

なのでこれを発見したら、今度は管理画面から
ＣＳＳを見て、「class」に指定されている、
「side_title」を探してください(^O^)／

以下は私のブログのＣＳＳです。

/* サイドバーのタイトル部分 */
.side_title {
background:url(https://fanblogs.jp/burikama/file/313/g4GDaoOFgVuDXoNDg2eDi3uA.jpg) no-repeat left;
height:20px;
padding: 3px 0 3px 35px;
color: #006600;
font-weight: bold;
font-size:120%;
}
.side_title a {
color: #006600;
}

あれ？「side_title」が２つありますね〜(^_^;)

これはＣＳＳは指定されたタグに中のタグに
個別で設定できるようになっているからです。

どういうことかと言うと、、、

＜td class="side_title"＞私の秘密♪＜/td＞
となっている場合は上の段の「side_title」が設定されます。

＜td class="side_title"＞
＜a href="https://fanblogs.jp/burikama/"＞私の秘密♪＜/a＞
＜/td＞
となっている場合はこの「class」で指定されているタグ全てに
ＣＳＳの「side_title」が設定されて、その中にある
＜a href="https://fanblogs.jp/burikama/"＞私の秘密♪＜/a＞
の部分に「side_title a」が設定されます。

ようは「class」は＜td＞に設定されていますよね？
＜a＞には設定されていません。
でも＜a＞の部分だけ文字の色を変更したいのです。

さてどうするか、、、

ということで「side_title a」と書くことにより、
「side_title」に指定されているタグの中に
＜a＞があったらこの設定にしてね！って
書き方なのです。

と、ちょっと脱線しましたが、指定の場所の
画像を変更しましょう！

ヘッダー画像には大きさが指定してありましたが、
ここには「height:20px;」と高さしか指定されて
いません。

なので高ささえあわせればいいのですが、
あまりにも大きさの違うものを設定すると変に
なる場合があります。
文字と画像を重ねたい場合は幅の大きい
画像が良いでしょう。

これはデザインありきなので、色々なサイズで
試してください！
プレビューを繰り返せば安心して出来ますし(^O^)／

やり方としては、はじめに試したい画像を
いくつも用意して、画像の記事を作って下書き
しておいて、何度も試すと良いでしょう。

これでブログの画像はほぼ思い通りに変更できるように
なるはずです(^O^)／

どうぞ試してみてください(^^♪

今回でほとんどが変更できるようになったわけですが、
まだまだカスタマイズできる部分は多いです。

なので次回は補足編となります。
具体的には文字の色とか、タグをもう少し詳しく
説明したいと思います。