アラサー会社員の人生楽しむゆるゆるブログ

あまいぱんブログ

HOBBY

アフィンガー5スマホ用メニュー下に「MENU」を表示する【コピペOK】

投稿日:2018年12月10日 更新日:

ハンバーガーメニューを見やすく

スポンサードサーチ

アフィンガー5でスマホメニューを分かりやすくするコード

じゃてぃらん
こんにちは、じゃてぃらんです。

当サイト(あまいぱんブログ)ではワードプレステーマのアフィンガー5を使っています。で、そのまま使うと、スマホ表示にしたときいわゆる「ハンバーガーメニュー」が表示されるわけですが、、、

メニューあり囲み

ちょっと分かりにくいかなーと思います。慣れてないとここがメニューボタンって分からない人もきっといますよね。

そこで今回、一か所コピペするだけでハンバーガーメニューの下に「MENU」を表示するコードをご紹介します。
必ずバックアップを取った上で自己責任でご利用ください。

メモ

※職場のプログラマーさんが書いてくれました。本人の許可を得てのご紹介です

【関連記事】
アフィンガー5のコピーライトをプラグインなしでいじる方法【コピペOK】
こちらも合わせてご覧いただけると嬉しいです。

ハンバーガーメニューの下に「MENU」を表示するCSS

1:左メニューの「外観」から「テーマの編集」を選択します。

ハンバーガーメニュー表記1

2:右部分「テーマファイル」の部分の「スタイルシート(style css)」を選択します。

ハンバーガーメニュー表記2

13列目に、下記コードをコピペしてください。

ハンバーガーメニュー表記3

この赤いかっこでかこった部分に、下記コードをコピペします。

#s-navi .acordion dt.trigger {
overflow: visible;
}
.acordion_button {
position:relative;
}
.acordion_button:after {
content:"MENU";
position: absolute;
bottom: -1em;
right: 0;
left: 0;
margin: 0 auto;
font-size: 0.75em;
color: #fff;
}

すると、13~28列目がこういうコードになります。

ハンバーガーメニュー表記4

拡大するとこんな感じですね。

ハンバーガーメニュー表記4拡大

保存してください。「ファイルの編集に成功しました」の表示が出ます。

ハンバーガーメニュー表記5

完成です。

メニューあり囲い

 

じゃてぃらん
MENUの文字を変えたい場合は20列目の“”で囲まれた箇所を変更してください。 文字色を変えたい場合は27列目のcolor: 〇〇〇;の箇所に変更したい文字色コードを入れてください。

※参考:「HTML,CSS カラーコード一覧表」

比べると、こんな感じになりますね。

ハンバーガーメニュー表記

というわけで、

コピペするだけでハンバーガーメニューの下に「MENU」を表示するコード

のご紹介でした。

最後までお読みいただきありがとうございます。

-HOBBY
-, ,

Copyright © あまいぱんブログ, 2018~2019 All Rights Reserved