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

メニューの設定をしよう

メニューの設定方法

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

メニューを作成しよう

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

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

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

メニューを作成する

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

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

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

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

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

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

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

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


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

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

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

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

PCヘッダーメニュー

通常の表示

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

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

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

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

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

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

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

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

スライドメニュー

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

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

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

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

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

フッターメニュー

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


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

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

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

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

その4:フッター固定メニュー(モバイルのみ)

モバイル(スマホ/タブレット)では、画面下部に固定されるメニューを表示することができます。設定手順が他のメニューとは異なるため、詳しくは以下の記事をご覧くださいませ。

モバイル用フッター固定メニューの設定方法

45 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でうまく表示できました!
大変助かりました。今後ともどうぞよろしくお願いいたします!

返信する
母ちゃん

こんにちは。
基本設定を色々としていましたら、ふと気がつくとカテゴリーのラベルが消えていました。消す設定をした記憶はないのですが、どうしたら復活させられるでしょうか?
お手数ですが、どうぞよろしくお願いいたします。

返信する
サルワカくん

トップページの記事一覧(カードタイプ)でもラベルが消えておりますか?
・カテゴリーページの場合
・トップページで記事一覧を横長のレイアウトにした場合
だともとからラベルが非表示の設定になっています。

返信する
ネコ

大変お世話になっております。ありがとうございます。
SANGO ver.1.3.3を使用させていただいております。

[外観]-[メニュー]画面で、表示オプションの「詳細メニュー設定を表示」の説明にチェックを入れて、メニュー構造の各項目の「説明」欄に文字列を入力すると、メニューの項目文字列の下に、説明の文字列が表示されることを期待しておりましたが、なぜか表示されません。原因がわかるようでしたら、アドバイスをいただけないでしょうか?

返信する
サルワカくん

お世話になっております。
大変恐縮ながら、メニュータイトル下に説明を表示する機能には対応しておりません…。
なのですが、ちょっとしたカスタマイズで実装ができそうです。
よくある質問に「PCヘッダーメニューのタイトル下にラベル(説明)を表示したい」という項目を追加したのでご確認頂けますか?

返信する
ネコ

サルワカさん、超速のご教示をありがとうございました。

おかげさまで、うまく行ったのですが、一点問題がありました。

[外観]-[メニュー]画面のメニュー構造の各項目の[ナビゲーションラベル]で、Font Awesomeを使用しておりまして、タイトル文字列の前に、を付加しています。これだと、ラベル(説明)文字列がメニュータイトル下ではなく、メニュータイトルの左横に表示されてしまうんですね。この問題に対処するため、試行錯誤中です(^_^;

返信する
サルワカくん

なるほど。
それであれば
①functions.phpに貼り付けたコードのうち、<br />を削除。
②CSSを以下に書き換え

@media screen and (min-width: 767px) {
  .desktop-nav li a {
    line-height: 17px;
    padding-top: 15px;
    text-align: center;
    position: relative;
  }
  .desktop-nav li a span {
    position: absolute;
    top: 35px;
    display: block;
    width: calc(100% - 20px);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
  }
}

お願いします!

返信する
ネコ

サルワカさん、ありがとうございました!
うまく行きました。超速ご教示に感謝いたしますm(__)m

マントヒヒ

はじめまして、自社サロンのサイトにSANGOを使わせていただいております。

サロンメニュー表のページを「初来店者」と「再来店者」で分けたいのですがタブメニューで分けられないものかなとカスタマイズガイドを拝見しましたが、無いようでした。
今後のアップデートで「タブメニュー」機能を追加する予定はありますでしょうか。

返信する
サルワカくん

タブメニューの実装は検討しておりますが、もうしばらくかかりそうです。
それまではShortcode unlimitedなどのプラグインでご対応頂ければ幸いです。

返信する
るーろす

こんにちは。
フッター内のコピーライトの表記を変えることはできないのでしょうか?カスタマイザーから簡単に変えられるとより便利だと思うのですが…
よろしくお願い致します。

返信する
サルワカくん

コピーライトについては、あまり変更したいという要望を聞かないため
カスタマイズにより変更頂いている状況です。
サクッと変えたい場合には以下のCSSを追加して頂ければと思います。

#footer-menu:after {
    content: 'Copyrightの表記をここに';
    display: block;
    color: #FFF;
    font-size: 0.9em;
}
.copyright.dfont {
    display: none;
}

「Copyrightの表記をここに」という部分を書き換えて頂ければ。

返信する
大島 早希

はじめまして。
wordpress初心者です。少し前にSANGOを購入させていただきました。
サイドバーのカスタマイズで教えてもらいたいことがあります。
サイドバーにカテゴリー別のタイトルを載せたのですが、
タイトルの並び順は変更することができますか?
よろしくお願いします。

返信する
パットメセニー

お世話になっております。初めて使用させていただいております。
Font Awesomeに関しまして
外観→メニュー→固定ページメニュー→ナビゲーションラベル に
営業時間・アクセス を設定しているのですが表示ではアイコンの代わりに四角枠が表示されます。使用法間違っていますでしょうか?
どうぞよろしくお願いします。

返信する
サルワカくん

FontAwesome5のアイコンを使用していませんか?
SANGOでは、FontAwesome4を利用しているので、こちらからアイコンをお選びください。

返信する
パットメセニー

その通りでございました。表示されました。
ありがとうございます。

返信する
ケムシ

コメント失礼します
PC用メニューは表示されるのですが、
モバイルメニューが表示されず困っています

外観→メニューに新規作成後 スライドメニュー(モバイルのみ)の設定し反映させています。その他ウィジェットのハンバーガーメニューも表示されません。

テーマ 最新
WordPress 4.9.5

お忙しいと思いますが、ご教授の程よろしくお願いします。

返信する
サルワカくん

よくある原因としては
① キャッシュ系のプラグインによりモバイルでも、PCと同じデータが表示されている(その場合、プラグインの設定を見直す必要あり)
② AWS Cloudfrontを使ってキャッシュでページを表示している
③ メニューを正しく設定できていない
などでしょうか。プラグインを一度すべて停止したうえで確認してみましたか?

返信する
ココア

お世話になっております。コメント失礼します。

スマホでのメニューについて質問させて下さい。
SANGOを使用している方で何人か同じような表示のさせ方をしている方がいたので、どうやってやるのか知りたくてコメントしました。

ウェブサイト欄にその方のURLを添付します。

お忙しいと思いますが、ご教授の程よろしくお願いします。

返信する
ココア

大変申し訳ございません。
説明不足でした。

フッターではなく、ヘッダーメニューの方です。
スマホでもヘッダーメニューが表示され、6個に区切られている(?)ような感じになっているんです。

お忙しいと思いますが、ご教授の程よろしくお願いします。

返信する
サルワカくん

そういうことですね。
この部分はサイト運営者様がカスタマイズして作ったもののようです。
申し訳ありませんが、制作者様の表現を尊重するためにも、
私の方でカスタマイズ方法を公開することはできません。
ご理解頂けると幸いです。

返信する

コメントを残す

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