Ver1.3.2をリリースしました(1/27)

メニューの設定をしよう

メニューの設定方法

このページでは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
メニュー項目数はいくつ設定しても構いません(少し多めに設定するのがおすすめです)。
MEMO
ハンバーガーメニューはウィジェットの設定から設置することができます。

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

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

フッターメニュー

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


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

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

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

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

22 Comments

プログラミングど素人

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

返信する
サルワカくん

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

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

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

返信する
すえぴー

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

返信する
サルワカくん

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

返信する
hiiro

はじめまして。モバイル用のデザインですが、スライドニューは表示されますが、左上のプルダウンメニューが表示されません。設定はどこでしたら良いのでしょうか?よろしくお願いいたします。

返信する
natsumi

はじめまして。いつもサルワカを拝見させていただいています。
特定のページのみ、グロナビにページ内見出しIDを個別で設定することは可能でしょうか?また実装予定はありますでしょうか。

サルワカの漫画記事のようにしたいです。
https://saruwakakun.com/life/bestbooks#manabi

返信する
サルワカくん

WordPressの通常機能では難しいですね・・・。
(サルワカの該当記事は、HTMLファイルをイチから作成サーバーにアップロードして表示させています)
申し訳ありませんが、ご理解頂けますと幸いです。

返信する
AKIHIRO

大変素晴らしい内容だと感じたので、昨日購入させていただきました。感謝しています。素人なのでいま必死で構築中です。

申し訳ありませんが、メニューの階層表示(ドロップダウン)について2点質問があります。

1:親メニューを非リンク扱い(クリック・タップしても無反応で、ドロップダウンだけできる状態)にするにはどうすれば良いでしょうか。これまでは親メニューのタイトル属性を仮にnoeventにし、スタイルシートに
a[title=”noevent”] { pointer-events: none; }
と追記することで対応していましたが、今回PCサイトではこの方法が通じません。一方、モバイルサイトのヘッダーメニューとハンバーガーメニューでは有効になります。

→いまアップされたばかりのver.1.33にしたら改善できました!いやそもそも自分のカン違いなのか・・・せっかく文章を作ったので、他の方のご参考になればと思い残しておきます。

2:モバイルのヘッダーメニューはドロップダウンにはならない仕様なのでしょうか(PCはカーソルを合わせればドロップダウンになりますが、モバイルはタップしたらドロップダウンが出るイメージを望んでいます)。もし難しいなら、やむなく親メニューの非リンクは解除し、その先をドロップダウンリストを同じものに作っておくことで対応したいと思います。

以上、何卒よろしくお願いいたします。

返信する
サルワカくん

1について、ご報告ありがとうございます。なんでしょうね。そのあたりの仕様にはVer1.3.3で一切変えていないので、キャッシュが残ってしまっていたという可能性は考えられます(削除されているかもしれませんが)。
2について、大変申し訳ないのですが、モバイルのタイトル下メニューをドロップダウンにするのは少しむずかしいですね…。
PCだとカーソルのホバーしたときに…という挙動にできるのですが、スマホだとホバーという動作が無く「タップしたときに」になるので、
テーマとして実装すると、色々と問題が生じてきます。
恐れ入りますが、ご了承お願いします。

返信する
AKIHIRO

さっそくのご返信ありがとうございます。今のベストを尽くしていただければ十分です。それを補っても余りあるほど良いテーマだと感じています。ではモバイルファーストの考えに従い対応したいと思います。

また、サルワカさんのあまりにご丁寧なコンテンツを拝見し、今まで挫折しかかっていましたが、何とかできそうだという希望を見出せました。ツイッターフォローさせていただきます。今後も応援しています!

返信する
サルワカくん

ありがとうございます。
そう言って頂けるととても嬉しいです。今後ともよろしくおねがいします。

返信する
MR

素敵なテーマありがとうございます。

Font Awesome 5 が出ているので、使用しようと子テーマのheader.phpの内にCDNscriptを追記したところ、記事下のSHARE!の各種ソーシャルアイコンやモバイル用固定フッターのシェア時ソーシャルアイコンが表示されなくなってしまいました。

Font Awesome 5のCDNを消すと、きちんと表示されます。

現状、ソーシャルボタンを使いたい場合、Font Awesome 5を併用して使うことはできないということでしょうか?

返信する
サルワカくん

私の方でも試してみましたが、問題なく使うことができました。
併用は重くなるので、FontAwesome5だけを使うのが良いかと思います。以下のコードを子テーマなどのfunctions.phpに追記すれば、FontAwesome5が使えるようになるかと思います。
※CDNのURLの部分をコピペで変えてくださいませ。

//FontAwesome5に変更
function register_fontawesome5() {
     wp_deregister_style('sng-fontawesome');//旧FontAwesomeを解除
     wp_register_style( 'sng-fontawesome5', 'FontAwesome5のCDNのURL', array(), '', 'all' );
     wp_enqueue_script('sng-fontawesome5');
}
add_action('wp_enqueue_scripts', 'register_fontawesome5');
//END FontAwesome5に変更

ただし、一部アイコン名が変わっているかもしれないので、その場合にはアイコン名を変更して頂く必要があります。

返信する
MR

ご返信ありがとうございます。
そちらのコードをfunctions.phpに追記してキャッシュ削除を試してみましたが、Font Awesome5のアイコンを使うことができませんでした。
おそらく、こちらの環境特有の不具合なのだと思いますので、FA5の仕様は諦めることにしました。

またいつか試してみたいと思います。

返信する
サルワカくん

本当ですか・・・。
そのうちアップデートで可能であれば、FontAwesome5への切替も行おうと思います。

返信する
ブログ初心者

はじめまして。ブログを始めるにあたり、こちらのSANGOに一目惚れして購入しました。
メニューの文字列に、FontAwesomeのアイコンフォントを使う場合、文字列(ナビゲーションラベル)に表示させたいアイコンコードを貼り付けるだけとのことですが、うまく表示されません。
外観>メニュー>メニュー構造>任意のカテゴリ内のナビゲーションラベル にFontAwesomeの任意のアイコンのコードを貼り付けるだけでいいのでしょうか?
「【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう」のページも見ましたが、なぜかうまくいきません。
素人の質問で大変恐縮ですが、ご教示いただけないでしょうか。
どうぞよろしくお願いいたします。

返信する
サルワカくん

SANGOでは、FontAwesomeのVer4を利用しています。Ver.5のアイコンを利用していると、うまく表示されないことがあります。Ver4のアイコン一覧からご利用してみて頂けますか?

返信する
ブログ初心者

早速ご回答いただきありがとうございます!
旧verでうまく表示できました!
大変助かりました。今後ともどうぞよろしくお願いいたします!

返信する

コメントを残す

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