メニュー作りの失敗談 ～Blogger テンプレートを作るよ！ (6)～

こんばんはー！

前回は、ブログに説明を追加しましたが、まだブログらしくないですね。今回はメニューを追加してみます。
（前回：『ブログの説明を入れてみる ～Blogger テンプレートを作るよ！ (5)～』）

メニューの内容を考える

メニューがあれば、このブログにどんなコンテンツがあるの分かりやすくなり、見たい情報にアクセスしやすくなりますよね。

現状ではこの制作日誌しか書いておりませんので、 『ホーム』 と 『制作日誌』 くらいでしょうか。 あとは Blogger のお役立ちネタを思いついたら載せたいので、 『Blogger Tips』 なんていうのもありかもです。

あと将来的には完成品を公開する場所が欲しいです！　完成品を公開する場は、できれば静的なページを使いたいです。作品を公開したり、一度公開した作品の修正等を行ったときには 『更新情報』 なんてカテゴリも欲しいかもしれません。

メニューの内容

• ホーム （トップページ）
• 更新情報 （ラベル検索『更新情報』）
• 制作日誌 （ラベル検索『制作日誌』）
• Blogger Tips （ラベル検索『Blogger Tips』）

メニューは cross-column セクションにページリストを追加すると現れるようですので、試験場で試してみます。

メニューの動作テスト１　（ラベルリストをメニューにする）

メニュー項目の中身は記事であってページではありませんが、メニューに使用できるのはページリストですよね。

できることなら、表示される記事のカテゴリをタブで切り換えるようなメニューが希望です。ようは、ページリストではなくラベルリストを使いたいのが本音です。

というわけで、ラベルリストを cross-column セクションに設置してみたところ、これでもメニュー風の表示になることがわかりました。

ただ、ボタンをクリックしてラベルのページに飛ぶと、ボタンの表示が少し残念なことになってしまいました。

表示中のボタン（一番左） の表示が崩れている

早速テンプレートの中身を見て調べてみると、<skin> 内の css ではこのセクション内のウィジェットの <li> 要素の中の <a> 要素に対して、ボタンっぽい見栄えになるように書かれていました。

ラベルリストでは、ラベルの検索ページを表示をしているとき、そのラベルの <a> 要素が <span> 要素に切り替わることでリンクしなくなります。また、ページリストでは <li> 要素に selected クラスが追加されますが、ラベルリストでは追加されません。

そのため、表示が変に見えるんですね。

他にも、ラベルリストは設定でラベルごとの投稿数を表示するようにできるのですが、その場合に投稿数がボタンの外に表示されてしまうという問題もあります。

通常時は一見問題ないように見えるが、投稿数はボタンに含まれていない。
ボタンにカーソルを合わせて反転させてみると、そこだけ反転されないことが分かる

私は投稿数を表示させないつもりですので問題ありませんが、気になる人は気になるポイントですね。

メニューの動作テスト２　（ページリストでラベル検索する）

ページリストでも URL を指定すればラベル検索ボタンになることがわかりました。

ウェブアドレスに、 『ブログのトップページのURL/search/label/ラベル名』 を指定します。日本語などの場合はパーセントエンコードが必要になります。やはり用途外の使用方法なので、ラベルガジェットよりは手間が増えてしまいます。

ラベルの検索ページの URL をウェブアドレスとして登録すると
ページガジェットでラベルガジェットのような使い方ができる

きちんとラベル検索ができてほっと一息。ところが、ボタンを押してページが変わっても押された状態になりませんでした。ページはきちんと切り替わっているのですが、ちょっと気になりますよね。

各ガジェットの <b:widget> で selected か否かの判定をどうやっているのかを調べてみると、ページガジェットでは data:link.isCurrentPage の値の中身が false （偽）になっているようでした。この値を入れているのは Blogger 側なので、どんな処理をして偽になっているのかはわかりません。

対するラベルガジェットでは selected か否かの判定が data:blog.url == data:label.url の条件式で判定していました。

この方法だと現状ではちゃんと判定してくれています。つまり data:link.isCurrentPage が偽になったとしても、 data:blog.url == data:label.url で真になったらボタンを押された状態にする、と変更すれば良さそうです。

実験！ テンプレートを書き換えてみる

このブログ内で初めてテンプレートの編集を行います。初オペです。でもガジェット内なので、ガジェットを削除して追加したら戻ってしまう場所です。

[テンプレート] の [HTMLの編集] を押し、[ウィジェットへ移動] から PageList○○ という名前の者を探します。

[ウィジェットへ移動] を押すと登録されているウィジェットのIDが表示される

PageList が複数ある場合、どれか分からなかったら <b:section class='tabs' id='crosscol' ～～> の中にあるものを探してください。

省略されている行は行番号のあたりをクリックすれば展開されますので、 <b:widget> と <b:includable id='main'> を開いて、下の図で画像で色が反転している部分の条件式を変更します。

反転している部分が今回修正する箇所

この部分の条件式に、 「 or data.link.href == data:blog.url」 という一文を追加してみます。

メニューの動作テスト３　（実験の結果）

結果から言います。だめでした。

確認のため、 <b:eval expr="data:link.href == data:blog.url"> を入れてみても、ラベル検索ページでの出力は false (偽) になりました。

さらにチェックするためデータを <data:link.href/> と <data:blog.url/> で出力してみましたが、結果は以下の通りでした。

data:link.href	https://madoug-kobo-test.blogspot.jp/search/label/%E5%88%B6%E4%BD%9C%E6%97%A5%E8%AA%8C
data:blog.url	https://madoug-kobo-test.blogspot.jp/search/label/%E5%88%B6%E4%BD%9C%E6%97%A5%E8%AA%8C

うーん、中身はどちらも変わらないように見えます。なぜこれを比較して不一致と判定されるのか……。もうお手上げです！

もしかしたら、 data:link.isCurrentPage の値の中身が偽になるのも、 Blogger 側でも同じ判定をしているからかもしれません。

結論

ページリストを利用したメニューは私の用途には向かず、対策もしようがないことが分かりました。

それならばいっそ、ラベルリストをメニュー用に改造してみようとます。次回は、その方法について考えてみます。