紺です。
よくわからないのにカスタマイズしたがる病です。
今回は、スマホ用メニューの、いわゆるハンバーガーメニューのというのでしょうか、「三」みたいなアレを、別のアイコンもしくは「menu」などの文字に変更する方法です。
簡単に変えられるかと思いきや、結構探してしまったので書いておきます。
※AndroidのChrome、Firefox、Operaで表示を確認していますが、iPhoneは持っていないので確認できていません。
「三」が指定されている箇所
このメニューにはFont Awesome Iconsの「fa-bars」というアイコンが使われています。
・・・と、サラっと書きましたが、それを理解するのに随分時間がかかりました(´；ω；｀)
webアイコンって本当によくわからないんです私・・・。
指定されているファイルは「st-accordion-menu.php」です。
子テーマのフォルダ「AFFINGER4 Child」の中に、親テーマの「st-accordion-menu.php」をコピーして入れましょう。
FTPソフトか、ファイルマネージャーなどを使います。
中身は、変えたいところだけ書けば良いのかなぁと思ったのですが、やってみたところブログの画面から文字が全部消えるという愉快なことになってしまったので、中身は全部そのままにして、変えたい部分だけを書き換えることにします。
PHPファイルは怖いです(›´ω`‹ )
やってしまったら、すぐ戻せるように、絶対にバックアップとか中身のコピーとか、とっておいてくださいね！
書き換える箇所
書き換える箇所は、この部分です。
見つけやすいように前３行も載せましたが、実際変更するのはこの中の4番目の行だけです。
<nav id="s-navi" class="pcnone"> <dl class="acordion"> <dt class="trigger"> <p><span class="op"><i class="fa fa-bars"></i></span></p>
別のアイコンに変える
「fa-bars」がアイコンの名前なので、例えば別のアイコンに変える場合は、アイコン名だけを変えてみます。
こちらに載っているアイコンに変えられます。
LINKFont Awesome Icons
その中の、下向き矢印のアイコン「fa-chevron-circle-down」に変えてみましょう。
<p><span class="op"><i class="fa fa-chevron-circle-down"></i></span></p>
変更前
変更後
・・・なんだか背景画像がガタガタしたり変ですが、これは私のスマホのChromeが腐っているせいなのでお気になさらず。
他のブラウザでは綺麗に見えました・・・。
テキスト文字に変える
「三」が世の中に浸透してきたのかな～と思いつつ、「menu」などの文字の方がわかりやすいのかなぁと思い、つい変えたくなってしまいます。
ということで、「menu」の文字に変えてみましょう。
ただし、その場合はCSSの調整も必要になってきます。
「st-accordion-menu.php」の中で変える部分
文字のみならこんな感じ。
<p><span class="op">menu</span></p>
アイコン＋文字ならこんな風に書きます。
※後で見たらアイコンと文字がくっついてしまったので、「menu」の文字の前に半角スペースを入れてあります。
<p><span class="op"><i class="fa fa-chevron-circle-down"></i> menu</span></p>
変更したら、ファイルを更新して保存します。
この状態では、スマホで見ても、文字が入りきっていないと思います。
文字が見えるように、CSSで幅やフォントの大きさを調整しましょう。
CSSで調整する箇所
親テーマの「style.css」から、下記の部分をコピーして、子テーマの「style.css」に貼り付けて、調整しましょう。
追加する場所は「/*media Queries～～」より上に追加してください。
/*アコーディオンメニューボタン*/
#s-navi dt.trigger .op {
font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "ＭＳ Ｐゴシック", sans-serif;
color: #333;
font-size:25px;
line-height:30px;
background:#ccc;
display:block;
float:right;
height:auto;
margin-top:-5px;
padding: 10px 10px 9px 10px;
max-width:20%;
box-sizing:border-box;
}
カスタマイズ後
今はアイコンの背景がグレーになっていますが、背景色も変更出来ます。
※ただし、テーマカスタマイザーを使って「スマホ用メニューとトップに戻るボタン背景色」を設定した場合は、そちらの色設定が優先されます。
また、フォントサイズが大きく設定されているので、小さくして文字が見えるようにしましょう。
横幅が入り切らないので、max-widthも少し大きくします。
こんな感じに変更してみました。
/*アコーディオンメニューボタン*/
#s-navi dt.trigger .op {
font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "ＭＳ Ｐゴシック", sans-serif;
color: #fff;
font-size:14px;
line-height:30px;
background:#0060de;
display:inline;
float:right;
height:auto;
margin-top:-5px;
padding: 10px 10px 9px 10px;
max-width:30%;
box-sizing:border-box;
}
ファイルを更新して、スマホで見てみましょう！
アイコン＋文字で「メニューだよ！押せますよ！」ということがわかりやすくなりましたね！！
「追加メニュー」を追加した場合
Affinger4では、このメニューの部分に例えば電話番号や他のメニューを追加できるようになっています。
そちらは、アイコン＋文字の設定が、Affinger管理画面から簡単に出来ます。
1つ目のメニューも管理画面から変えられそうなのに、変えられないですよね・・・？
見落としてるだけだったら、泣ける。
元々、メニューの幅はCSSの「max-width」で右から20%、40%、40%で割り振られています。
今回、1番右のメニューを30%に変更してしまったので、もし「追加メニュー」を3つ入れる場合はCSSで他のメニューの幅を狭くしないと入り切らなくなる場合があります。
試したところ、文字数が少なければ3つ入りましたが、電話番号を入れると3つは入り切らなくなるので、ご注意くださいね。
2つなら大丈夫でした。
