LION MEDIAのメニューリストにWebアイコンフォントを表示する方法

LION MEDIAのメニューリストにWebアイコンフォントを表示する方法

LION MEDIAで使用できるWebアイコンフォント以外に、好きなWebアイコンフォントを以前IcoMoonで追加しておいたのですが、追加したWebアイコンフォントをLION MEDIAのメニューリストのアイコンとして表示させようと思います。

LION MEDIAのメニューリストでWebアイコンフォントをリストのアイコンとして表示すると、メニューリストからのページ移動を増やせる可能性が高まります。

LION MEDIAにアイコンWebフォントを表示したいけど、まだWebアイコンフォントをLION MEDIAに追加していない場合はアイコンを追加する方法を参考にしてください。

 

 

LION MEDIAのメニューリストを表示させる

 

LION MEDIAにWebアイコンフォントを表示するメニューリストは「グローバルメニュー」「カテゴリーメニュー」「フッターのメニュー」を作成して表示するようにします。

まずはLION MEDIAにWebアイコンフォントを表示する場所になるメニューリストをLION MEDIAのカスタマイズ設定から表示できるように設定します。

WordPressの外観からメニューに進むと、LION MEDIAで表示したいメニューリストの項目を作成できるので「ヘッダー用」と「フッター用」の2つのメニュー作成をします。

 

 

このとき作成するメニューリストの項目には、「表示オプション」を開いて「cssクラス」にチェックを入れてからWebアイコンフォントを表示するメニューリスト項目に任意のクラス属性を付与しておきます。

 

クラス属性を付与しておくと、LION MEDIAのサイドコンテンツのウィジェットを使用してカテゴリーのメニューリストにWebアイコンフォントを表示したアイコンが、フッターのメニューリストと同じWebアイコンフォントが表示されないようにできます。

 

 

カテゴリーのメニューリストは、LION MEDIAでカテゴリー分けしてあるので、ウィジェットでカテゴリーのメニューリストをサイドに表示させておきます。

 

CSSでカスタマイズしてWebアイコンフォントを表示

 

CSSを使います。

LION MEDIAのメニューリストの要素に擬似要素のbeforeを指定することで、メニューリストの項目ごとの先頭にはWebアイコンフォントを表示するカスタマイズができます。

擬似要素のbeforeには、font-familyプロパティとcontentプロパティを記述して、font-familyの値にWebフォント名を指定、contentの値にはアイコンを表示する値を指定して擬似要素にWebアイコンフォントを表示する仕組みです。

 

グローバルメニューにWebアイコンフォント

 

LION MEDIAのグローバルメニューのリストにWebアイコンフォントを表示する方法は、LION MEDIAのグローバルメニューのclass名がglobalNavi__listです。

なのでセレクタにglobalNavi__listとメニューリスト作成をしたときのリスト項目ごとのクラス名を組み合わせて::beforeでリスト先頭に擬似要素を作成することで、Webアイコンフォントを表示するセレクタします。

 

/*グローバルメニューのアイコン*/
.globalNavi__list .a::before{
 font-family: "icomoon";
 content: "\e969";
 color: yellow;
 padding-right:10px;
}

 

上のcssを例にすると、グローバルメニューのセレクタにglobalNavi__listとヘッダー用のメニューリスト、つまりグローバルメニュー用ですが、2つのクラス名でグローバルメニューの項目ごとに表示したいWebアイコンフォントをcssで振り分けられるようにしています。

例えばメニュー作成のときクラス名を「.a」「.b」「.c」と3つのメニュー項目にクラスを振り分けていたら、「globalNavi__list .a」「globalNavi__list .b」「globalNavi__list .c」で3種類のメニューリストに好きなWebアイコンフォントを表示できます。

 

Advertisement

 

それなのでグローバルメニューを作成したメニュー項目の数だけ上のcssを増やして、あとは上のcssでセレクタのメニュー作成のときのクラス名をWebアイコンフォントを表示したいクラス名にして、contentプロパティの値に好きなアイコンを指定してあげれば表示できます。

先にLION MEDIAのカスタマイズ設定でメニューリストに、メニュー項目ごとのクラス名を仕込んでおいたのはWebアイコンフォントをリストごとに適用ができるようにするための重要な作業だったのです。

 

カテゴリーのメニューリストにWebアイコンフォント

 

カテゴリーのメニューリストにWebアイコンフォントを表示する方法は、LION MEDIAのサイドコンテンツのメニューにWebアイコンフォントを表示ですね。

LION MEDIAのサイドコンテンツは、基本ウィジェットでコンテンツを追加します。

Webアイコンフォントを表示するカテゴリーのリストもウィジェットから設定し表示しているのでウィジェットの要素に付いてるクラス名をセレクタにしてCSSの擬似要素を使います。

 

/*サイドカテゴリーリストのアイコン*/

.widget ul li::before {
 font-family: "icomoon";
 content: "\e969";
 padding-right:3px;
 color: #838cef;
}

.widget ul li .cat-item::before{
 font-family: "icomoon";
 content: "\e919";
 color: #ff7555;
 padding-right:3px;
}

