Luxeritas で常に展開するグローバルナビを作ってみる

公開日2018年9月15日更新日

レスポンシブデザインが主流の昨今、あちこちのサイトで上部にハンバーガーメニューが置かれているのを見かけます。
横三本線のアレですね。ハンバーガーに見える見えないの議論は置いておいて、もっと大事な問題が有ります。

スクリーンリーダーで不具合

iPhone の VoiceOver 等のスクリーンリーダーを使って操作している場合、そもそもメニューを開けないという問題が多発します。
メニューの位置をタップしても反応しないのに、上下からフリック操作で移動すると、開いてもいないメニューの中身を1つずつ読み上げたりします。
モバイル画面ではコンパクトにまとめられてとても便利な機能だとは思うのですが、そんな理由からもハンバーガーメニューの印象が余り良くありません。

そこで、モバイル画面でもメニューを展開したままに出来ないものかと調べてみるも、これと言った解決策も見つからず。
CSS をいじって無理やり開いたままにする様な方法も有る様ですが、何か不具合起こしそうですし、テーマ更新で使えなくなったりしても困るので諦める事に。
では、自分でそれっぽいものを作ろうと考えたのが今回の主題。

グローバルナビを自作

Luxeritas の設定

下準備として「Luxeritas」→「カスタマイズ (外観)」→「ヘッダーナビ(グローバルナビ)」の「グローバルナビ表示」のチェックを外します。
さらに「パンくずリンク」のパンくずリンクの配置のボックスで「コンテンツ領域の中」を選択します。
パンくずリンクは使わなくても良いんですが、パンくずリンクのホームへのリンクがそのままメニューとしても代替になりそうなので置いておく事に。

メニューリストの作成

「外観」→「ウィジェット」で「ヘッダー下ウィジェット」エリアに カスタム HTML をセットします。
この中に


 <ul class="header-menu">
  <li>メニュー1</li>
  <li>メニュー2</li>
  <li>メニュー3</li>
 </ul>

こんな感じでリストを書いて行きます。class名は適当。
フッターメニューを作る時もこんな事書いた気もするけど、コードは使い回しなのは秘密。

子テーマの編集

これを CSS で味付けしていく訳ですが、自分にはそこまでの技術が無いので、それっぽい形にする所まで。
float で回り込ませて行く方法も有ると思いますが、私は Flexbox が好きなのでこちらを使います。
「Luxeritas」→「子テーマの編集」に CSS を記述。

.header-menu{list-style-type:none;display:flex;}
.header-menu li{flex:1;box-sizing:border-box;text-align:center;}

これでとりあえずの形にはなると思います。
list-style-type:none;でリストの記号を消して
display:flex; でメニューを横並びに
flex:1; でメニューを等幅にして
text-align:center; でテキストをボックス内で中央寄せします。
後は、枠線を入れたり色を付けたりは好みだと思いますが、ここで力尽きました。

グローバルナビ完成

デフォルトで用意されているメニューを使った方が、好みの格好良いものが作れるのは間違い無いですが、これで VoiceOver 等のスクリーンリーダーで不具合を起こす事も無いでしょう。
そもそも私はスマホの色を反転させて、いわゆるダークモードで使っているので、色が変わるとかアニメーションとかに無頓着なんですよね。
ちゃんと視覚にも訴えるものを作った方が良いんでしょうけど、作ったとしても自分で確認する事も無いというダメっぷり。
みなさんはマネしないで下さい。