【WordPress】簡単にグローバルナビの横にアイコンをつけたい!~コピペでOK~

WordPress
maabuu
maabuu

こんにちは。Maabuuです。

グローバルナビ(ホームページのメニュー)の項目ごとに、小さなアイコンをつけているサイトをよく見かけます。

今回は、当サイトでもグローバルナビにアイコンをつけてみようと思いましたが、、、

maabuu
maabuu

むずそう。。どうするん??

サイトを色々調べてみると意外と簡単にできる事がわかりました!

FontAwesomeを使う

まずメニュー横に表示させてたいアイコンを探します

Search for Font Awesome | 日本語でアイコンフォントを簡単検索
Font Awesomeのアイコンフォントを日本語、英語、カタカナで簡単に検索することができる便利なウェブサービスです。

※日本語対応していてとても探しやすいです。

使いたいアイコンを見つけたら、上記の<i class=”○○”></i>」をコピーします。

 

次に、WordPressの管理画面から

「外観」→「メニュー」をクリックします。
アイコンを入れたいメニューを「選択」します。

今回はヘッダーメニューとフッターメニューにアイコンを入れたいと思います。

「<i class=”○○”></i>」を貼り付けます

「ナビゲーションラベル」のテキスト文字(下記画像だとプロフィール)の前に、先ほど見つけてきた「<i class=”○○”></i>」を貼り付けます。

※私の場合は、テキスト文字の前に半角スペースを入れました。
<i class=”○○”></i>半角スペーステキスト文字

最後に「メニューを保存」をクリックして、完成

このように、アイコンを入れたい箇所に上記を繰り返し行ってください。

アイコンが表示されない場合は、下記(<link~ stylesheet”>)の記述がHTMLソース内に入ってない可能性がございます。
<head>~</head>内に下記の記述をいれてください。
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

※当サイで使用しているWordpressテーマは、無料テーマで有名な「Cocoon」です。

まとめ

本当に簡単にすぐできました。他にもいろいろレイアウトを変えていこうと思いました。

次は何をしようかな~~^^

それではまた^^

コメント

タイトルとURLをコピーしました