1.8.6 Released !

メニューの設定をしよう

メニューの設定方法

このページでは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のアイコンフォントを使うこともできます。

参考:SANGOFontAwesome対応

バージョンや設定により使用可能なFontAwesomeのアイコンが異なります。SANGO v1.7以上をご利用の場合、FontAwesome5がデフォルトで有効になっています。詳しくはこちらをご覧ください。

参考:ヘッダーメニューに検索ボタンを設置することも

SANGO v1.8以上をご利用の場合、ヘッダーメニューに検索ボタンを使用することもできます。利用するためにはメニューに「カスタムリンク」の項目を追加し、以下のように設定を行います。

URL#sng_search
ナビゲーションラベル<label for="header-search-input"><i class="fa fa-search"></i></label>

詳しくはこちらをご覧ください。

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

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

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

2列のメニューボックスを表示する方法

上のようなメニューをサイドバーに設置する方法は、以下の記事で説明しています。

メニューボックスをウィジェットやページに表示する方法

85 COMMENTS

mina 2019/07/10

はじめまして。SANGOとPORIPUを購入して使わせていただいています。
質問ですが、モバイルのスライドメニューを設定したところ、背景が透過されてしまって見えない状態です。どこで指定すれば良いのか分からなかったので教えていただきたいです。

回答を見る
megusa 2019/07/10

お世話になります。
先日購入させていただき、現在カスタマイズ中です。
初心者なので簡単な質問で申し訳ないのですが、メニューのカスタマイズについて質問です。
ヘッダーメニューとスライドメニューに設定しているメニューの中で、カテゴリーだけが画面に2つ表示されてしまっています。1つ消去してグローバルメニューのみにしたい場合の方法を教えていただけないでしょうか。
どうぞよろしくお願いいたします。

回答を見る
KUDO 2019/06/20

お世話になっています。
現在背景色を白で設定しています。
なぜだかメニューボックスの左右と下部の枠線がなくなってしまっています。
トップページのタブ切替機能のようにシャドウを付けて背景色とメニューボックスの境を付けたいのですが可能でしょうか?
それか枠線が無くなった原因などがわかればお願いしたいです。
HTMLは何度も確認しましたが間違ってないと思います。
お手数ですがよろしくお願いします。

回答を見る
ゆーぱ 2019/05/27

お世話になってます。
フッター内のコピーライト表記が左揃えになってしまうのですが、中央揃えにするためにはどうしたらいいですか?

回答を見る
佐藤 2019/05/08

いつもお世話になっております。
モバイル版で表示されますハンバーガーメニューに関しての質問です。

ハンバーガーメニュー内でチェックボックスやラジオボタンのcheck時、hover時にCSSでデザインが変化(transformなど)するlabelを作成したいと考えております。記事内やパソコンでの動作は確認できているのですが、なぜかモバイル版のハンバーガーメニュー内でCSSが機能しない状態です。

お忙しいところ恐縮ではございますが、原因や解決法がございましたらご教授いただけますと幸いです‍♂️

回答を見る
ユーザー 2019/01/29

お忙しい中コメント失礼いたします。
現在作成中サイトでSANGOを使用させていただいております。

メニュー部分に関してご質問させていただきたいのですが、
「外観」→「カスタマイズ」からや
「メニュー」項目等でPCやスマホ別にメニュー設定はしているのですが、

スライドメニューがPCでの場合のみ表示され、スマホ・タブレット表示(768pxサイズ以下)の場合にスライドメニューやウィジェットで設定したハンバーガーメニューの表示自体がされない状態にあります。。

スマホ・タブレット時にもスライドメニューを表示させるためにはどのようにすれば良いかご教示いただければ幸いです。。

回答を見る
うい 2019/01/05

いつもお世話になっております。

早速ですが、フッターに表示されるロゴ画像(もしくはHOMEテキスト)およびキャッチフレーズを非表示にすることは可能でしょうか。
HOMEリンクに代わるものをフッターウィジェット内へ配置したく、フッターメニューとの重複を避けたいと思っております。

お忙しいなか恐れ入りますが、ご教示いただけますと幸いです。宜しくお願いいたします。

回答を見る
りな 2018/12/19

お忙しい中失礼します。
ヘッダーの下にカテゴリが横並びでかっこよく表示されるようにしたいのですが、思ったようにいきません。
テーマはSANGOでPORIPUで行いました。
カスタマイズの「ウィジェット」→「トップページ記事一覧上」にナビゲーションメニューとして追加しております。
横並びでかっこよく表示されるにはどのようにしたらよいのでしょうか?
何卒よろしくお願いいたします。

回答を見る
松浦 2018/12/14

はじめまして。初心者です。メニューをカテゴリーに設定したのですが、反映されないのはどうしてでしょうか?

回答を見る
あい 2018/10/21

はじめまして。いつもお世話になっています。
創作サイトを作るにあたり、SANGOを利用しているのですが、
サイトの入り口となるトップページ(固定ページ)だけメニューを非表示にしたいのですが可能でしょうか?
お忙しいところ恐れ入りますがご回答の程、よろしくお願いいたします。

回答を見る
MI 2018/10/18

ヘッダーメニューについて、トップページとその他のページで、表示を変更したいのですが可能でしょうか。
(現在は、ロゴ中央寄せを使用し、スクロールした際に下部のメニューが表示されるようにjQuelyとアニメーションで設定をしています。)
子テーマにheader-indexを作成したものの、その後の編集方法が不明のため、コメントさせていただきました。

