Luxeritas用グローバルナビにFont Awesomeのアイコンを付ける方法【高速化ver】
今回はグローバルナビに関するお話をば。
グローバルナビはサイトに訪問して割とすぐに目に付く要素です。
シャレオツに着飾っていればそれだけで「こだわりのあるサイトなんかな？」という期待感を演出してくれる要素です。
実際この部分にこだわりを見せている方も多く、僕自身もセンス無いなりに頑張ってます。
そんな中「グローバルナビの項目にアイコンを付ける」というのが初心者でも割と簡単にオシャレに見せられるので人気のようなので、その方法＠高速化verをご紹介します。
グローバルナビにアイコンを付ける方法
やること
一応今回やることは、スタイルシートに記述してアイコンを呼び出す方法を取ります。
従来では初心者でもやりやすいように、メニュー画面にFont Awesomeのアイコンタグをぶち込む、という方法がよく紹介されています。
その場合、スタイルシートに「各アイコンはこのコード」という記述をしていけば必要最低限の記述での読み込みも出来なくは無いです…が。
おそらくは面倒くさいから、Font AwesomeのCSSを全て読み込んでいるかと思います。
Luxeritasの「必要最小限のCSSのみを読み込む」という便利機能を使わないのは正直もったいないｗ
本来なら文章中にもガンガンアイコンを使っていきたいという人で無ければファイル全てを読み込む必要性はありませんからね。
Font Awesome4ではまだマシだとは思いますが、Font Awesome5になるとアイコン数増加およびCSSファイル数が3個になったということで、「全体を読み込む」のと「必要最小限を読み込む」のではますます差は顕著になるかと思います。
場合によってはちょっと手間ですが、簡単なことなのでやってみる価値はありませんかね？
下準備
ではここから手順をご紹介していきます。本当は2種類用意していましたが、どうやら邪道っぽいので大幅に内容修正していきます。
アイコンを出したいグローバルナビの項目にカーソルを合わせて「右クリック」からの「検証」を選択。（Windowsの場合）違うOSの場合でも似たような機能があるはずなのでグーグル先生にでも聞いてください。
これでメニューの属性を調べます。
こんな感じで項目部分がハイライトされていますのでそのすぐ上（画像内赤枠部分）に注目してください。
何やら長いクラス名となっておりますがこの場合末尾の数字だけメモしてもらえれば大丈夫です。
リアナ
メモ帳を使って「項目名：メニューID」という風に書いていけば作業しやすいです！
アイコンを選ぶ
次はFont Awesomeに行きます。
今回使ったのはFont Awesome4のものなのでリンク先も4のままです。…が「この記事書こう！」と決意した時Luxeritasがバージョンアップにより5も使えるようになったとのことなので対応する方法も書いておきます。
アイコン画面の以下の部分に注目。
この文字列で呼び出してくるので、これをメモしておいてください。
高速化設定
Luxeritasのカスタマイズ項目「CSS」でFont Awesomeに関する設定を、
- 非同期（一瞬でもアイコンない状態なのが嫌なら同期でもおｋ）
- CSSの構成：「Luxeritasで必要最小限のCSSのみ」
- フォントファイル：CDN
としてください。もしLuxeritas3.0.3にバージョンアップしてる場合はFont Awesome4か5どっちかを選ぶ項目も増えてますのでお好みの方を。
スタイルシートに記述
ここからCSSを書いていきます。（WordPress管理画面メニューバー「Luxeritas」→「子テーマの編集」へ）
/*ホームアイコン用*/
.menu-item-827 span::before {
position:relative;
padding-right:7px;
font-weight:400;/*文字の太さ*/
font-family:FontAwesome;
content:"\f015";/*ここにFont Awesomeの文字列*/
font-size:14px;/*グローバルナビの文字と同じ大きさに*/
}とりあえず「ホーム」項目用です。（追記前のコードなので参考程度に。まだコピペしないでね（はぁと）
これはうちのブログでのコードなので、「menu-item-〇〇」の部分と「content"￥〇〇"」の部分を変更してください。子テーマ編集画面での「￥」記号部分は「＼」が文字化けしてるだけなのでそのままでも大丈夫です。（Font Awesomeの文字列を書く時は"＼文字列"と記入します。）
後は使いたい分だけコピペしてそれぞれメニューIDとFont Awesomeの文字列を変更していくだけです。
Font Awesome5を使いたい場合は、
font-family: 'Font Awesome 5 Free';と、「font-family」部分を書き換えた上で文字の太さを調整してください。
https://thk.kanzae.net/net/itc/t8727/Luxeritas開発者の方のブログです。上の記事見たほうがわかりやすいですねｗ
子要素を持つ項目の場合
上のコードはあくまで親要素のみの場合でした。
おわかりだろうかｗ
メニューID〇〇の中の＜span＞の先頭にアイコンを入れているため、子要素にも全て反映されます。
僕の場合だと親・子・孫まであって「親と子にアイコンつけたい！」という願望があったのでこれでは少しくどく見えてしまうような…。
ちなみに子の要素に何も指定しないと全て親要素のアイコンが付きますｗカテゴリーリストをグローバルナビ内に入れててカテゴリー毎に同じアイコンを付けたい！という場合はこちらの方が良いですね。
親と子はメニューIDが違うのでそれぞれ別アイコンに出来ますが、孫の中の＜span＞は除外、という設定は出来ませんでした。追記：コメントにて子要素に反映させない記述の仕方をご教示いただきました。
クラスと要素の間に「>」を入れることで直下の要素にのみ反映させられるみたいですね。
なのでこれを利用して特定のリンクのみ無効化させたい場合も、jQueryにこのように記述すれば良いわけですね。
jQuery(function ($) {
$('#menu-item-//ID > a').click(function(){
return false;
})
});こうなってくると以降説明するやり方は邪道になってしまいますねｗ
無効化させるやり方はこちらの記事に追記していきます。
https://ksukelife.com/blog/1220/※以下で書いてたやり方はちょっとアカン感じがしたので削除しておきます。
Font Awesome5対応コード
削除後ぽっかり空いてしまったので、Font Awesome5対応で汎用性の高いアイコンのみコード載せときます。
メニュー横のIDは例としてそのままにしてますが各自変更してください。使いたいものがあれば参考に。
/*home*/
.menu-item-827 > a > span::before{
font-size:14px;
position:relative;
padding-right:7px;
font-family: 'Font Awesome 5 Free';
content:"\f015";
font-weight:900;
}
/*category*/
.menu-item-1177 > a > span::before{
position:relative;
padding-right:7px;
font-family: 'Font Awesome 5 Free';
content:"\f07c";
font-weight:400;
font-size:15px!important;
}
/*contact*/
.menu-item-1112 > a > span::before{
position:relative;
padding-right:7px;
font-family: 'Font Awesome 5 Free';
content:"\f2b6";
font-weight:400;
font-size:15px!important;
}
/*sitemap*/
.menu-item-1113 > a > span::before{
font-size:14px;
position:relative;
padding-right:7px;
font-family: 'Font Awesome 5 Free';
content:"\f0e8";
font-weight:900;
}
/*privacy*/
.menu-item-1114 > a > span::before{
font-size:14px;
position:relative;
padding-right:7px;
font-family: 'Font Awesome 5 Free';
content:"\f084";
font-weight:900;
}フォントのサイズをいじってる部分は以下の記事を参照ください。
コメントにて、一括で指定する書き方も書いていただけてたのでうちで使っているアイコン全部さらします。全部で9個使ってます。
.menu-item-827 > a > span::before,.menu-item-1177 > a > span::before,.menu-item-1112 > a > span::before,.menu-item-1113 > a > span::before,
.menu-item-1114 > a > span::before,.menu-item-822 > a > span::before,.menu-item-821 > a > span::before,.menu-item-818 > a > span::before,
.menu-item-819 > a > span::before,.menu-item-826 > a > span::before{
font-size:14px;
position:relative;
font-family: 'Font Awesome 5 Free';
padding-right:7px;
}
/*home*/
.menu-item-827 > a > span::before {
content:"\f015";
font-weight:900;
}
/*category*/
.menu-item-1177 > a > span::before{
content:"\f07c";
font-weight:400;
font-size:15px;
}
/*contact*/
.menu-item-1112 > a > span::before{
content:"\f2b6";
font-weight:400;
font-size:15px;
}
/*sitemap*/
.menu-item-1113 > a > span::before{
content:"\f0e8";
font-weight:900;
}
/*privacy*/
.menu-item-1114 > a > span::before{
content:"\f084";
font-weight:900;
}
/*info*/
.menu-item-826 > a > span::before{
content:"\f05a";
font-weight:900;
}
/*desktop*/
.menu-item-819 > a > span::before{
content:"\f108";
font-weight:900;
}
/*スーツケース*/
.menu-item-822 > a > span::before{
content:"\f0f2";
font-weight:900;
}
/*ラインチャート*/
.menu-item-818 > a > span::before{
content:"\f201";
font-weight:900;
}書き直すのが激しく面倒だったんですがｗあさん、ありがとうございます！
まとめ
こうなったり↓
こうなったりしましたが…↓
（何を思ったか＜i＞タグで囲って斜めになってる。斜体フォントになってるｗ）
何やかんやで目的であった「親・子の項目にはアイコン付けて孫には表示しない」という目標を達成することが出来ました。
少し手間ですが簡単に出来ますので、是非ともお試しあれ。