![](https://yusu-ke-blog.com/wp-content/themes/affinger/images/no-img.png)
このような疑問に対しシンプルにお答えします。
この記事は初心者でもわかりやすいように、設定方法を画像つきで解説しています。
今回は、スマホ用メニューの色や配置などデザイン変更に関する記事となります。作成方法については、「AFFINGER5でスマホ画面用のメニューを作成する方法」を参考にしてください。
スマホ画面 メニューの種類
スマホ画面用には、以下3種類のメニューを設定することができます。
- スマホ用スライドメニュー
- スマホ用ミドルメニュー
- スマホ用メニュー(横並び)
それぞれのメニューは、以下のように表示されます。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/3ba18e1f0af5cf9028aee9c98fe6a1f4.png)
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/03cbf1c94bca900e74881f096691fd82.png)
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/6d1f12a1dc744f9c5613b7df3d762c73.png)
この3種類のメニューに対し、それぞれどのようなデザイン変更ができるのか見ていきます。
スライドメニューの設定
スライドメニューについては、以下の6つの設定項目があります。
- アイコンのデザイン設定
- メニューの配置設定
- 追加メニューの設定
- サイトタイトルの配置設定
- メニュー内に最新投稿を設定
- メニューのカラー設定
- 検索アイコンの設定
順に解説します。
アイコンのデザイン設定
WordPressの管理画面から「AFFINGER5管理」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/29781e9d5c493f388a64f448be19204c.png)
「メニュー」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/ef2c123f6f0fa9707f4c49c2c8fd58d7.png)
「スマホ用スライドメニュー」の欄の「アイコンのデザイン」から、お好みのデザインを設定し、「save」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/00a0266ba62bff368339bd57bc53d3e3.png)
アイコンが変更されました。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/fa7b78984603c1bc4cb46190d845978e.png)
簡単ですね。
メニューの配置設定
WordPressの管理画面から「AFFINGER5管理」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/29781e9d5c493f388a64f448be19204c.png)
「メニュー」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/ef2c123f6f0fa9707f4c49c2c8fd58d7.png)
「スマホ用スライドメニュー」の欄の「メニューの位置」から、右もしくは左のどちらかの位置を選択し、「save」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/7581ada11980076f213e4f29cbb27deb.png)
設定した位置に、アイコンが配置されました。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/477dd3550f3ea11b1d113d17fed10af5.png)
簡単ですね。
追加メニューの設定
WordPressの管理画面から「AFFINGER5管理」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/29781e9d5c493f388a64f448be19204c.png)
「メニュー」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/ef2c123f6f0fa9707f4c49c2c8fd58d7.png)
「スマホ用スライドメニュー」の欄の「追加メニュー1」「追加メニュー2」から設定することができます。今回は、Twitterとinstagramのリンクを追加します。「Webフォント」「メニューに表示する文字」「リンク先URL」に、それぞれ必要情報を入力し、「save」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/65f0a61cca41ae5da26d4f477dbbf560.png)
「Webフォント」のフォント名がわからない場合は、「Font Awesome」から確認してください。(例;Twitterの場合は「fa-twitter」)
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/7-FontG2.png)
Twitterとinstagramのメニューがアイコンが追加されました。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/18f3e8bea13a9df54d9842b9a2c4c869.png)
簡単ですね。
サイトタイトルの配置設定
WordPressの管理画面から「外観」の「カスタマイズ」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/01/a6e7f80b355e03b85f2d076f4ef2da12.png)
「ロゴ画像」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/01/50e2b0ce4c5825dff9cd28daadaff28a.png)
次に、「モバイル用ロゴ(又はタイトル)を使用する」にチェックをいれます。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/0182c163a9b2b5851c07a064c9c1ebfa.png)
ポイント
「モバイル用ロゴ(又はタイトル)を使用する」にチェックをいれる事で、ロゴ及びサイト名がメニュー欄に並べて表示されるようになります。また、ロゴ画像を大きくしたい、センター寄せしたい場合は、「モバイル用ロゴ画像サイズ調整」「モバイル用ロゴをセンター寄せ」にもチェックいれてください。
メニューバーにロゴ(サイトタイトル)が表示されるようになりました。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/47259732ecf6b53f195f0357d055bf5e.png)
注意ポイント
メニューにロゴ(サイトタイトル)を設定すると、「追加メニュー」は表示されなくなりますので、注意してください。
簡単ですね。
サイトタイトルに関する記事は、以下の記事もあるので、参考にしてみてください。
メニュー内に最新投稿を設定
WordPressの管理画面から「外観」の「ウィジェット」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/0ee2b4553bb0c6b502d62fe260269730.png)
「05_STINGER最新の投稿一覧」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/9e34cbb5a1a15d5edf8bf46800aa5956.png)
「スライドメニュー内下に表示」にチェックをいれ、「ウィジェットを追加」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/69270bebe27c54d11e9a2def31369ab2.png)
スライドメニュー内の下側に最新記事が表示されました。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/c681408473d5027441b5428b2eed4e42.png)
簡単ですね。
カラー設定(スライドメニュー)
WordPressの管理画面から「外観」の「カスタマイズ」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/01/a6e7f80b355e03b85f2d076f4ef2da12.png)
「メニューカラー設定」をクリックし、「スマホスライドメニュー」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/b3e962dacc9145e79047efed01e8c25f.png)
以下8箇所に好きな色を選択し、「公開」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/3b83c2ee6d08eceda0d34e4006f55d55.png)
メニューバーがカラフルになりました。「モバイル用ロゴを使用する」を設定する場合、しない場合でも比較しました。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/49ccc90ca93e86b077cc2eb57eecf7ef.png)
次に、スライドメニュー内の設定です。3箇所に好きな色を選択し、「公開」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/c49ae09d8786f14a28c0f6d55e227aaf.png)
スライドメニュー内がカラフルになりました。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/2b6effba68cd412ffd680eb1584d9c0d.png)
簡単ですね。
検索アイコンの設定
WordPressの管理画面から「AFFINGER5管理」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/29781e9d5c493f388a64f448be19204c.png)
「メニュー」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/ef2c123f6f0fa9707f4c49c2c8fd58d7.png)
「スマホ用スライドメニュー」の欄の「検索アイコン」から、「モバイルヘッダーに検索アイコンを追加する」にチェックをいれ、「save」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/cf455ab0bc2f7b25ebc3eb2dc62c5b6e.png)
検索アイコンが配置されました。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/6ba4cb94b02fc85ae30408d1f6ca6d7a.png)
「オーバーレイ」と「スライド」の設定によって、検索アイコンをクリックした際の表示方法を変更できます。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/9ff044dd1c4240c49876e1b36ec8f265.png)
簡単ですね。
ミドルメニューの設定
ミドルメニューについては、以下の2つの設定項目があります。
- メニューの2列から3列表示設定
- メニューのカラー設定
順をおって解説します。
2列から3列表示設定
WordPressの管理画面から「AFFINGER5管理」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/29781e9d5c493f388a64f448be19204c.png)
「メニュー」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/ef2c123f6f0fa9707f4c49c2c8fd58d7.png)
「スマホ用スライドメニュー」の欄の「スマホ様ミドルメニューを3列にする」にチェックをいれ、「save」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/dfa11535fc64d89a3feb2f5bb2e1e44c.png)
2列表示から3列表示に変更されました。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/740c6792ded637eaa8cab3497f4a56d7.png)
簡単ですね。
カラー設定(ミドルメニュー)
WordPressの管理画面から「外観」の「カスタマイズ」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/01/a6e7f80b355e03b85f2d076f4ef2da12.png)
「メニューカラー設定」をクリックし、「スマホミドル/横列メニュー」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/cd389e76b16c49cb20fcd948cfadb52a.png)
以下4箇所に好きな色を選択し、「公開」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/0bcdc6777490bba748e584d1b0a2b247.png)
ミドルメニューがカラフルになりました。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/eae1da49a052453d18dbd4709d96faf8.png)
簡単ですね。
メニュー(横並び) の設定
メニュー(横並び)については、カラー設定のみとなります。
カラー設定(メニュー横並び)
WordPressの管理画面から「外観」の「カスタマイズ」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/01/a6e7f80b355e03b85f2d076f4ef2da12.png)
「メニューカラー設定」をクリックし、「スマホミドル/横列メニュー」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/cd389e76b16c49cb20fcd948cfadb52a.png)
以下3箇所に好きな色を選択し、「公開」をクリックします。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/482fb3f911f3415f106d77f3e8a9fe10.png)
注意ポイント
メニュー(横並び)設定時は、「ボーダー色」が反映されないので注意してください。
メニュー(横並び)がカラフルになりました。
![](https://yusu-ke-blog.com/wp-content/uploads/2021/03/12a939c2add1590c3f6d19d09c27f847.png)
簡単ですね。
まとめ
今回、スマホ画面用メニューのデザインについて解説しました。色々と試してみて自分好みのデザインを探してみてください。
最後までお読みいただきありがとうございました。