ブログカスタマイズの雑談BLOG

前回の記事＜■グローバルナビゲーションを付ける＞では、Seesaaブログに「グローバルナビゲーションメニュー」を設定する方法を説明しました。
まあ、私自身が使用しているナビの紹介、って感じなんですけどね。



前回の記事ではCSSとHTMLのコードを紹介した後に「お好きなようにコードを編集してください」と書いたんですが、いきなり「編集しろ」と言われてもよくわからないと思いますので、少しだけ説明します。

グローバルナビのHTMLコードを自分のブログに合うように編集

前回の記事で掲載したグローバルナビは、あくまでも「例」です。例えば、の話なので、ご自分のブログに合うように構成を変更して使ってください。
コードには親メニューや子メニュー、孫メニューを設定していますので、タグを理解していないと混乱すると思います。開始タグと終了タグの位置を間違えないようにしてください。



グローバルナビゲーションはリストタグ「ul」や「li」を多用します。
子メニューや孫メニューを入れる場合は、終了タグの位置が1つずつズレていきます。
理屈がわかるとどんな形のメニューも作れるようになると思いますので、とりあえず頑張って説明してみますｗ

基本的なナビコード

まずは、このカタチを理解してください。
この画像は「親メニュー」だけを抜き出したものです。





開始タグ「<div id="navi-bar">」と終了タグ「</div>」の中に、開始タグ「<ul id="dropmenu">」と終了タグ「</ul>」が入っています。 そしてこの「ul」の中に、開始タグ「<li>」と終了タグ「</li>」が入っています。


「<div id="navi-bar">」はナビ全体の外枠です。単なる境界線だと思っていてかまいません。ブログの他のパーツ（ヘッダーとかコンテンツなど）との境界線と考えてください。


HTML上でリスト表示を記述する場合、リスト表示したい項目に「<li>」タグをつけて「<ul>〜</ul>」または「<ol>〜</ol>」の間に記述します。
「ul」はリスト項目に順序を付けない場合に使用するタグです。今回は順序を付けるわけではないので（1、2、3のように数字を付けて表示するわけではないので）この「ul」を使用します。



リスト表示のコード記述（基本）



これがリスト表示の記述です。
上記の画像は、「div」の枠の中にこのリスト表示の基本記述を入れ込んだことになります。
「div」の名前は「navi-bar」です。
「navi-bar」という「div（外枠）」の中に、「<ul id="dropmenu">」というリスト記述が入っていることになります。（「ul」にid名を付けているので表記は「<ul id="dropmenu">」になっています）
そして、ナビの枠「ul」の中に、リスト「li」が5個入っています。



リストの開始タグ「<li>」と終了タグ「</li>」で挟んでいる言葉が、実際のページのナビメニューに表示される言葉です。
リストは何個でも設定できますが、このナビメニューでは親メニューは5個の設定ですので、A〜Eの5個を記述します。
つまり、実際のページのナビメニュー上で見えているのはリストタグ「li」の記述だということです。
ということは、子メニューや孫メニューもリストタグで記述するということになりますね。（メニュー上で表示される「言葉」の部分はリストタグで設定している部分ですからね）



ナビメニューの基本はこのカタチです。
外枠の中にナビの枠、その中にリストの枠が入ります。（リスト枠は5個）
ナビメニューとして「親メニュー」だけを使用するならば、このタグ記述で完成です。

子メニューを設定する場合のナビコード

しつこいですが、基本形は上記のコード記述です。
外枠の中にナビの枠、その中にリストの枠を入れます。
上記では「リストの枠」というのは「親メニュー」を指していました。



では、「子メニュー」を設定したいと思います。
基本形はそのままです。
外枠の中にナビの枠、その中にリストの枠です。


で、「子メニュー」を設定する場合は、「リストの枠」の中に「子メニュー」の記述をします。
「リストの枠」というのは「親メニュー」を指していますから、「子メニュー」は「親メニュー」の枠の中に記述することになります。




この「親メニューA」の中に、「子メニュー」のコードを記述します。
「子メニュー」のコードは「親メニュー」のコード（基本形）と同じです。
開始タグ「<ul>」と終了タグ「</ul>」の間に、「子メニュー」のリスト「<li>」と「</li>」を入れます。



子メニューのリスト表示


この「子メニュー」の基本形のコードを、「親メニュー」のコードの中に記述します。


気を付けなければいけないのは、「親メニュー」の終了タグ「</li>」の位置です。
「親メニューの中に子メニューが入っている」という記述にしなければいけませんので、「親メニュー」の終了タグ「</li>」は「子メニュー」の記述の後ろに配置します。（「子メニュー」を挟み込む、というイメージになります）






「子メニュー」が入った表示は、こんな感じになります。

孫メニューを設定する場合のナビコード

「子メニュー」の記述の仕方がわかれば、「孫メニュー」の記述の仕方も理解できると思います。「孫メニュー」を記述したいならば、「子メニュー」の中に「孫メニュー」を挟み込めばいいです。
ただし、この場合も「子メニュー」の設定の時と同じく、終了タグ「</li>」の位置に気を付けてください。
「子メニュー」の中に「孫メニュー」のコードを入れ込みますので、「子メニュー」の終了タグ「</li>」は「孫メニュー」の記述の後ろに配置することになります。

グローバルナビゲーションのHTMLコード（再掲）

ナビメニューの編集の仕方を説明してみましたが、なんか、説明下手ですみません。
タグの意味がわからないと編集できないだろうなぁと思って記事を書いてみたんですが、ますますわからなくなったかもしれないですね。
何というか、とりあえずリストタグの終了タグ「</li>」の位置に注意してね、ってことしか言えないです。
頑張ってご自分のブログに合うように編集してください。






ここでは念のため、前回の記事で紹介したグローバルナビゲーションメニューのHTMLコードを再掲しておきます。
前回の記事とは異なり、わかりやすいように色分けしてみましたので、上記の内容の参考にしてください。


＜グローバルナビゲーションメニュー＞




次の記事の紹介

次の記事では、Seesaaブログにパンくずリストを付ける方法を説明します。