Ver1.3.1をリリースしました(11/22)

メニューの設定をしよう

メニューの設定方法

このページではWordPressテーマ「SANGO」でのメニューの設定方法について解説します。

メニューを作成しよう

WordPressのメニュー設定は、[管理画面]⇒[外観]⇒[メニュー]から行います。

手順1:メニューの新規作成

まずはメニューを作りましょう。②[新規メニューを作成]をクリックし、②メニュー名(「例:PCヘッダーメニュー」)を入力します。③その後[メニューを作成]をクリックします。

メニューを作成する

手順2:メニューをどこに表示させるかを選ぶ

次にメニューをどこに表示させるかを選びます。SANGOではあらかじめ3つのメニューの位置が用意されています。

メニューの表示位置を選択

それぞれのメニューの表示位置と役割については後ほど詳しく説明します。

手順3:メニューの項目を作る

次にメニューに表示させる項目(リンク)の設定を行います。画面左側で「固定ページ」「投稿」「カスタムリンク」「カテゴリー」から項目を作ることができます。

カスタムリンクからは「URL」と「リンク文字列」を自由に決めることができます。

[メニューに追加]をクリックすると、その項目がメニューに追加されます。これを繰り返してメニューの項目を作りましょう。


SANGOのメニュー位置は3箇所

初期設定では、SANGOのメニューは3箇所に設置することができます。どれも任意なので、必ず設定しなければいけないものではありません。

その1:ヘッダーメニュー(PCのみ)

1つめがPC用のヘッダーメニューです。ブラウザの幅が768px以上、かつPCで見た場合のみに表示されます。

PCヘッダーメニュー

通常の表示

ロゴを中央寄せしている場合は下に

ロゴを中央寄せする方法は「ロゴやタイトルの設定をしよう」をご参照ください。また、メニューの色の変更は「カスタマイザーの色設定」から行います。

MEMO
メニューの階層(カーソルを当てると下階層のメニューがずらっと表示されるようなもの)には、対応していません。実装するつもりだったのですが、検討の結果やめました。

参考:展開ボタンに隠れたコンテンツは無視され検索結果の対象にならないかもしれない

そのためにJavascriptを書くのも、非表示コンテンツを増やすのも微妙な気もしたので。

注意
メニュー数を増やしすぎたり、メニューテキストを長くしすぎると次の段へと折り返されて不格好になってしまう恐れがあります。メニュー作成後には、ブラウザサイズを調整しながら表示を確認することをおすすめします。

その2:スライドメニュー(モバイルのみ)

スライドメニューはモバイル(スマホ/タブレット)でのみ表示されるメニューです。PCでは表示されず、モバイルでも768px以上になると非表示になります。

スライドメニュー

画面に収まりきらなかったメニュー項目は右側にスクロールすることで表示されます。「スクロール可能であること」を示すために、ページが読み込まれた際には若干左にスクロールされながら現れる仕様となっています。

なお、「表示されているページ」=「メニューのリンク先」の場合には、テキストの下に下線が引かれます。

MEMO
メニュー項目数はいくつ設定しても構いません(少し多めに設定するのがおすすめです)。

その3:フッターメニュー(ページ最下部)

こちらはPC/モバイル共通のメニューです。全てのページの最下部に表示されます。

フッターメニュー

「利用規約」や「サイトマップ」などへのリンクをこちらに配置することをおすすめします。


参考:メニューテキストにはアイコンが使用可能

なお、メニューの文字列には、FontAwesomeのアイコンフォントを使うこともできます。使い方は簡単で、文字列(ナビゲーションラベル)に表示させたいアイコンコードを貼り付けるだけ。

FontAwesomeの詳しい使い方はこちらの記事を参考にして頂くと良いかと思います(「2.使用準備」は完了しているので「3.使い方」から読んでくださいませ)。

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう
【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

6 Comments

プログラミングど素人

1ヶ月前からサルワカで勉強させてもらっている素人です。今回、SANGOを購入させて頂き、初めてのHP作りに四苦八苦しているのですが、ipad(Chrome)で作ったHPをみたときにヘッダーのメニューが表示されません。何がおかしいのでしょうか?MacとiPhoneでは、ヘッダーにメニューが表示されています。

返信する
サルワカくん

コメントありがとうございます。
該当部分ですが、モバイル(スマホ/タブレット)で画面幅が768px以上の場合にご指摘頂いた現象が発生してしまいます。
というのも、モバイルメニューは画面幅を768px以上にすると、非表示にする設定になっているためです。対処法なのですが、以下のCSSを子テーマのstyle.cssに貼り付けると、モバイルメニューがiPadでも表示されるようになります。
.mobile-nav {
display: block;
}
ご確認よろしくお願い致します。

返信する
プログラミングど素人

ありがとうございました。アップデートしたら表示されるようになりました。

返信する
すえぴー

今回導入させていただきました。
メニューの階層表示は今後も対応する予定はありませんか?
どうにかカスタマイズしようとしていますが、いかんせん素人なもので四苦八苦しております。

返信する
サルワカくん

コメントありがとうございます。
階層メニューですが、多くの方からご要望を頂いているため対応することに致します。
次回アップデートまでお待ちくださいませ。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です