メニューを階層構造にする ～Blogger テンプレートを作るよ！ (20)～

こんにちはー！

さーて、記念すべき本シリーズの20回目は～……

（ジャカジャカジャン！）

またもメニューについてです。

メニューを階層構造にする

メニューに普通にページガジェットを表示してもいいんですが、できればこんな感じに表示したいというのが理想です。

• ホーム
• 制作日誌
• 更新履歴
• 作品紹介
• Blogger テンプレート
• まどうぐ Blogger Template
• ダウンロードリスト
• サイトマップ

リストのタイトルに階層番号を付ける

先ほどの例でいえば、まず例えばメニューの先頭には 『ホーム』 のページだけを追加したページリストを置き、次にラベルリストで 『制作日誌』 等を並べ、次に 『作品紹介』 だけのページリストを追加します。

このとき、 『ホーム』 だけのページリストの名前の先頭に 『[level1]』 と付けます。同様に、その後にあるラベルリストには 『[level2]』 を付けます。その次の『作品紹介』 のページリストには 『[level1]』 と付けます。この level〇 の数値で階層の深さを表します。

そんな風に、上から順に一個一個名前を変えたリストを作っていくと、メニューのガジェットがこんなことになります。

そして、それらをきれいに並べて表示できるように css を書いて……見ようと思ったんですが、<h2> 要素の中身に書かれているテキストによってデザインを変えるなんて css は存在しませんでした。

メニュー項目を追加するたびにテンプレートを書き換えるのはなんだか面倒だなぁ……と思ったので、 javascript を使って動的に書き換える方法を使ってみました。

というわけでサクッと作りました。 navigation セクションの後に、このコードを挿入します。

<script>
//<![CDATA[
var menu = document.getElementById("navigation");
var navs = menu.querySelectorAll(".widget");
for (var i = 0; i < navs.length; i++)
{
  var nav = navs[i];
  var h2 = nav.querySelector("h2");
  if (h2 == null) break;
  var name = h2.textContent;
  if (name == null) break;
  var labels = name.match(/^\[level\d+\]/i);
  if (labels == null) break;
  nav.classList.add(labels[0].slice(1,-1));
}
//]]>
</script>

このコードを入れることで何が起こるかというと、先ほどリストのタイトルに入れた [level1] とかを読み込んで、それぞれのウィジェットのクラスに level1 とか level2 とかを勝手に追加してくれます。 [level1] とかが無ければ何もしません。

そうしたら、あとは level1 とか level2 とかのクラスがあるウィジェットに対して、メニューっぽい外見になるようにスタイルを変更しましょう。

.navigation .level1 {
margin: 0;
padding: 0;
font-size: 18px;
}
.navigation .level1 h2 {
display: none;
}
.navigation .level1 ul {
list-style-type: none;
padding: 0;
}
.navigation .level1 ul li {
padding: 1em 0;
}
.navigation .level2 {
margin: 0;
padding: 0 0 0 0.6em;
border-left: #c0c0c0 4px solid;
font-size: 18px;
}
.navigation .level2 h2 {
display: none;
}
.navigation .level2 ul {
list-style-type: none;
padding: 0;
}
.navigation .level2 ul li {
padding: 0.5em 0;
}
.navigation .level3 {
margin: 0;
padding: 0 0 0 0.6em;
border-left: #c0c0c0 4px solid;
font-size: 18px;
}
.navigation .level3 h2 {
display: none;
}
.navigation .level3 ul {
padding: 0 0 0 0.6em;
border-left: #c0c0c0 4px solid;
list-style-type: none;
}
.navigation .level3 ul li {
padding: 0.2em 0;
}

これでこんな感じの外見になります。

階層がなんとなくわかる。かも！

これで一応 『階層っぽく見える』 メニューができました！　なんかいい感じです！

ただし、ソースコードが読める人が見れば、「何だこりゃ！？」と言いたくなるような応急処置の塊です。ううむ。

ちなみに javascript を使わずにやるのでしたら、navigation の <b:section> に入っている <b:widget> の class に level〇 を書き足してください。人力でやればスクリプトは不要です。

階層構造が作れて HTTPS 対応のページリストガジェットがあれば便利なんですけどね～。探せばあるのかな？

ページリストやラベルリストをたくさん作る必要があるのが何とも不便な感じです。

リスト名のタイトルに親の項目名を付ける？

今回のメニューを作っている途中で、一つ気が付いたことがあります。

どうせ javascript を使用するなら、もう少し運用を楽にすることができるんじゃないかな～と。

たとえば、先ほどの例で 『[level2] ラベル』 という名前を付けたラベルリストがありますね。そのラベルリストの名前を 『ホーム』 に変えちゃいます。

javascript でラベルリストやページリストを検索して、まずそのリストの名前と同じ名前を持つ <li> 要素があるかを探します。そして、あったならその <ul>～<ul> の中に今のリストを移動させちゃうんです。

この方法であれば、『ホーム』『作品紹介』『ダウンロードリスト』『サイトマップ』は一つのページリストで全て纏められますし、<ul> がきちんとした順序になるので 「階層っぽく見えるだけ」 から卒業することができそうです。

よーし！次回はその方法を試してみよう！