ハンバーガーメニューって聞いたことありますか？聞いたことがなくても見たことはあるかとおもわれるほど、最近ではよく使われているメニューの表示方法です。
まだその形がメニューという認識が充分でないため、ハンバーガーメニューだとクリック率が良くないという調査結果がありました。ということでハンバーガーメニューを文字に置き換えるにはどうすればいいか？を試してみました。
ハンバーガーメニューとは？
WordPressのトップページを見ると
こんな感じで表示されている画面ですが、幅が狭くなると
こんな感じで、固定ページへのリンクがメニューに入るようです。一番右にある この3本線がハンバーガーメニューです。
こんな感じでハンバーガーを横から見た形に似ているからハンバーガーメニューと呼ばれてるんじゃないかなと思います。意味的にはこの線がメニューの文字列、ってことを表してるのではないでしょうか。
このテーマはTwenty Fourteenの子テーマで、この部分は元のTwenty Fourteenと同じ動きになっています。
Twenty Fifteenの子テーマでは
通常の幅だとこのように表示されているものが縮めると
同じように ハンバーガーメニューが表示されます。
今回はこの「Twenty Fourteen」 と 「Twenty Fifteen」 テーマのハンバーガーメニュー表示を文字表示に変えてみたいと思います。
ハンバーガーメニューを表示している部分を探す
ハンバーガーメニューを表示している部分を探します。この3本線はGenericonsというフォントを使って表示されているようでした。
Twenty Fourteenでの該当箇所はstyle.cssの
.menu-toggle:before {
color: #fff;
content: "\f419";
padding: 16px;
}
この部分でした。\f419 というコードが に該当するコードです。
Twenty Fifteenでもstyle.cssの
.secondary-toggle:before {
color: #333;
content: "\f419";
line-height: 40px;
width: 40px;
}
ここで同じように3本線を表すコード \f419 で指定されていました。
ハンバーガーメニューを「MENU」という文字に置き換える
Twenty Fourteenの子テーマフォルダにあるstyle.cssに先ほどのコードをコピーして
/* ハンバーガーメニュー変更 */
.menu-toggle:before {
color: #fff;
font-size:12px;
font-weight:bold;
content: "MENU";
padding-left: 3px;
padding-right: 3px;
padding-top: 16px;
padding-bottom: 16px;
}
こんな風に変更してみました。3本線を表すコードの所に MENU と記述して余白などを調整しました。これで表示すると、
こんな感じにハンバーガーメニューが出ていたところが MENU という文字に変わりました。
同様にTwenty Fifteenの子テーマのstyle.cssに
.secondary-toggle:before {
color: #333;
text-align:center;
font-size: 12px;
content: "MENU";
}
こんな感じの記述をしてみました。これで表示すると、
やはりハンバーガーメニューだったところが、MENU という文字で表示されるようになりました。
まとめ:どちらがいいのかはよくわかりませんが、置き換え方が分かりました
このハンバーガーメニューはブラウザの設定メニューなどにも使われていて自分的にはもう「メニュー」にしか見えません(^_^;。
なので、置き換えなくてもいいのかなー、とも思います。ただし、自分の感覚が大多数の感覚とずれている場合はそちらに合わせた方がSEO的にも有利だと思うので、やっぱり文字にしたい！と思ったときにどこを直せばいいのかな？という興味から調べて試してみました。
また、Twenty FourteenやTwenty Fifteenで使われているGenericonsというフォントも調べてみるとけっこう面白く、使い勝手がよさそうなのでそれについても別の機会に書いてみたいと思います(^^)/
[kitamura_yomereba]
コメント