WordPressテーマ「錦(Nishiki)」のヘッダーには「お問い合わせ」や「会社概要」など、特定のページへ誘導する役割を持つ「メニュー」を表示することができます。

メニューを作成している場合は、下の画像の赤枠で囲まれたアイコンがデフォルトで表示されます。このアイコンは、よく「ハンバーガーアイコン」や「ハンバーガーメニュー」と呼ばれています。

メニューを作成している場合はアイコンが表示される

※メニューをまだ作成していない場合は、以下のページを参考にして作成してください。

アイコンを押すと、下の画像のようにメニューパネルが表示されます。

アイコンを押すとメニューパネルが表示される

2つのメニュー表示方法があります

メニューは、以下の2つの表示方法が用意されています。

  1. 常にアイコンを表示して、アイコンを押すとメニューパネルが開く(デフォルト)
  2. PC表示の際にはメニューテキストを表示して、タブレット,スマートフォンの場合はアイコンを表示して、アイコンを押すとメニューパネルが開く

デフォルトの設定では、ここ数年でタブレット,スマートフォンからウェブサイトを閲覧する方が増加している傾向があることを考慮して「常にアイコンを表示して、アイコンを押すとメニューパネルが開く」設定になっていますが「PC表示の時はメニューのテキストを表示したい」場合もあると思います。

以下にメニューの設定方法について解説していますので、ご参考ください。

ヘッダーメニューの表示設定

WordPressの管理画面より「外観」→「カスタマイズ」を選択します。

カスタマイズ項目の一覧から「ヘッダー」を選択します。

ヘッダーのカスタマイズ項目の中から「PC表示の時にメニューテキストを表示する」の項目にチェックを入れると、PC表示の場合はメニューテキストを表示します(デフォルトではチェックは外れています)。

設定を変更した場合は、保存を忘れないようにしましょう。以上で設定完了です。

今回はチェックを入れた場合を想定して、PC,タブレット,スマートフォンそれぞれで表示されるメニューを確認しましょう。

PCからウェブサイトを閲覧した場合

PCからウェブサイトを閲覧した場合は、下の画像のように設定したメニューが表示されます。

PCから閲覧するとメニューテキストが表示される

メニューの隣にある矢印をクリックすると、下の階層が表示されます(階層を閉じる場合はもう一度矢印をクリックします)。

階層にも対応しています

タブレット,スマートフォンからウェブサイトを閲覧した場合

タブレット,スマートフォンからウェブサイトを閲覧した場合は、下の画像のようにアイコンが表示されます。

タブレット,スマートフォンから閲覧するとアイコンが表示される

アイコンを押すと、メニューパネルが開きます。もちろん、階層にも対応しています。

メニューの表示は2パターンの中からお好みで設定しよう

ここ数年では、タブレットやスマートフォンを利用してウェブサイトを閲覧する方が増加している傾向にあるので「どの端末からウェブサイトを閲覧した場合でも、メニューの表示方法や位置を変えたくない」という意味で「常にアイコンを表示する」設定もアリです。

ただし、「常にアイコンを表示する」設定のままPCでウェブサイトを閲覧した場合には、メニューが隠れている状態なので「メニューを開かないと他にどんなページがあるのかわからない」ですね。閲覧者に対して「アイコンを押してメニューパネルを開いてもらう」という1アクションをお願いしないといけないです。

なので、PCでウェブサイトを閲覧する方のことを考慮して「PCでウェブサイトを閲覧する場合はメニューをあらかじめ表示しておく」設定でもいいと思います。「ああ〜、このウェブサイトには他にもこんなページがあるんだな」と認識してもらいやすくなります。

メニューの表示は2パターンから選んで設定できますので、ご自身のウェブサイトの状況や好みに合わせて設定しましょう。

#wpnishikiをつけてシェアしよう!