ブログ

【超簡単!】ブログ初心者でもできる、メニューをおしゃれにする方法

2020年2月14日

メニューを設定できたけど、他の先輩ブロガーさんみたいに、メニューにアイコンを表示させたい!

 

先輩ブロガーさんのメニューっておしゃれで憧れますよね!

想像してみてください!自分のブログがあんなにおしゃれに作れたらニヤニヤが止まりませんよ!

僕が教えてあげましょう!!

 

今回もそんなブログ開設したての初心者のための記事です。

 

 

本記事の内容

  • メニューの作りかた
  • どこでアイコンを入手するのか
  • メニューにアイコンを表示させる方法

今回は上記の内容でまとめていきます!

 

 

本記事の信憑性

当ブログのメニューを見ていただければわかる通り、アイコンを表示させています。

また、僕自身がブログ開設1か月目で実装できたので、初心者でも分かりやすく書けるかなと思います。

 

メニューの作り方

「ダッシュボード」→「外観」→「メニュー」から、
「新しいメニューを作成」をクリックします。

メニュー構造から、任意でメニュー名をつけ「メニューを作成」をクリックします。

左の「メニュー項目を追加」から「カテゴリー」を選択します。

 

そこで任意でカテゴリーを選択し、「メニューを保存」をクリックします。

選択したカテゴリーを見ると、「ナビゲーションラベル」という項目があるので、
そこを編集していきます。

 

アイコンを入手できるサイト

次にアイコンを用意します。

 

僕がアイコンを入手しているサイト

では、さっそくアイコンをゲットしちゃいましょう。

 

僕がアイコンを入手しているのは、

Font Awesomeというサイトです。

Font Awesome

 

Font Awesomeではたくさんのアイコンが入手することができます。

 

検索バーから欲しいアイコンを検索してもいいですし、たくさんある中から好きなアイコンを探し出しても大丈夫です。

 

注意ポイント

Font Awesomeは日本語対応していないので、検索する際には英語での検索が必須です!

 

メニューにアイコンを表示させる方法

自分の好きなアイコンを見つけることができたら、そのアイコンをクリックします。

 

例として、今回はお問い合わせアイコンを表示させます。

 

すると、下の写真のようになるはずです。

上の写真のある部分をコピペします。

 

<i class="fa fa-envelope-o" aria-hidden="true"></i>


上のコードをコピーしてください。

 

ここからはワードプレスの編集画面に戻ります。

 

先ほど作りかけのメニュー編集画面へ戻り、

ナビゲーションラベルを開きます。

ナビゲーションラベルに先ほどコピーしたコードを貼り付けると、上の写真のようになっているかと思います。

 

しかし、このままではアイコンが表示させられるようになっただけで、文字がでません。

なので、また少しナビゲーションラベルをいじります。

 

<i class="fa fa-envelope-o" aria-hidden="true">お問い合わせ</i>

上記のように、</i>の前にお問い合わせと入力します。

 

入力が終わったらそのままメニューを保存をクリックします。

 

そして、自分のブログのメニューを確認しましょう。

選んだアイコンに入力した文字が反映されていれば完成です!

 

お疲れさまでした!

 

-ブログ
-,

Copyright© 旦那は専業主夫になりたい , 2020 All Rights Reserved Powered by AFFINGER5.