デフォルトテーマのハンバーガーメニューを 文字:MENU に置き換える

ハンバーガーメニューって聞いたことありますか?聞いたことがなくても見たことはあるかとおもわれるほど、最近ではよく使われているメニューの表示方法です。
まだその形がメニューという認識が充分でないため、ハンバーガーメニューだとクリック率が良くないという調査結果がありました。ということでハンバーガーメニューを文字に置き換えるにはどうすればいいか?を試してみました。

ハンバーガーメニューとは?

WordPressのトップページを見ると

こんな感じで表示されている画面ですが、幅が狭くなると

こんな感じで、固定ページへのリンクがメニューに入るようです。一番右にある  この3本線ハンバーガーメニューです。

こんな感じでハンバーガーを横から見た形に似ているからハンバーガーメニューと呼ばれてるんじゃないかなと思います。意味的にはこのメニューの文字列、ってことを表してるのではないでしょうか。

このテーマはTwenty Fourteenの子テーマで、この部分は元のTwenty Fourteenと同じ動きになっています。

Twenty Fifteenの子テーマでは

通常の幅だとこのように表示されているものが縮めると

同じように  ハンバーガーメニューが表示されます。

今回はこの「Twenty Fourteen」 と 「Twenty Fifteen」 テーマのハンバーガーメニュー表示を文字表示に変えてみたいと思います。

ハンバーガーメニューを表示している部分を探す

ハンバーガーメニューを表示している部分を探します。この3本線はGenericonsというフォントを使って表示されているようでした。

Twenty Fourteenでの該当箇所はstyle.css

この部分でした。\f419 というコードが  に該当するコードです。

Twenty Fifteenでもstyle.css
 

ここで同じように3本線を表すコード \f419 で指定されていました。

ハンバーガーメニューを「MENU」という文字に置き換える

Twenty Fourteenの子テーマフォルダにあるstyle.cssに先ほどのコードをコピーして

こんな風に変更してみました。3本線を表すコードの所に MENU と記述して余白などを調整しました。これで表示すると、

こんな感じにハンバーガーメニューが出ていたところが MENU という文字に変わりました。

同様にTwenty Fifteen子テーマのstyle.css

こんな感じの記述をしてみました。これで表示すると、

やはりハンバーガーメニューだったところが、MENU という文字で表示されるようになりました。

まとめ:どちらがいいのかはよくわかりませんが、置き換え方が分かりました

このハンバーガーメニューブラウザの設定メニューなどにも使われていて自分的にはもう「メニュー」にしか見えません(^_^;。

なので、置き換えなくてもいいのかなー、とも思います。ただし、自分の感覚が大多数の感覚とずれている場合はそちらに合わせた方がSEO的にも有利だと思うので、やっぱり文字にしたい!と思ったときにどこを直せばいいのかな?という興味から調べて試してみました。

また、Twenty FourteenやTwenty Fifteenで使われているGenericonsというフォントも調べてみるとけっこう面白く、使い勝手がよさそうなのでそれについても別の機会に書いてみたいと思います(^^)/
[kitamura_yomereba]

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

280人の購読者に加わりましょう

トップへ戻る