さて前回までで一応全体のカスタマイズが
出来るのですが、思い通りとまでは行きません。
第５回となるファンブログのカスタマイズ、
今回はある程度自在にカスタマイズするための
補足編（その１）となります。

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

今回説明するのはCSSとHTMLの関連性です。

まずＣＳＳとＨＴＭＬはどのように結びついているのか？

ＣＳＳはＨＴＭＬ内に書くことが出来るのは
以前説明したかと思いますが、
通常わけて書かれます。
そのファイルを示すものが次のタグです。

＜link href="https://fanblogs.jp/burikama/style.css" rel="stylesheet" type="text/css" /＞

これは「https://fanblogs.jp/burikama/style.css」を呼び出しています。
なので「style.css」に書かれている内容が反映されるわけですね(^^♪

まあファンブログでは管理画面で出来るので
気にする必要はありませんが。。。

ようはこの「style.css」を管理画面で書き換えているのです。

ではＣＳＳとＨＴＭＬを結ぶカギを説明します。

ご自分のブログのソースを表示させてください。
表示のさせ方はもうご存知ですね？
右クリックですよ(^^♪

そしたら以下に注目してください！

＜body id="multi"＞
＜div id="container"＞
＜div id="header"＞
＜h1 id="blogTitle"＞＜a href="https://fanblogs.jp/burikama/"＞ブリカマ日記＜/a＞＜/h1＞
＜div id="blogDesc"＞わがまま？親父の独り言。＜/div＞
＜/div＞＜!-- /header --＞
＜div id="main" class="clr"＞

タグそのものと、タグの属性に「id」というのと「class」というのがあると思います。
これがＣＳＳとHTMLを結ぶカギなのです。

さてＣＳＳを見ますと、、、

.clr:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

/* 背景 */
html {
background:url(https://fanblogs.jp/burikama/file/313/g2-DYoNOqsw.jpg);
}
/* 文字色 */
body {
color:#333;
}

/* リンクの色と装飾 */
a:link { color:#CC0000;text-decoration:underline; }
a:visited { color:#FF8888; text-decoration:underline; }
a:hover { color:#FF8888; text-decoration:none; }
a:active { color:#FF8888; text-decoration:none; }

/* コンテナ */
#container {
background:url(https://fanblogs.jp/burikama/file/313/mGf_mA.gif);
margin:0;
padding:0;
}
/* ヘッダー背景 */
#header {
background:url(https://fanblogs.jp/burikama/file/313/g3eDYoNfgVug6w.jpg) top no-repeat;
width:880px;
height:275px;
margin-top:0;
padding-top:0;
}

まず記述の説明をします。

基本は

11111 {
222:333;
}

となります。

1の部分が定義したいものの名前
2の部分がやりたい事
3の部分が調整値
です。

では定義したいものの名前書き方です。

何も左側に書かず

div {
????
}

と書くと、
ＨＴＭＬ内にある＜div＞タグ全てに???に設定した内容が
反映されます。
この書き方はタグに指定する方法です。

次に

# header{
????
}

とやった場合は？
これは「id」に対する設定です。
上記の場合は「id="header"」となっている部分に
????の設定がされるわけです。

そして

.clr{
????
}

とした場合です。

これは「class」に対する定義です。
同じく????が設定されます。

上記ＣＳＳでは「:after」というのがついてますが、
ここではその説明は割愛させていただきます。


と、いうことでＣＳＳとＨＴＭＬのつながりがわかったでしょうか？

つながりがわかったとして、もうひとつの書き方です。

/* ブログタイトルと説明文 */
h1#blogTitle a {
padding-left:35px;
color: #CC0000;
}

このようなＣＳＳもあります。

これはどういうことか？

＜ｈ1＞タグの中にあるタグに属性「id="blogTitle"」タグ
の中にある＜a＞タグに設定しなさいと言う事。。。
言葉ではわかりにくいですね(-_-;)

以下のようなＨＴＭＬですね。

＜h1 id="blogTitle"＞＜a href="https://fanblogs.jp/burikama/"＞ブリカマ日記＜/a＞＜/h1＞

さて問題です。
ＣＳＳには＜ｈ1＞タグから名前の定義をしてありますが、
上記説明からすれば「#blogTitle」から定義すればよいのでは無いでしょうか？
何故＜ｈ1＞タグから指定してあるのでしょうか？

・・・

答えは名前の定義は違うタグにも使えるからです！

ここでは＜ｈ1＞タグのみ出ていますが以下ではどうでしょうか？

＜h1 id="blogTitle"＞＜a href="https://fanblogs.jp/burikama/"＞ブリカマ日記＜/a＞＜/h1＞
＜div id="blogTitle"＞
＜a href="http://fanblogs/burikama/"＞ブリカマ日記＜/a＞
＜/div＞

「#blogTitle」と定義している場合は＜ｈ1＞タグと＜div＞タグ
両方に設定されてしまいますね(^^ゞ

なので、＜ｈ1＞タグから指定してるんですね。
だからこれを利用すれば、、、
全体的にはこの設定を、部分的にはこの設定をと
言うのが出来るわけです(^^♪

このようにＣＳＳは定義していきます。

基本的に連続して書けばより詳細に設定できると言う事です。

細かい事は専門に説明しているページを検索してみてください。
この記事に書いてあることが理解できれば専門に解説
しているページもある程度わかるはずですから(^O^)／

さて、なんとなくわかりましたでしょうか？
長くなったので今回はここらへんにします。


これで関連がわかれば、今まで説明した背景などの
画像の変更、色の変更を好きな場所に設定できるはずです(^。^)
ＨＴＭＬに書いてあるタグ名、ｉｄ、classから
ＣＳＳのどの部分をさわれば変わるのかが、わかるはずですからね(^^♪

ちょっとわかりにくい文章になったかも知れません。。。
不明点はどんどんコメントしてくださいね(^O^)／

次回は･･･お題はこれから考えます(-_-;)