寺院ホームページ作成サービス >>

【お寺のHP作成講座16】サイト上部にメニューを表示するグローバルナビの設定方法

【お寺のHP作成講座16】へようこそ!

ここまでの講座で6つの固定ページを作ってきました。

講座で作った6つの固定ページ

しかし今のままではホームページに何も表示されていませんよね。

トップページの表示
作ったページのどこにもいけない

トップページもこんな状態でどこにも行けないですもんね。

固定ページはリンクを使ってページへの入り口を作らないとアクセスできません。

TOPページと固定ページの関係性

ということで、このページ上部に固定ページへの入り口を作ります。

グローバルナビの説明図
たもんくん

これを「グローバルナビ」と言います!

【お寺のHP作成講座16】ではグローバルナビの設定方法を解説します!

グローバルナビの設定方法

まずはワードプレスにログインした状態で、ご自身の制作しているページのトップページを開いてみてください。

ログイン状態ならページ上部に黒いメニューの帯が表示されています。

WordPressログイン時のトップ画面

この中の「カスタマイズ」をクリックしてください。

するとこんな画面になりましたね。

カスタマイズメニュー

このカスタマイズから画面は色の設定レイアウトの設定が変更できるようになっています。

たもんくん

色なども変えたくなりますが、それはまたあとの講座で解説します!

メニューを選択

とりあえず今は「メニュー」を選択してください。

カスタマイズからメニューを選択

そして「新規作成」をクリックします。

メニューの新規作成ボタン

PC用(パソコン画面表示用)の設定

まずはパソコンで表示される時のグローバルナビを作ってみましょう。

メニュー名に「PC用グローバルナビ」と入力し、グローバルナビ(PC用)にチェックをいれて「次」をクリックします。

グローバルナビの設定方法

続いて、「項目を追加」を押すと右側にメニューが開き、これまで作った固定ページの一覧が表示されます。

グローバルナビに追加するものの候補

この中から制作した6つのページを選択するとメニューに追加せれて以下のような表示になります。

固定ページを追加した状態

この時点でプレビュー表示でメニューが表示されていますので、確認しましょう。

グローバルナビが追加されたプレビュー画面

表示文字の変更

固定ページをグローバルナビに表示した時にタイトルの文字数が多すぎることがあります。

「出模寺へのアクセス」ではちょっと長い感じですよね。

表示名が長すぎる例

そんなときには表示の文字を打ち替えましょう。

追加したメニュー名の右端にある「▼」をクリックしてください。

グローバルメニュー表示名の変更方法

この中のナビゲーションラベルという部分を打ち替えると表示を変更できます。

グローバルナビの表示変更方法2
ナビゲーションラベルを変更する

ただの「アクセス」に打ち替えしてみました。

グローバルナビの表示変更方法2

内容を確認してOKなら公開を押しましょう。

公開ボタン

これでPC用のグローバルナビが完成しました!

グローバルナビ追加後のトップ画面
たもんくん

一気にサイトっぽくなりましたね!

グローバルナビをクリックして、これまで作ったページに移動するか確認してみてください!

スマホ版のグローバルナビも設定しましょう

現在の状態ではPCで表示した時だけグローバルナビが表示されています。

スマホでも今作ったPC版グローバルナビの表示と同じ内奥で良ければ、この「モバイル用」部分にチェックをいれたらスマホ版も設定完了です。

スマホ版のナビ表示ボタン

スマホ表示の場合は文字列が長いとすべて表示されないことも考慮しておきましょう。

グローバルナビのスマホ表示

スマホ専用表示を作る場合

PCのグローバルナビとは別の並べ方や表示の仕方をしたい場合は、PCと同じ用に新規メニューを作ります。(例:アクセスを左に持ってきて目に入るようにするなど)

メニューの新規作成ボタン

メニュー名「スマホ用グローバルナビ」と名前をつけて、グローバルナビ(モバイル用)にチェックをいれましょう。

スマホ用グローバルナビの作成

あとはPC版でした作業と同様に、メニューに表示したいページを追加し、名前をつけて公開すれば完了です!

固定ページを追加したところ

グローバルナビの設定が完了

これで一気にホームページらしさがでてきましたね。

項目の名前をクリックしてみてリンクがきちんと機能しているか確認してみてください。

たもんくん

ページがちゃんと切り替わったら嬉しいですよね!

お〜動いたっ!みたいな。

あと、もっと細かい設定が知りたかったらSTORK公式のグローバルナビの設定の記事も読んでみてください。

参考:STORK19グローバルナビの設定

続いての講座では「お知らせ」と「行事のレポート」をわけて投稿するためにカテゴリーを作っていきます。

【お寺のHP作成講座17】カテゴリーの設定方法におすすみください。

無料の講座です。シェアOK!