QooQのカスタマイズ；ナビゲーションの横スクロールメニュー化

いまどきのスマートフォンファーストなWEBはメニューをたたんでおいて、閲覧者が必要に応じて参照できるようにするのがあたりまえとなっています。そこで登場するのがハンバーガーメニューと言われるようなアイコンをタッチしてメニューが出てくるものです。

しかし、さほど深く、複雑でないサイト構造なのに、わざわざメニューを出し入れして誘導するほどでもないかと考え、「水の中にはサメがいる！」さんの横スクロールメニュー化をまるっと参考にQooQカスタマイズを行いました。

【QooQ】ナビゲーションの横スクロールメニュー化 | 水の中にはサメがいる！ (mizunosame.blogspot.com)

ナビゲーションメニューにサイト内検索へのリンクをつける

スマートフォンでページを見た際、サイドメニューに入っているサイト内検索は記事の下に回り込み、検索する際にひと手間かかります。そこでサイト内検索へにジャンプするリンクを入れることにしました。手順は下記の通りです。

1. ナビゲーションに新しいリンクを設けるには、設定画面で「レイアウト」＞「ナビゲーション」＞「ページリストの設定」で新しいリンクを作成します。
2. 「ページ名」には「サイト内検索」などナビゲーションに記載する内容を、「ページのリンク」にはサイト内検索を含むサイドメニューで使われているidはsub-contentなので#sub-contentにを記入します。

ナビゲーションに表示させる「ページ名」は「サイト内検索」など、見る人がわかりやすいものを付ければよいのですが、FontAwesomeを導入済みだったのでという記号を使うことにしました。Search for Font Awesome でイメージに近いアイコンを探し、<i class="fa fa-search" aria-hidden="true"></i>と記述すればOKでした。

Search for Font Awesome | 日本語でアイコンフォントを簡単検索 (search-fa.com)