HTMLパーツからHTMLタグへ 【ヘッダー編５】

ども、サンデーアマグラマーNorimakiです。

とうとう、ヘッダー編もパート５になってしまいました。
ちゃっちゃと説明できれば良いんですが、中々上手く説明できずに
こんなにかかってしまっています。

さて、前回の続きになるわけですが、どこまで行っていたかというと、

・ヘッダー画像
・サイトタイトル
・サブタイトル
・サイトの説明文
・アフィリエイトバナー
・H1タグ
・ナビゲーション（パンくずリスト・グローバルメニュー
　のようなもの）
・各種リンク

このナビゲーションまで行っていました。
次は、各種リンクからなのですが、ちょいと前回の補足があります。

ナビゲーションについてなのですが、次のようなHTMLをご紹介しました。

<div class="クラス名（PanKuzuまたはGlobalNavi）">
<ul>
　<li class="PL または GL"><a href="URL">リスト</a></li>
　<li class="PL または GL"><a href="URL">リスト</a></li>
　<li class="PS または GS"><a href="URL">リスト</a></li>
</ul>
</div>

基本的にはこれで良いんですが、後々ツールでこのテンプレートを使って
サイトを構築しようと考えていまして、この現在のページをあらわす
ナビゲーションを自動的に設定したいなと思っているわけです。

そこで、ツールを使用する場合には、次のように変更します。
まだまだ先の話ではありますが、とりあえず。

<div class="クラス名（PanKuzuまたはGlobalNavi）">
<ul id="PL3">
　<li class="PL1"><a href="URL">リスト</a></li>
　<li class="PL2"><a href="URL">リスト</a></li>
　<li class="PL3"><a href="URL">リスト</a></li>
</ul>
</div>

何をやっているかというと、ツール側で上記HTMLの赤文字の部分を
ページに応じて自動的に設定します。

あとは、スタイルシートで

#PL1 .PL1{ 設定内容 }
#PL2 .PL2{ 設定内容 }
#PL3 .PL3{ 設定内容 }

みたいな感じで、現在のページであることを設定するとOKです。
よくわからないかもしれませんが、とりあえず、そんな方法が
あったなと、この先ツールの話が出てきたときに覚えておいて
いただければと思います。

えー、各種リンクまで行きたかったのですが、長くなってしまったので
今回はこの辺にしておきます。


ではでは。
Norimakiでした。


無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