モバイルメニューを分かり易く表示する方法

​スマホ画面でのメニューは三本線アイコン（通称：ハンバーガーメニュー）を押してからでないと、メニューリストが表示されません。これが分かりづらいということで、表示を改善する方法がないかを調べてみました。簡単で効果的な方法がありましたので、記載します。

​この記事は WordPress でホームページを運用しており、なおかつ Divi テーマを利用している方向けの情報となります。他のテーマをご利用の場合には、それぞれのテーマに合うように変更が必要となります。

ホームページ作成のお手伝いをさせていただいている方から次の質問が届きました。

私のお友達に新しいホームページを見てもらっているんだけど、あの『三本線のマークを押すとメニューが出る』と言うのが分からないらしいのよ。トップページだけみて「見たけど、１ページだけ？」とか言われるの。あれを押すとメニューが出てくるのが高齢者には分からないのよ。何とかならないかしら。

​クライアント様

​確かにのマークを押すとメニューが表示されるというのは、操作に慣れていない方には難しいことだと思います。おそらく他にも同様の問題で困っている人がいるはずと予想して Google 検索してみると、以下のページが見つかりました。

​この中で５番目として例示されていたのが「ハンバーガーメニューの前か後ろにテキストを追加する」というものです。アイコンの横にメニューと書き加えることで、メニューを表示するボタンであることをハッキリ知らせることができます。

先のページから以下のコードをコピーして、テーマに適用すれば、説明通りにMENUと表示されるようになりました。

/* The code is from https://www.creativechildthemes.com */

.mobile_menu_bar:after {
 position: relative !important;
 content: 'MENU';
 bottom: 9px;
 left: 10%;
 color: #363636;
} 

 結果を以下でご確認ください。MENUの文字が追加されただけですが、これなら自然にアイコンを押していただけるのではないでしょうか？

変更前 

変更後