ドロップダウンメニュー付のナビゲーションバーTips-紆余曲折の記録

QooQをMateriapollo風にするため、下記に紹介した通常のリンクメニューとドロップダウンメニューを備えたナビゲーションバーを利用しています。

メニューの設定でちょっと悩んだり調べたりしたことがありましたので、その課題と対策として具体的な使い方をまとめておきます。

リンクの貼り方（HTMLの記述）
1. ラベルをリンク先としたときの課題
2. ページャのカスタマイズが無効
まとめ

リンクの貼り方（HTMLの記述）

Bloggerがカテゴリーという概念がないとのことで、その代用をドロップダウンメニューでやるつもりです。すなわち、ナビゲーションバーのメニューの表示がカテゴリで、それをドロップダウンするとラベル分類が表れるというスタイルです。

メニューにリンクを貼るには、リンク先をHTMLに書き込みます。例えば、下記の例では、「Home」と左から4番目の「Blogger」にリンクを貼っています。

この時、HTMLはで下記のようにリンク先を書いています。

<ul class='menu-list accordion'>
      <!-- submenuなし-->
      <li><a href='https://rainbowgoblinss.blogspot.com/'><span class='material-icons' style='font-size: 18px; padding-right: .5em;'>home</span>Home</a></li>
      <!-- submenuあり-->
      <li class='toggle accordion-toggle'>
        <span class='menu-link'>Menu2</span>
        <ul class='menu-submenu accordion-content'>
          <li><a href=''>Submenu1</a></li>
          <li><a href=''>Submenu2</a></li>
          <li><a href=''>Submenu3</a></li>
        </ul>
      </li>
      <!-- submenuあり-->
      <li class='toggle accordion-toggle'>
        <span class='menu-link'>Menu3</span>
        <ul class='menu-submenu accordion-content'>
          <li><a href=''>Submenu1</a></li>
          <li><a href=''>Submenu2</a></li>
        </ul>
      </li>
      <!-- submenuあり-->
      <li class='toggle accordion-toggle'>
        <span class='menu-link'>Blogger</span>
        <ul class='menu-submenu accordion-content'>
          <li><a href='https://rainbowgoblinss.blogspot.com/search/label/Bloggerカスタマイズ?'>カスタマイズ</a></li>
          <li><a href='https://rainbowgoblinss.blogspot.com/search/label/Materiapollo風?'>Materiapollo風</a></li>
          <li><a href=''>Submenu3</a></li>
          <li><a href=''>Submenu4</a></li>
        </ul>
      </li>

３行めに「Home」メニューのリンク先、25，26行目が「Blogger」メニューのリンク先を書いています。リンク先のURLは所望の画面を開いたときchromeのアドレス欄に表示されるURLをコピペしています。

３行めに「Home」メニューでは、アイコンをつけることも問題なくできています。

ラベルをリンク先としたときの課題

たとえば、25行目の「Bloggerカスタマイズ」のラベルのリンク先URLはこのようになります。

https://rainbowgoblinss.blogspot.com/search/label/Blogger%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA?&max-results=7

%E3...%BAは"カスタマイズ”がコピペで自動でこの形に変換されるようです。カナ文字で書いても、どちらでもOKでした。

問題は、次の”&max-results=7”（７は一覧の記事数）の記述があると、コードのコンパイル（HTMLビューでの「保存」）でエラーが出ます。

なので、上記のHTMLに載せたように”&max-results=7”を消してURLを張りつけます。これなら、問題なくコンパイルできました。

ページャのカスタマイズが無効

”&max-results=7”を省いたとき、記事の最下部にあるページャは下記のようになります。

カスタマイズして、記事数の区分で並んでいるようにしているのですが、区分数の情報がないので、デフォルトの表現に戻ったのだと思います。

基本がわかっている人ならば、課題でもなんでもないのでしょうけれど、対策（URLに”&max-results=7”を書いてもOKなコード）は海外の記事で見つけました。

How i can include label code in menu

when i include this label url http://dewdropzone.blogspot.com/search/label/English%20Movie?&max-results=24 in this menu code <li><a href='http://dewdropzone.blogspot.com/search/label/

これに倣って、この部分を次のように変更します。

<li><a href='https://rainbowgoblinss.blogspot.com/search/label/Bloggerカスタマイズ?&amp;max-results=7' itemprop='url' title='test'>カスタマイズ</a></li>

すると、次のようにカスタマイズした正常なページナビゲーションになりました。

まとめ

ナビゲーションバーにラベルのリンクを貼るとき、

HTMLの該当する箇所を編集して、リンク先のURLを書き込みます。このとき、リンク先のURLはブラウザのURL欄からコピペすればOKです。
ただし、そのままではページナビゲーションの表示はカスタマイズが適用されません。URLに”&max-results=7' itemprop='url' title='test'”を追加すると、カスタマイズが適用されます。