ブログのSEO対策、目次の作り方２

まず、<div>って何？？って方のために。
知ってるよ！って方は、飛ばしてくださいね。



<div>は、ブログ（ホームページ）を作る時の、範囲を指定するものです。

例えば、
<div>
なんだかんんだ
ここはフリースペースです。
あーだこーだ
</div>

と書くと、<div>から</div>までがフリースペースですよ。って意味です。

だから、
<!--index_area-->
<div>
なんだかんんだ
ここはフリースペースです。
あーだこーだ
</div>
<!--/index_area-->

とすると、
「TOPページにのみ、フリースペースを表示します」
ってことになります。




さて、では具体的に<div>をつかって、目次を作りましょう。

私の場合、全体構造としては・・・

<div class="free_Mokuji">
範囲１
<div class="mokuji_hyo">
範囲２
<div class="hyo_left">
範囲３
</div>
<div class="hyo_right">
範囲４
</div>
</div>
</div>

となっています。
ややこしいでしょ。
大丈夫、解説します。


実際に、私の目次（上の方）を見ながら、読んでくださいね。
まず、範囲３，４ですが、
＜SEO対策！人気ブログの作り方！もくじ＞
のすぐ下の部分です。
左側が範囲３、右側が範囲４です。
んで、その範囲３，４を範囲２の中にいれてます。
そのすべては、範囲１の中です。

図にすると、こんな感じです。




何でまたこんなややこしいことにするのかというと、
このように範囲を細かく区切ることで、それぞれの範囲ごとにいろいろ設定できるからなんです。



その設定は、CSS（カスケードスタイルシート）を使います。

ま、CSSのことは、また次回として、今回は上記構造を理解していただいて、終わりとします。
それでは、最後に私の実際のHTMLを書いておきますね。


<div class="free_Mokuji">
＜最新５記事＞
<ul>
ここに、最新５記事を記述
</ul>

＜目次＞
<div class="mokuji_hyo">
<div class="hyo_left">
目次の左表
</div>
<div class="hyo_right">
目次の右表
</div>
</div>
</div>

ちなみに、<div>と</div>は、１つずつ対応してないといけません。
色の違いは、対応してる</div>を表します。

あと、<div>の後の、class="********"で設定します。
コレは、また次回。

お楽しみに。




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