これからワードプレスのインストールをする方は下記のサイトにWordPressを始める手順を載せています。
\ サーバーから契約する方はここをクリック!/
![](https://aroma-ecru.com/wp-content/uploads/2022/01/uresiicercle-1-150x150.png)
次は何を作りますか?
![](https://aroma-ecru.com/wp-content/uploads/2021/11/setsukosan03_nocamera-150x150.png)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/setsukosan03_nocamera-150x150.png)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/setsukosan03_nocamera-150x150.png)
今回はグローバルナビとフッターメニュー・スマホ用のフッターメニューを作ります。
この記事はこんな方の悩みの解決されます
- グローバルナビとフッターメニューの設置方法がわかる
- スマホ用のメニュー設定の方法がわかる
グローバルナビ・フッターナビを作る
「外観」→「メニュー」から新しいメニューを作りメニュー名をmainと書く。
メニュー項目を追加欄から作った固定ページの中からグローバルナビに表示したいページにチェックをつけて「メニューに追加」ボタンを押す。
![](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-22-15.02.31-1024x551.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-22-15.02.31-1024x551.jpg)
すると右側「メニュー構造」にチェックをつけた項目が並ぶので好きな順番に並べ替える
![](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-22-15.24.51-1024x596.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-22-15.24.51-1024x596.jpg)
メインビジュアル上にグローバルメニューが表示された。
![](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-22-15.35.56-1024x582.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-22-15.35.56-1024x582.jpg)
同じように「外観」→「メニュー」から新しいメニューを作成、メニュー名「footer」、メニュー設定にフッターにチェックをつける。
![](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-22-15.46.15-1-1024x562.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-22-15.46.15-1-1024x562.jpg)
グローナビと同じようにメニュー項目を追加からフッターに表示したい固定ページにチェックをつけてメニュー構造に移動させる。
「トップページ」という表示を「ホーム」に書き換えてもOKです。(任意です)
![](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-22-15.52.37-1-1024x604.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-22-15.52.37-1-1024x604.jpg)
今回はグローバルナビと同じページをフッターに表示させましたが、別なものでもOKです。
その場合はグローバルナビと同じように固定ページを先に作成してから指定してください。
フッターメニューが表示できた
![](https://aroma-ecru.com/wp-content/uploads/2021/09/57a0c6490fb0b1d51a433c4fae90cd55-602x1024.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2021/09/57a0c6490fb0b1d51a433c4fae90cd55-602x1024.jpg)
スマホ用フッターメニューを作る
- 「外観」→「メニュー」から「新しいメニューを作成しましょう」をクリック
- メニュー名に「固定フッター」と入力
- 「編集するメニューを選択」の横の下向き矢印で「固定フッター(固定フッター(SP))」を選択。
- 3つほどスマホフッターに入れたい項目を「メニュー項目を追加」から選ぶ。
- メニュー設定の「固定フッター(SP)にチェックをつける
![](https://aroma-ecru.com/wp-content/uploads/2021/09/FireShot-Capture-203-1-1024x640.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2021/09/FireShot-Capture-203-1-1024x640.jpg)
スマホ用フッターメニューにアイコンを設定します。
右上の「表示オプション」をクリック
![](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-23-15.54.20-1024x472.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-23-15.54.20-1024x472.jpg)
「説明」にチェックを入れる
![](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-23-15.57.49-1024x319.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-23-15.57.49-1024x319.jpg)
アイコンの番号を入力する
![](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-23-15.59.49-1024x693.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-23-15.59.49-1024x693.jpg)
アイコンの番号はこちらのページに載っています。
https://swell-theme.com/icon-demo/
![](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-23-15.39.49.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2021/09/2021-09-23-15.39.49.jpg)
実際にスマホで確認してみてね。
(フッターメニュー上のイメージが現時点で違いますが気にしないでOKです)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/setsukosan03_nocamera-150x150.png)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/setsukosan03_nocamera-150x150.png)
![](https://aroma-ecru.com/wp-content/uploads/2021/11/setsukosan03_nocamera-150x150.png)
メニューもついてだんだんホームページらしい形になってきました。
続きは色をカスタマイズします。
次の手順はこちらです。
\ SWELL購入はこちらから /
![](https://aroma-ecru.com/wp-content/uploads/2022/11/0115_xlarge-150x150.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2022/11/0115_xlarge-150x150.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2022/11/0115_xlarge-150x150.jpg)
SWELLのテーマを入れたのはいいけれど、どうやったら素敵なデザインになるの?
ブログを始めたくてSWELLを入れたのにつまづいている・・
そんな方に向けてオンラインレッスンもご用意しております。
コメントを投稿するにはログインしてください。