ブログの目次の作り方３

まず、その前に・・・
<div>と、CSSをどう関連付けるかですが、超簡単！

HTMLには、
<div class="hyo">

CSSには、
.hyo {***************}

おわり。
簡単でしょ。
これだけで、***************の内容を、<div>内に適用します。



では、これまでと同様、このブログの目次を例にとって解説していきましょう。

まず、外側から。
（実際に、画面を上にスクロールして目次を見ながら進めてくださいね）

いちばん外側は、＜SEO対策！人気ブログの作り方！最新５記事＞から、お気軽にご入室下さいまで、それとその外側の囲み線です。

HTMLは
<div class="free_Mokuji">
**********
</div>

CSSは、
.free_Mokuji {
width : 490px; text-align: left;
font-size: 13px;
background-color:#FFFFFF;
padding: 5px;
margin: 0px 0px 10px 0px;
color: #666666;
border: 1px solid #ccc;
}

です。

width : 490px; ・・・目次の幅、”100%”でもOK
text-align: left;・・・字を左詰めに
font-size: 13px;・・・字の大きさは１３ｐｘ
padding: 5px;・・・枠線から文字までの余白
margin: 0px 0px 10px 0px;・・・枠線までの余白
border: 1px solid #ccc;・・・枠線の太さ、種類、色

ご自分のブログに合うように数値は修正してくださいね。
ちなみに、分りにくいのがpaddingとmarginですよね。
簡単にご説明しますと、
padding・・・枠線からその中の文字までの余白の大きさ
margin・・・枠線から、その外側にある他の<div>までの余白

また、これについては、リクエストがあれば解説したいと思います。



どうですか、ここまで理解できていますか？
ここまで理解できれば、後はその組み合わせなので、比較的簡単です。



微妙でしたら、以下をそのままコピペしていじってみてくださいね。

<div class="free_Mokuji">
もくじだぞー！！
</div>

↑これをコピーして、HTMLの<!--topentry-->の上に貼り付ける。




.free_Mokuji {
width : 100%; text-align: left;
font-size: 13px;
background-color:#FFFFFF;
padding: 5px;
margin: 0px 0px 10px 0px;
color: #666666;
border: 1px solid #ccc;
}

↑これをコピーして、CSSの１番下に貼り付ける。

んで、それぞれ更新を押してみてくださいね。
あ、その前にバックアップを忘れずに！



ポチポチッとしてくれたら、応援しに行きますよー！
人気ブログランキング
ＦＣ２ブログランキング
にほんブログ村