このような疑問に対しシンプルにお答えします。
この記事は初心者でもわかりやすいように、設定方法を画像つきで解説しています。
今回は、スマホ用メニューの色や配置などデザイン変更に関する記事となります。作成方法については、「AFFINGER5でスマホ画面用のメニューを作成する方法」を参考にしてください。
スマホ画面 メニューの種類
スマホ画面用には、以下3種類のメニューを設定することができます。
- スマホ用スライドメニュー
- スマホ用ミドルメニュー
- スマホ用メニュー（横並び）
それぞれのメニューは、以下のように表示されます。
この3種類のメニューに対し、それぞれどのようなデザイン変更ができるのか見ていきます。
スライドメニューの設定
スライドメニューについては、以下の６つの設定項目があります。
- アイコンのデザイン設定
- メニューの配置設定
- 追加メニューの設定
- サイトタイトルの配置設定
- メニュー内に最新投稿を設定
- メニューのカラー設定
- 検索アイコンの設定
順に解説します。
アイコンのデザイン設定
WordPressの管理画面から「AFFINGER5管理」をクリックします。
「メニュー」をクリックします。
「スマホ用スライドメニュー」の欄の「アイコンのデザイン」から、お好みのデザインを設定し、「save」をクリックします。
アイコンが変更されました。
簡単ですね。
メニューの配置設定
WordPressの管理画面から「AFFINGER5管理」をクリックします。
「メニュー」をクリックします。
「スマホ用スライドメニュー」の欄の「メニューの位置」から、右もしくは左のどちらかの位置を選択し、「save」をクリックします。
設定した位置に、アイコンが配置されました。
簡単ですね。
追加メニューの設定
WordPressの管理画面から「AFFINGER5管理」をクリックします。
「メニュー」をクリックします。
「スマホ用スライドメニュー」の欄の「追加メニュー１」「追加メニュー２」から設定することができます。今回は、Twitterとinstagramのリンクを追加します。「Webフォント」「メニューに表示する文字」「リンク先URL」に、それぞれ必要情報を入力し、「save」をクリックします。
「Webフォント」のフォント名がわからない場合は、「Font Awesome」から確認してください。（例；Twitterの場合は「fa-twitter」）
Twitterとinstagramのメニューがアイコンが追加されました。
簡単ですね。
サイトタイトルの配置設定
WordPressの管理画面から「外観」の「カスタマイズ」をクリックします。
「ロゴ画像」をクリックします。
次に、「モバイル用ロゴ（又はタイトル）を使用する」にチェックをいれます。
ポイント
「モバイル用ロゴ（又はタイトル）を使用する」にチェックをいれる事で、ロゴ及びサイト名がメニュー欄に並べて表示されるようになります。また、ロゴ画像を大きくしたい、センター寄せしたい場合は、「モバイル用ロゴ画像サイズ調整」「モバイル用ロゴをセンター寄せ」にもチェックいれてください。
メニューバーにロゴ（サイトタイトル）が表示されるようになりました。
注意ポイント
メニューにロゴ（サイトタイトル）を設定すると、「追加メニュー」は表示されなくなりますので、注意してください。
簡単ですね。
サイトタイトルに関する記事は、以下の記事もあるので、参考にしてみてください。
メニュー内に最新投稿を設定
WordPressの管理画面から「外観」の「ウィジェット」をクリックします。
「05_STINGER最新の投稿一覧」をクリックします。
「スライドメニュー内下に表示」にチェックをいれ、「ウィジェットを追加」をクリックします。
スライドメニュー内の下側に最新記事が表示されました。
簡単ですね。
カラー設定（スライドメニュー）
WordPressの管理画面から「外観」の「カスタマイズ」をクリックします。
「メニューカラー設定」をクリックし、「スマホスライドメニュー」をクリックします。
以下８箇所に好きな色を選択し、「公開」をクリックします。
メニューバーがカラフルになりました。「モバイル用ロゴを使用する」を設定する場合、しない場合でも比較しました。
次に、スライドメニュー内の設定です。３箇所に好きな色を選択し、「公開」をクリックします。
スライドメニュー内がカラフルになりました。
簡単ですね。
検索アイコンの設定
WordPressの管理画面から「AFFINGER5管理」をクリックします。
「メニュー」をクリックします。
「スマホ用スライドメニュー」の欄の「検索アイコン」から、「モバイルヘッダーに検索アイコンを追加する」にチェックをいれ、「save」をクリックします。
検索アイコンが配置されました。
「オーバーレイ」と「スライド」の設定によって、検索アイコンをクリックした際の表示方法を変更できます。
簡単ですね。
ミドルメニューの設定
ミドルメニューについては、以下の２つの設定項目があります。
- メニューの２列から３列表示設定
- メニューのカラー設定
順をおって解説します。
２列から３列表示設定
WordPressの管理画面から「AFFINGER5管理」をクリックします。
「メニュー」をクリックします。
「スマホ用スライドメニュー」の欄の「スマホ様ミドルメニューを３列にする」にチェックをいれ、「save」をクリックします。
２列表示から３列表示に変更されました。
簡単ですね。
カラー設定（ミドルメニュー）
WordPressの管理画面から「外観」の「カスタマイズ」をクリックします。
「メニューカラー設定」をクリックし、「スマホミドル/横列メニュー」をクリックします。
以下４箇所に好きな色を選択し、「公開」をクリックします。
ミドルメニューがカラフルになりました。
簡単ですね。
メニュー（横並び） の設定
メニュー（横並び）については、カラー設定のみとなります。
カラー設定（メニュー横並び）
WordPressの管理画面から「外観」の「カスタマイズ」をクリックします。
「メニューカラー設定」をクリックし、「スマホミドル/横列メニュー」をクリックします。
以下３箇所に好きな色を選択し、「公開」をクリックします。
注意ポイント
メニュー（横並び）設定時は、「ボーダー色」が反映されないので注意してください。
メニュー（横並び）がカラフルになりました。
簡単ですね。
まとめ
今回、スマホ画面用メニューのデザインについて解説しました。色々と試してみて自分好みのデザインを探してみてください。
最後までお読みいただきありがとうございました。
を使ってますが、 スマホ画面用のメニューの色や配置変更って、どのように設定するればよいか教えてください？ このような疑問に対しシンプルにお答え){kind=link}