いのっすブログ

使用してみたおすすめのグッズや情報を紹介します。

アフィンガー4のスマホメニューに「MENU」の文字を挿入する方法

 2016年11月20日  

アフィンガー4のスマホメニューに文字を挿入している状態画像

ネット関係に詳しい人がよく見る分野のサイトであれば、ハンバーガーメニューだけでメニューだと気付いてくれるのですが、ネットにそれほど詳しくない人は、ハンバーガーメニューだけではメニューとわからない事も多いです。

PCを持っていない知人の女性は、スマホのハンバーガーメニューを見た時に「これ何?」と言ってました。

スマホ閲覧時にメニューだとわかりやすくするために、「MENU」の文字を挿入します。

ワードプレスのテーマはアフィンガー4です。

コピペ1回で終わります。

Version: 20171120 でのカスタマイズです。

2017年11月25日追記
テンプレートファイルの「st-accordion-menu.php」の編集無しで、スタイルシートへの追記のみで完了する方法に改定しました。

1 スタイルシートの編集

子テーマの style.css に以下を追記します。子テーマは、アフィンガー4メンバーサイトでも配布されていますので、導入されていない方はカスタマイズをするのであれば絶対に導入したほうが良いです。

@media only screen and (min-width: 600px) and (max-width: 959px) {
/*アコーディオンメニューボタン*/
#s-navi dt.trigger .op,
#s-navi dt.trigger .op-st,
#s-navi dt.trigger .op-st2,
.op-text, .op-text a {
font-size:20px;
}
}
@media screen and (max-width: 960px) {
#s-navi dt.trigger .op {
font-size: 16px;
}
#headbox .fa-bars:after {
content: "MENU";
padding-left: 8px;
font-size: 16px;
}
}
@media screen and (max-width: 430px) {
/*アコーディオンメニューボタン*/
#s-navi dt.trigger .op {
font-size: 16px;
line-height: 25px;
background: #d6d6d6;
max-width: initial;
height: 40px;
}
/*アコーディオンメニュー追加ボタン*/
#s-navi dt.trigger .op-st,
#s-navi dt.trigger .op-st2 {
line-height:25px;
height: 40px;
}
.op-text, .op-text a {
line-height: 25px;
}
}

メニューボタンの調整に合わせて、アコーディオンメニュー追加ボタンの大きさも調整してます。

既定のままだとタブレット閲覧時に文字が大きくなりすぎるため、そこも調整してます。

フォントサイズや「MENU」の文字はお好みでどうぞ。

スポンサーリンク

-アフィンガー4カスタマイズ