MEDIAのメニューリストのアイコンとして表示させようと思います。MEDIAのメニューリストでWebアイコンフォントをリストのアイコンとして表示すると、メニューリストからのページ移動を増やせる可能性が高まります。MEDIAに追加していない場合はアイコンを追加する方法を参考にしてください。MEDIAにWebアイコンフォントを表示するメニューリストは「グローバルメニュー」「カテゴリーメニュー」「フッターのメニュー」を作成して表示するようにします。MEDIAのカスタマイズ設定から表示できるように設定します。MEDIAで表示したいメニューリストの項目を作成できるので「ヘッダー用」と「フッター用」の2つのメニュー作成をします。このとき作成するメニューリストの項目には、「表示オプション」を開いて「cssクラス」にチェックを入れてからWebアイコンフォントを表示するメニューリスト項目に任意のクラス属性を付与しておきます。MEDIAのサイドコンテンツのウィジェットを使用してカテゴリーのメニューリストにWebアイコンフォントを表示したアイコンが、フッターのメニューリストと同じWebアイコンフォントが表示されないようにできます。MEDIAでカテゴリー分けしてあるので、ウィジェットでカテゴリーのメニューリストをサイドに表示させておきます。CSSでカスタマイズしてWebアイコンフォントを表示CSSを使います。MEDIAのメニューリストの要素に擬似要素のbeforeを指定することで、メニューリストの項目ごとの先頭にはWebアイコンフォントを表示するカスタマイズができます。擬似要素のbeforeには、font-familyプロパティとcontentプロパティを記述して、font-familyの値にWebフォント名を指定、contentの値にはアイコンを表示する値を指定して擬似要素にWebアイコンフォントを表示する仕組みです。MEDIAのグローバルメニューのclass名がglobalNavi__listです。セレクタにglobalNavi__listとメニューリスト作成をしたときのリスト項目ごとのクラス名を組み合わせて::beforeでリスト先頭に擬似要素を作成することで、Webアイコンフォントを表示するセレクタします。padding-right:10px;}上のcssを例にすると、グローバルメニューのセレクタにglobalNavi__listとヘッダー用のメニューリスト、つまりグローバルメニュー用ですが、2つのクラス名でグローバルメニューの項目ごとに表示したいWebアイコンフォントをcssで振り分けられるようにしています。.c」で3種類のメニューリストに好きなWebアイコンフォントを表示できます。Advertisementそれなのでグローバルメニューを作成したメニュー項目の数だけ上のcssを増やして、あとは上のcssでセレクタのメニュー作成のときのクラス名をWebアイコンフォントを表示したいクラス名にして、contentプロパティの値に好きなアイコンを指定してあげれば表示できます。MEDIAのカスタマイズ設定でメニューリストに、メニュー項目ごとのクラス名を仕込んでおいたのはWebアイコンフォントをリストごとに適用ができるようにするための重要な作業だったのです。MEDIAのサイドコンテンツのメニューにWebアイコンフォントを表示ですね。MEDIAのサイドコンテンツは、基本ウィジェットでコンテンツを追加します。Webアイコンフォントを表示するカテゴリーのリストもウィジェットから設定し表示しているのでウィジェットの要素に付いてるクラス名をセレクタにしてCSSの擬似要素を使います。MEDIAのサイドのカテゴリーリストが階層になってる場合でCSSを記述しています。cssの擬似要素のbeforeでカテゴリーリストのメニュー項目の先頭にアイコンを表示するようにします。li::beforeでカテゴリーメニューの親階層のリストにWebアイコンフォントを表示できます。.cat-item::beforeのセレクタはカテゴリーメニューの子階層のリストにWebアイコンフォントが表示できます。親階層、子階層どちらもセレクタの中にfont-familyプロパティで、使用するWebアイコンフォント名の指定(例ではicomoon)。実際に表示するアイコンはcontentプロパティの値でアイコン番号を指定しカテゴリー階層ごとにアイコンを表示します。MEDIAのfunctions.phpの解読も途中で投げ出し断念しました。MEDIAのウィジェットから表示することができます。先に作成しておいたフッター用のメニューをウィジェットでフッターに表示してから、フッターメニューのリストの要素のクラス名でメニューリストにWebアイコンフォントを表示することができます。MEDIAのフッターのウィジェットの要素のクラス名は「.widget-foot」です。記述するCSSは、.widget-footとフッター用メニューリスト作成のときにリストごとにつけたクラス名をセレクタで指定し、CSSの擬似要素でフッターメニューのリストにWebアイコンフォントを表示することができます。AdvertisementカテゴリーリストのサイドメニューでWebアイコンフォントを表示してアイコンをつけた場合、カテゴリーリストに表示させたアイコンがフッターにも反映してしまいます。そのためにあらかじめフッター用のメニュー作成をしておき、フッターメニューリスト専用のWebアイコンフォントが表示できるようにクラス名を付与しておきました。あとは.widget-footとフッターメニューのリストごとのクラス名で指定したセレクタをリスト数だけ増やしていき、Webアイコンフォントを指定していくことでフッターメニューのアイコンがリスト先頭に表示することができます。MEDEIAで無事にアイコンが表示することができているか表示確認をしておきます。ホームしかアイコン表示させていません....が無事に表示することに成功。メニューのクラス名でWebアイコンフォントを指定すると問題なく表示できます。(画像は私が怠けました)カテゴリーメニューのリストも階層に分けてWebアイコンフォントの表示に成功です。フッターメニューのWebアイコンフォントも表示することができています。メニュー作成時のクラス指定ができてるかを、フッターメニューのクラス名でアイコンの色分けしたcssが反映できているので、カテゴリーメニューのリストがフッターにも影響を受けいないことが確認できます。最初に表示確認をしたときにWebアイコンフォントが表示できていないようならChromeになりますが、Macの場合shift+command+Rで、Windowsの場合はshift+5でしたかね。俗に言う「スーパーリロード」することでWebアイコンフォントが表示します。それでも表示しない場合は、「コマンド押しっぱなしスーパーリロード」をします。私はだいたいこれで表示できます。MEDIAのicon.css内のWebアイコンフォント番号を確認するなどしながら表示させていきます。MEDIAに追加するためのステップを間違えている場合もあります。私がそうでしたのであるかもしれないミスとして参考にしてください。MEDIAのテーマはデフォルトのままだと、グローバルメニューもカテゴリーメニューもフッターメニューも、どのメニューリストにもWebアイコンフォントがないメニューです。カスタマイズでメニューにWebアイコンフォントを表示させることで、メニューリストからの、ページ移動してもらえる可能性が増えます。時間あるときにはリアルタイムアクセスを片手間で見続けた場合、今までよりもカテゴリーへのページ移動が多くなったので、意外と効果は大きいのかもしれないと思えます。投稿一覧WordPressとWeb関係のことを趣味的に学んでます。独学なので記事で間違ってることがあればご指摘ください。記事が少しでも誰かの参考になればと思います。MEDIAのテーマを使用してブログ運営をしているのですが、目次のテキスト位置が気になったので見やすいようにCSSで揃えてみました。MEDIAを使い始めて8か月になるのですが、初めは速かった表示速度が遅くなってきました。WordPress.。