雑記ブログ

AFFINGER5 ヘッダーメニューアイコン設定方法

 

まず、最初にカテゴリー設定が必要ですが、カテゴリー作成方法は皆様はできていると思いますので一旦省略させて頂きますね。

ヘッダーメニューの完成図

 

メニューの設定箇所は下記の手順設定画面から移動できます。

『Wordpressサイドバー』 → 『外観』 → 『メニュー』

 

主に設定する項目はこちらです。

・ナビゲーションメニュー

ナビゲーションメニューはヘッダーメニューに表示される名称になります。

ここで複雑な名前にするよりはシンプルでわかりやすい名称にしてあげる事によって

見てすぐに何についてのカテゴリーなのかを理解してもらえると思っています。

 

ヘッダーメニューにアイコンを設定する方法

 

メニュー文字の横にアイコンを挿入していきたいのですが、アレンジをする前に下準備として

『Font Awesome』の導入をしていきます。

(Font Awesomeはアイコンを提供してくれるサイトです。)

 

下記コードをコピーします。

<script type="text/javascript">
var mycss=function(){// mycss関数を定義。{}内の処理を実行。
  var l=document.createElement("link");// link要素をlに代入。
  l.rel="stylesheet";// lにrel="stylesheet"属性を付与。
  l.href="https://use.fontawesome.com/releases/v5.8.1/css/all.css";// lにhref属性を付与。
  var s=document.getElementsByTagName("link")[0];// HTML内の最初のlink要素名をsへ代入
  s.parentNode.insertBefore(l,s);// sの直前にlを出力
};
window.addEventListener("DOMContentLoaded",mycss);// DOMの構築が終わったらmycss関数を実行
</script>

 

コードの貼り付ける場所は  →  外観  →  テーマエディターから親テーマを選択し

『footer.php』の</head>タグ直前に貼り付けてください。

 

挿入前

 

挿入後

プログラミング詳しい方だと、なんでFontAwesomeの導入コードを<head></head>の中に挿入しないのかと疑問に思われる人もいるかも知れませんが、<head></head>タグ内にFontAwesomeの導入コードを挿入するとサイトのスピードが低下する原因になるためだそうです。

JavaScriptというプログラミング言語で囲って、アイコンを遅延ロードさせるようになっているのでSEO的にも、FontAwesomeの導入方法はこの方法が1番ベストと言う事でした。

FontAwesomeの導入はこれで以上になるので、次にFontAwesomeのサイトを確認してアイコンを探しましょう。

 

FontAwesome こちらをクリックします

 

こちらの画像がページ上に表示されるので検索するところに『Twitter 』を入力すると

 

 

 

 

黒色が無料で灰色が有料で使用できるアイコンとなっています。

ここにお金をかける必要はないと思いますので、気に入った無料アイコンを探して見て下さい。

ちなみに、FontAwesomeでアイコンの検索をするときは英語で検索する必要があるので、もしカテゴリーの英語名称がわからない場合などには、Google翻訳の『和英』を使用して、ヒントとなる英語を調べて見ましょう。

 

Google先生『翻訳/和英』

 

気に入ったアイコンが見つかったらそのアイコンをクリックしコードをコピーします。

例えば車のアイコンを探す場合は『CAR』と検索

コードが出てくるのでそれをコピーして貼りつけをします。

 

 

コピーしたコードの貼る場所は

WordPress → 外観 → メニュー にあるカテゴリー部分のアイコンを追加したいメニューです。

 

元々、何か文字が挿入されていると思いますが設定している文字の前にコピーしたコードを挿入します。

挿入すると下の画像のようにアイコンが追加されます。

 

このままでも良いと思う方もいると思いますが、少しアイコンとメニュー文字を話したいと言う方は

先程、挿入したナビゲーションメニューのメニュー文字の前にスペースを入れて見て下さい。

 

 

複数のメニューをお持ちであれば同様に設定をしていただければ完成です。

 

メニューの間隔が気になる方は

カスタマイズページ → メニューのカラー設定を選択 → PCヘッダーメニュー

 

 

 

 

 

 

 

 

ここから、メニュー幅を希望の幅に調整が可能です。

もう一つ別の方法は

このCSSは同じくカスタマイザー内の『追加CSS』に貼り付けていただければそのまますぐに適応されます

貼り付けるコードはこちらです

/*ヘッダーメニュー幅*/
header .smanone ul.menu li{
width: 155px !important;
}

 

 

このコードを使用することによって、均一にメニューを表示させることが出来るので、サッと追加しておきましょう。

また、WordPressのヘッダーメニュー全共通で使用できているので、こちらはAFFINGER5ユーザー以外でも使用可能です。

スポンサーリンク

よく読まれている記事

1

デザイン&クオリティ 時代の最先端を走り続けるために生まれ変わった伝統のデザイン 精緻に磨き上げられた、スクエアなフォルムとアイコニックなディテール 広くモダンに進化を遂げた、独創のインテリア そこにあるのは、時代の先端を走り続けるために、すべてが生まれ変わった伝統のデザイン   ...

2

  ・HAMANN Motor Sport社よりX5 G05 / X4 G02 / X3 G01とSUVモデルに続き、BMW X6 G06 M Sport用エアロプログラムが発表されました!日本での価格と納期はまだ未定ですが、エアロを装着した車両を見てみたいです。 G06モデルのエアロパー ...

3

コーナーの先に、驚きがある。 都市で暮らす喜びを味わい尽くす一台、MINI  3Door / 5Door。 MINI ならではのゴーカート・フィーリングに胸を躍らせ鋭いコーナーや狭い路地を軽快に、流れるように走り抜けるーその個性溢れるスタイルに、街中で視線を集めながら。 最新のMINI  Conne ...

4

Date : 1st. 2020-03-01 2020年の年内には日本でも発売されるだろうと言われているメルセデスベンツGLB 個人的には以前に発売されていたGLKを思い出すデザインで凄く好きなSUVらしさがある形だと思っています。メルセデス・ベンツGLBクラスは、現在販売されているGLAクラスとG ...

5

  2016年にフルモデルチェンジになった5代目W213 E-Class。 発売当初はメルセデスの最先端技術が搭載されていましたが、そんなW213 E-Classも2016年に発売されてもうすぐ4年を過ぎマイナーチェンジを迎えました。 新車価格が700万〜だった車も中古車市場では300万前 ...

6

  THE ICON REBORN アイコンは唯一無二である必要があると考えます。そして絶え間ない挑戦こそが新しいAventador を生み出したのです。 Miura、Islero、Countach、Urraco から続く、歴史的なランボルギーニの哲学は、新しい Aventador S C ...

7

Lorinserが新型Sクラス W223にホイールを装着した画像が公開されました。おそらくエアロパーツの開発も順調に進んでいる事でしょう( ̄▽ ̄) テレビで紹介!Oisixの美味しい野菜を配達で購入。 Lorinser Wheel for Mercedes-Benz W223  装着した画像が公開さ ...

-雑記ブログ
-, ,

© 2023 輸入車カスタムパーツ調査室 Powered by AFFINGER5