例えば、以下の変更であればheader.phpのコードの書き換えで可能になるのではないかと考えたのですが難しいでしょうか。的外れな内容でしたら申し訳ありません。

・トップページ→ロゴ中央寄せ
・その他のページ→通常

お忙しいところ恐れ入りますが何卒よろしくお願いします。

回答を見る
たらちゃん 2018/09/19

素敵なテーマをありがとうございます。
カスタム投稿を作成し、その個別ページを表示させた場合、次の記事、前の記事の表示がおかしいようです。リンクは正常に取得してきますが、タイトルが現在表示されているタイトルを取得しているように見えます。

回答を見る
大島 早希 2018/08/28

いつも使わせていただき、ありがとうございます。
サイドメニューにカテゴリーを配置したのですが、質問が2点あります。

➊サイドメニューではカテゴリー名の前にのせているfontAwesomeの絵文字が消えます。
 (ヘッダーのメニューにはきちんとfontAwesomeも表示されています)
➋カテゴリーを3階層にしたところ、下位2階層はまとまって同じ階層として表示されます。(ダッシュボードの外観→メニュー→メニュー構造では3階層になっております)

お時間がある時に、教えていただけると助かります。

回答を見る
おぎえもん 2018/07/31

いつもお世話になっております。唐突な質問失礼致します。ヘッダーメニューを6分割(四角い枠で)する方法をお手数ですが教えて頂きたくコメント致しました。以前どこかのサイトで見かけたのですが方法が分かりません。お時間ある時に返信頂ければ幸いです。

回答を見る
もりた 2018/07/29

いつもSANGO愛用しております。教えていただきたいことがあります。ヘッダーメニュー(PC・スマホ両方)のフォントのサイズや太さを変更する事は可能でしょうか?お忙しいところ申し訳ありませんがご教授いただけると助かります。

回答を見る
まこさん 2018/07/26

いつもSANGOを愛用させていただいおります。SANGO歴10カ月ほどです。

お忙しいところ恐縮ですが、一点質問させてください。

【問題点】
プライバシーポリシーのリンクがヘッダーメニューで重複している現象

【解決したいこと】
フッターメニューのプライバシーポリシーのリンクが重複しています。その重複を、フッターメニュー(ページ最下部)からカスタムリンクで設定した固定ページのプライバシーポリシーのみで表示させたい。

ほかのSANGO使用のサイトでは、同様の設定でプライバシーポリシーは1つだけの表示です。

何か原因は考えれますでしょうか?

お手数をおかけして申し訳ございません。ヒントをいただけると幸いです。

【原因不明の重複リンク】
プライバシーポリシー

事前にチェックしたこと:
・footer.phpはカスタマイズしていない (2つの使用サイトで比較。まったく同じ内容)
・フッターウィジェットは設定なし
・フッターメニュー(ページ最下部)はカスタムリンクだけ。プライバシーポリシーは重複させていない
・CSSでフッターが浮き上がる等のカスタマイズはしていない

回答を見る
kidspgm 2018/07/14

サルカワ様
お世話になっております。
SANGOのテーマに一目惚れして早速購入させていただき乗り換えているところです。

1点質問したい点がございますが、よろしいでしょうか。
サイドバーのメニューなのですが、通常のメニュー設定では縦1列となってしまいデモのように2×2のように設定できませんでした。

お手数ではございますが、どのように設定すればよいかご教授いただけますでしょうか。

回答を見る
Kera 2018/06/27

サルワカ様。
お手数をお掛け致しました。
背景色と同じになっておりました。
本当に申し訳有りません。
また何か有りましたら宜しくお願い致します。

回答を見る
サルワカくん 2018/06/25

色設定の「ヘッダーメニュー文字色」を背景色と同じにしてしまっていませんか?

回答を見る
あお 2018/06/03

お世話になっております。
HP作成がはじめてなのですが、色々調べて考えた結果、
SANGOを購入させていただきました。

初歩的な質問で恐縮ですが、
固定メニューを設定することがどうしてもできず、
方法を教えていただけますでしょうか。
色々ググってもうまくいかず…
何卒よろしくお願い致します。

回答を見る
tamami 2018/05/18

お世話になっております。SANGO気に入って使っております。

ヘッダーメニューの設定で質問いたします。
Wordpressにはまだそんなに慣れておりません。。

外観→メニューの設定で、PCメニューとモバイルメニューそれぞれを設定しています。
PCもモバイルも問題なく表示されるのですが、タブレット(iPad mini)で確認するとヘッダーメニューが二重になって表示されてしまいます。
試しにモバイルメニューのチェックを外すとタブレットの二重表示はなくなるのですが、モバイルにはヘッダーメニューが表示されなくなってしまいます。

こちらの解決方法について教えてください。
よろしくお願いいたします。

回答を見る
ようこ 2018/04/25

度々質問失礼いたします。お忙しい中すみません。

フッターニューにデフォルトで表示してある「HOME」という文字を別の文字に変更したいのですが、可能でしょうか。

よろしくおねがいいたします。

回答を見る
ココア 2018/04/19

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

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

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

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

回答を見る
ケムシ 2018/04/18

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

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

テーマ 最新
WordPress 4.9.5

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

回答を見る
大島 早希 2018/04/04

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

回答を見る
るーろす 2018/03/26

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

回答を見る
ネコ 2018/03/09

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

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

回答を見る
母ちゃん 2018/02/22

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

回答を見る
AKIHIRO 2018/01/28

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

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

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

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

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

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

回答を見る
hiiro 2017/12/03

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

回答を見る

コメントを残す

メールアドレスは公開されません。* は必須項目です。コメント投稿のガイドライン