上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログ目次の作り方について
２回書いてます。
今回で３回目です。
まだ読んでない方は、下の２記事を読んでくださいね。
１回目は、
簡単な目次の作り方は、<table>タグを使う。
でも、SEO対策から見ると、あまり良くない。
２回目は、
ブログのSEO対策にもいい目次は、<div>を使う。
ただ、少し難しいので、とりあえずHTMLだけ。
ってことで、今日３回目は・・・
目次の作り方、CSS編です。
<div>タグは、範囲を指定します。
１つのブロックと考えてもいいですね。
ただ、普通の作り方だと縦にしか並んでくれません。
コレをどんな作り方で横に並ばせるかです。
いや、別にむずかしいことではないんですよ・・・
１行加えればOKです。
ポチポチッとしてくれたら、応援しに行きますよー！
人気ブログランキングＦＣ２ブログランキングにほんブログ村
まず、その前に・・・
<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の１番下に貼り付ける。
んで、それぞれ更新を押してみてくださいね。
あ、その前にバックアップを忘れずに！
ポチポチッとしてくれたら、応援しに行きますよー！
人気ブログランキングＦＣ２ブログランキングにほんブログ村
- 関連記事
-