.widget ul li {
 border-top: inherit!important;
}
.widget ul li {
 font-weight:bold;
}
.widget ul li .cat-item{
 font-weight:normal!important;
}

 

LION MEDIAのサイドのカテゴリーリストが階層になってる場合でCSSを記述しています。

cssの擬似要素のbeforeでカテゴリーリストのメニュー項目の先頭にアイコンを表示するようにします。

 

  • .widget ul li::beforeでカテゴリーメニューの親階層のリストにWebアイコンフォントを表示できます。
  • .widget ul li .cat-item::beforeのセレクタはカテゴリーメニューの子階層のリストにWebアイコンフォントが表示できます。

 

親階層、子階層どちらもセレクタの中にfont-familyプロパティで、使用するWebアイコンフォント名の指定(例ではicomoon)。実際に表示するアイコンはcontentプロパティの値でアイコン番号を指定しカテゴリー階層ごとにアイコンを表示します。

今回、カテゴリーのメニューリストにもクラス名を取得しようとしたのですが、メニュー作成ではできないし、LION MEDIAのfunctions.phpの解読も途中で投げ出し断念しました。

 

フッターメニューリストにWebアイコンフォント

 

LION MEDIAのフッターにメニューリストを表示する方法は、やはりLION MEDIAのウィジェットから表示することができます。

先に作成しておいたフッター用のメニューをウィジェットでフッターに表示してから、フッターメニューのリストの要素のクラス名でメニューリストにWebアイコンフォントを表示することができます。

 

/*フッターメニューアイコン*/

.widget-foot ul li {
 border-color: #3F3F3F;
 padding-left: 25px;
}

.widget-foot .z::before{
 font-family: "icomoon";
 content: "\e8fd";
}

.widget-foot .x::before{
 font-family: "icomoon";
 content: "\e969";
 color: pink;
}

.widget-foot .c::before{
 font-family: "icomoon";
 content: "\e969";
 color: skyblue;
}

.widget-foot .v::before{
 font-family: "icomoon";
 content: "\e969";
 color: tomato;
}

 

LION MEDIAのフッターのウィジェットの要素のクラス名は「.widget-foot」です。

記述するCSSは、.widget-footとフッター用メニューリスト作成のときにリストごとにつけたクラス名をセレクタで指定し、CSSの擬似要素でフッターメニューのリストにWebアイコンフォントを表示することができます。

 

Advertisement

 

カテゴリーリストのサイドメニューでWebアイコンフォントを表示してアイコンをつけた場合、カテゴリーリストに表示させたアイコンがフッターにも反映してしまいます。

そのためにあらかじめフッター用のメニュー作成をしておき、フッターメニューリスト専用のWebアイコンフォントが表示できるようにクラス名を付与しておきました。

あとは.widget-footとフッターメニューのリストごとのクラス名で指定したセレクタをリスト数だけ増やしていき、Webアイコンフォントを指定していくことでフッターメニューのアイコンがリスト先頭に表示することができます。

メニュー作成のCSSオプション便利!

 

LION MEDIAでWebアイコンフォントの表示確認

 

Webアイコンフォントを表示した「グローバルメニュー」「カテゴリーメニュー」「フッターメニュー」をLION MEDEIAで無事にアイコンが表示することができているか表示確認をしておきます。

 

 

ホームしかアイコン表示させていません….が無事に表示することに成功。メニューのクラス名でWebアイコンフォントを指定すると問題なく表示できます。(画像は私が怠けました)

 

 

 

カテゴリーメニューのリストも階層に分けてWebアイコンフォントの表示に成功です。

 

 

 

フッターメニューのWebアイコンフォントも表示することができています。

メニュー作成時のクラス指定ができてるかを、フッターメニューのクラス名でアイコンの色分けしたcssが反映できているので、カテゴリーメニューのリストがフッターにも影響を受けいないことが確認できます。

 

最初に表示確認をしたときにWebアイコンフォントが表示できていないようならChromeになりますが、Macの場合shift+command+Rで、Windowsの場合はshift+5でしたかね。

俗に言う「スーパーリロード」することでWebアイコンフォントが表示します。それでも表示しない場合は、「コマンド押しっぱなしスーパーリロード」をします。てか私はだいたいこれで表示できます。

 

それでもWebアイコンフォントが表示されない場合となると、CSSの記述を見直しスペルミスの確認をしたり、Webアイコンフォントを追加したLION MEDIAのicon.css内のWebアイコンフォント番号を確認するなどしながら表示させていきます。

そもそもWebアイコンフォントをLION MEDIAに追加するためのステップを間違えている場合もあります。私がそうでしたのであるかもしれないミスとして参考にしてください。

 

まとめ

 

LION MEDIAのテーマはデフォルトのままだと、グローバルメニューもカテゴリーメニューもフッターメニューも、どのメニューリストにもWebアイコンフォントがないメニューです。

少しのカスタマイズでメニューにWebアイコンフォントを表示させることで、メニューリストからの、ページ移動してもらえる可能性が増えます。

時間あるときにはリアルタイムアクセスを片手間で見続けた場合、今までよりもカテゴリーへのページ移動が多くなったので、意外と効果は大きいのかもしれないと思えます。

WordPressテーマカテゴリの最新記事