当サイトには広告が含まれております

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

この記事は最終更新日から8年経過しています。内容が古い可能性があります。

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

記事をざっと見る

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

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]

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントを残す

記事をざっと見る