【お寺のHP作成講座16】へようこそ!
ここまでの講座で6つの固定ページを作ってきました。
- 年間行事のページ【講座9】
- アクセスページ【講座10】
- 住職のあいさつページ【講座11】
- 問い合わせページ【講座13】
- 納骨壇・墓地の案内ページ【講座14】
- お寺の紹介ページ【講座15】
しかし今のままではホームページに何も表示されていませんよね。
![トップページの表示](https://temple-hp.com/wp-content/uploads/2021/03/e74c5613cd59b127f2c249d3232e4886-1024x570.png)
トップページもこんな状態でどこにも行けないですもんね。
固定ページはリンクを使ってページへの入り口を作らないとアクセスできません。
![TOPページと固定ページの関係性](https://fukyo-shi.com/wp-content/uploads/2021/03/glovalmenu-1024x683.jpg)
ということで、このページ上部に固定ページへの入り口を作ります。
![グローバルナビの説明図](https://fukyo-shi.com/wp-content/uploads/2021/03/glovalmenu2-1024x683.jpg)
![](https://fukyo-shi.com/wp-content/uploads/2020/07/obosan-e1593602232323.jpg)
これを「グローバルナビ」と言います!
【お寺のHP作成講座16】ではグローバルナビの設定方法を解説します!
グローバルナビの設定方法
まずはワードプレスにログインした状態で、ご自身の制作しているページのトップページを開いてみてください。
ログイン状態ならページ上部に黒いメニューの帯が表示されています。
![WordPressログイン時のトップ画面](https://fukyo-shi.com/wp-content/uploads/2021/03/58b2cd05b7bddca7f7fa7be93da71d6f-1024x452.png)
この中の「カスタマイズ」をクリックしてください。
するとこんな画面になりましたね。
![カスタマイズメニュー](https://fukyo-shi.com/wp-content/uploads/2021/03/d3e0a9758650a4d7144f1e9247c6fbbd-1024x695.png)
このカスタマイズから画面は色の設定やレイアウトの設定が変更できるようになっています。
![](https://fukyo-shi.com/wp-content/uploads/2020/07/obosan-e1593602232323.jpg)
色なども変えたくなりますが、それはまたあとの講座で解説します!
メニューを選択
とりあえず今は「メニュー」を選択してください。
![カスタマイズからメニューを選択](https://fukyo-shi.com/wp-content/uploads/2021/03/menusettei-1024x695.jpg)
そして「新規作成」をクリックします。
![メニューの新規作成ボタン](https://fukyo-shi.com/wp-content/uploads/2021/03/menusettei2.jpg)
PC用(パソコン画面表示用)の設定
まずはパソコンで表示される時のグローバルナビを作ってみましょう。
メニュー名に「PC用グローバルナビ」と入力し、グローバルナビ(PC用)にチェックをいれて「次」をクリックします。
![グローバルナビの設定方法](https://fukyo-shi.com/wp-content/uploads/2021/03/menusettei3-1.jpg)
続いて、「項目を追加」を押すと右側にメニューが開き、これまで作った固定ページの一覧が表示されます。
![グローバルナビに追加するものの候補](https://fukyo-shi.com/wp-content/uploads/2021/03/menusettei4.jpg)
この中から制作した6つのページを選択するとメニューに追加せれて以下のような表示になります。
![固定ページを追加した状態](https://fukyo-shi.com/wp-content/uploads/2021/03/2a4d721523f97db58b596d69259568dc.png)
この時点でプレビュー表示でメニューが表示されていますので、確認しましょう。
![グローバルナビが追加されたプレビュー画面](https://fukyo-shi.com/wp-content/uploads/2021/03/menusettei6-1024x429.jpg)
表示文字の変更
固定ページをグローバルナビに表示した時にタイトルの文字数が多すぎることがあります。
「出模寺へのアクセス」ではちょっと長い感じですよね。
![表示名が長すぎる例](https://fukyo-shi.com/wp-content/uploads/2021/03/0a7fc81c9491a539fccae4b0a5d9ab54-1024x453.jpg)
そんなときには表示の文字を打ち替えましょう。
追加したメニュー名の右端にある「▼」をクリックしてください。
![グローバルメニュー表示名の変更方法](https://fukyo-shi.com/wp-content/uploads/2021/03/navi.jpg)
この中のナビゲーションラベルという部分を打ち替えると表示を変更できます。
![グローバルナビの表示変更方法2](https://fukyo-shi.com/wp-content/uploads/2021/03/ac54e21ff018fd27eb75869c0c38786c.png)
ただの「アクセス」に打ち替えしてみました。
![グローバルナビの表示変更方法2](https://fukyo-shi.com/wp-content/uploads/2021/03/002060b145f715537502bf83499a8d23.png)
内容を確認してOKなら公開を押しましょう。
![公開ボタン](https://fukyo-shi.com/wp-content/uploads/2021/03/navi2.jpg)
これでPC用のグローバルナビが完成しました!
![グローバルナビ追加後のトップ画面](https://fukyo-shi.com/wp-content/uploads/2021/03/2f71159ada57503f0635be9ab369fc13-1024x480.png)
![](https://fukyo-shi.com/wp-content/uploads/2020/07/obosan-e1593602232323.jpg)
一気にサイトっぽくなりましたね!
グローバルナビをクリックして、これまで作ったページに移動するか確認してみてください!
スマホ版のグローバルナビも設定しましょう
現在の状態ではPCで表示した時だけグローバルナビが表示されています。
スマホでも今作ったPC版グローバルナビの表示と同じ内容で良ければ、この「モバイル用」部分にチェックをいれたらスマホ版も設定完了です。
![スマホ版のナビ表示ボタン](https://fukyo-shi.com/wp-content/uploads/2021/03/navi3.jpg)
スマホ表示の場合、メニューの文字列が長いとすべて表示されないことも考慮しておきましょう。
![グローバルナビのスマホ表示](https://fukyo-shi.com/wp-content/uploads/2021/03/IMG_9633-1.jpeg)
スマホ専用表示を作る場合
PCのグローバルナビとは別の並べ方や表示の仕方をしたい場合は、PCと同じように新規メニューを作ります。(例:アクセスを左に持ってきて見つけやすくする、など)
![メニューの新規作成ボタン](https://fukyo-shi.com/wp-content/uploads/2021/03/navi5.jpg)
メニュー名「スマホ用グローバルナビ」と名前をつけて、グローバルナビ(モバイル用)にチェックをいれましょう。
![スマホ用グローバルナビの作成](https://fukyo-shi.com/wp-content/uploads/2021/03/4e0920e8b13928628802fd3ef7e1d6bb.png)
あとはPC版でおこなった作業と同様に、メニューに表示したいページを追加し、名前をつけて公開すれば完了です!
![固定ページを追加したところ](https://fukyo-shi.com/wp-content/uploads/2021/03/5bc7c843c387687db21d6c08f80db29f.png)
グローバルナビの設定が完了
これで一気にホームページらしさがでてきましたね。
項目の名前をクリックしてみてリンクがきちんと機能しているか確認してみてください。
![](https://fukyo-shi.com/wp-content/uploads/2020/07/obosan-e1593602232323.jpg)
ページがちゃんと切り替わったら嬉しいですよね!
お〜動いたっ!みたいな。
あと、もっと細かい設定が知りたかったらSTORK公式のグローバルナビの設定の記事も読んでみてください。
続いての講座では「お知らせ」と「行事のレポート」をわけて投稿するためにカテゴリーを作っていきます。
【お寺のHP作成講座17】カテゴリーの設定方法におすすみください。