WordPressテーマdeerでスマホメニューにアイコンを設定する方法
WordPressテーマdeerには、以下のようにスマホ・タブレットから見た時にサイトの上部メニューにアイコンを置くことができます。
↓ このようなアイコン付きのメニューにできます。
![スマホメニューアイコン2](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/08/242d5a9ec8f9fdacc957950e6c6e615a.jpg)
↓ あなたの用意した写真や画像も使えます
![スマホメニューアイコン2](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/08/fb95b5e52eeb8079561bc55d0b2e73c0.jpg)
このように、メニューにアイコンや画像を置くことで更にデザイン性の高いWebサイトにすることができます。そこで今回は、WordPressテーマ「deer」でスマホ・タブレットメニュー用にアイコンや画像を追加する方法を解説します。
準備編:スマホ用のナビメニューを作ろう
まずは、スマホ用のナビメニューを作ってください。
↓ 「外観」⇒「メニュー」をクリック
![スマホメニューアイコン設置方法](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/08/6ecd59d57aaa6ebbb925634bff238ed0.png)
↓ スマホ用のメニューとわかるような名前をつけ、メニュー設定の部分も「スマホナビ」にチェックを入れて保存して下さい。
![スマホメニューアイコン設置方法](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/08/23b3f9323b809d2792192d8d83c006dc.png)
ナビゲーションメニューの設定方法は、「WordPressのナビゲーションメニューを設定しよう」で詳しく解説していますので、そちらを参考にしてみてください。
ここまでできたら、各メニューにアイコンを付けていきましょう。
スマホ・タブレット用メニューにアイコンを付ける方法
大きく分けて2種類の方法があります。
- Fontawesomeのアイコンを使う方法
- 自分で用意した画像を使う方法
それぞれを解説します。
1.Fontawesomeのアイコンを使う方法
Fontawesomeというのは、アイコンフォントを色々そろえているサイトです。このサイトの無料プランのアイコンフォントはdeerで使うことができるため、メニューに設置することができます。
まずは、deerでアイコンフォントを使えるようにするために、以下の設定をしておいてください。
↓「外観」⇒「カスタマイズ」⇒「Webサイト高速化の設定」
![スマホメニューアイコン設置方法](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/08/641efe7539eb371b12530d993f4f5a05.jpg)
↓ Fontawesome読込み設定を「Fontawesome Free iconをすべて読込む」にチェックして公開。
![スマホメニューアイコン設置方法](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/08/206bfdf0ad2cea5a426af08204bdbb7a.jpg)
続いて、Fontawesome公式サイトへ飛びましょう。
↓ 「Free」(無料)にチェックがついていることを確認し、設置したいアイコンフォントを選んで下さい。
![スマホメニューアイコン設置方法](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/08/0e3431955da00f7c08be2851abe93f73.png)
↓ 次に<i class="~~"></i>
というコードをコピーして下さい。
![スマホメニューアイコン設置方法](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/08/6b3b6263486688cec945130bbc0d3dac.png)
↓ コピーしたコードを、設置したいナビゲーションラベルのメニューの直前に貼り付けてください。
![スマホメニューアイコン設置方法](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/08/6893c1d1d661216135c83d0e9fc27e1a.png)
例えば、「プロフィール」というメニューにアイコンを設置したい場合、<i class="~"></i>プロフィール
となるようにして下さい。
↓ 忘れずに「メニューを保存」を押して下さい。
![スマホメニューアイコン設置方法](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/08/ea048fe9e927bb131d08788bacd1db98.png)
同様に他のメニューにも設置したいアイコンのコードをコピペしていけば、各メニューに可愛いアイコンフォントを設置することができます↓
![スマホメニューアイコン2](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/08/242d5a9ec8f9fdacc957950e6c6e615a.jpg)
2.自作の画像や写真を使う場合
まずは、横60px ✕ 縦60px の大きさ画像を用意して下さい。
↑ こんな感じの画像です。
準備できたら、画像はWordPressの「メディア」⇒「ライブラリ」にアップロードして追加しておきます。
![スマホメニューアイコン](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/08/1b9d2f0adddf386e7055a18d5b3902cf.jpg)
↓ アイコンに使いたい画像をアップロードしましょう。
![スマホメニューアイコン](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/08/a2edc512fced36cc2ee2a47522f7bf20.jpg)
アップロードできたら、メディアライブラリの使いたい画像をクリックして選択。
![スマホメニューアイコン設置方法](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/08/0d0abaeb3af6bee09d5977e7a387db5e.png)
↓ ファイルのURLをコピーします。「URLをクリックボードにコピー」をクリックするとURLがコピーされます。
![スマホメニューアイコン設置方法](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/08/c337ecb7229dec28be8e59e02d59604c.png)
↓ コピーしたURLは、以下のコードの「ここに画像URL」の部分に入るようにコードを作って下さい。
<img src="ここに画像URL"/ width="60" height="60">
↓ 例えばこのような形になると思います。【完成形】
<img src="https://digima-lab.com/wp-content/uploads/2021/08/aikon4.png"/ width="60" height="60">
↓ あとは、完成形の画像のコードを、「外観」⇒「メニュー」で設置したいメニューラベルの日本語の直前に貼り付けてください。
![スマホメニューアイコン設置方法](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/08/4a9859ca7d4a301d46a6bba238b80ea0.png)
↓ 貼り付けると、コードが長いので全体が見えませんが、<img src="https://digima-lab.com/wp-content/uploads/2021/08/aikon4.png"/ width="60" height="60">メニュー一覧
のようになっていればOKです。
![スマホメニューアイコン設置方法](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/08/f25f1d759409c013780b3da2d3f67ebb.png)
↓ 忘れずに「メニューを保存」をクリック!
![スマホメニューアイコン設置方法](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/08/ea048fe9e927bb131d08788bacd1db98.png)
あとは、同様に色んな画像をメニューに設置すると以下のように可愛いメニューになります↓↓
![スマホメニューアイコン2](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/08/fb95b5e52eeb8079561bc55d0b2e73c0.jpg)
ということで、今回はWordPressテーマdeerでスマホ・タブレット用メニューにアイコンや画像を設置する方法を解説しました。
結果を出すために、派手さはいらない
「集客」に使うことだけを徹底的に考えて作ったWordPressテーマ
![deerのロゴ(白)文字入り](https://fanfare-co-ltd.com/deer/wp-content/uploads/2021/07/6fc9dfa4a44ab47d794f3145134a7d91-2.png)
決して多機能ではありませんが、使う機能を必要最低限に限定してシンプルにしているからこそ使いやすい、初心者さんに優しいテーマです。