JIN:R Ver1.0.9をリリース!
メニュー

グローバルメニューの作り方|PCのヘッダー導線を整えよう!

wp-jintest
PC画面右側に表示されるメニューのこと

JIN:Rでの「グローバルメニュー」の組み方について解説します!

グローバルメニューはパソコン画面では目立つナビゲーションなので、コンバージョンにつながる導線を整えておきたいです。

特に「サイトデザイン設定」で「ヘッダー追尾」がONになっている時には、グローバルメニューはさらに有効に機能します。

ひつじくん
ひつじくん

グローバルナビの作り方

メニュー作成へ

WordPressの黒いバーから「カスタマイズ」を開いて

メニュー設定へと進みます

そうするとメニュー作成画面があるので「メニューを新規追加」を押しましょう。

メニュー名は「グローバルナビ」と記載して、メニューの位置は「グローバルナビゲーションにチェック」を入れておきましょう。

「メニューを新規追加」すると、この画面に

その状態で「次」のボタンを押します。あとはメニューを組んでいくだけです!

あとはメニューを組んで「公開」ボタンを押すだけ!

項目を追加」のボタンを押すと、右側から記事を選んでメニューを追加できるようになります。

内容が整ったら「公開」ボタンを押して保存しましょう。

サブコピーを入れる方法

JIN:Rの「グローバルメニュー」はサブコピーを組むことが可能です。

メニューを2段にして「サブコピー」を組める

ちょっとだけやり方がややこしいので、解説をよく読んで実装してみてください。

「外観」>「メニュー」に進む

WordPressの管理画面から「外観」>「メニュー」に進むと、このような画面になります。

「表示オプション」を開いて「説明」にチェック

画面右上にある「表示オプション」のタブをクリックしてください。そうすると「説明」という項目がありますので、これにチェックを入れましょう。

「説明」の部分にサブコピーを入力

メニューのタブを開くと「説明」の項目が追加されています。ここにサブコピーを入力しておきましょう。

はい、これでサブコピーの追加が完了です。

ナビの項目をボタン化する

JIN:R公式サイトのように、ナビゲーションの項目をボタン化することができます。

「外観」>「メニュー」に進む

WordPressの管理画面から「外観」>「メニュー」に進むと、このような画面になります。

「表示オプション」を開いて「CSSクラス」にチェック

画面右上にある「表示オプション」のタブをクリックしてください。そうすると「CSSクラス」という項目がありますので、これにチェックを入れましょう。

「CSS class」の部分にコードを入力

メニューのタブを開くと「CSS class」の項目が追加されています。ここに画像のように入力してください。

このように入力すると、そのメニューの項目をボタンにすることができます!

他の記事も読んでみましょう

ABOUT ME
ひつじ
ひつじ
ブロガー / デザイナー
WordPressテーマ「JIN」の制作者として、設計とデザインを担当している。

会社員として働くのが嫌すぎて、2016年に収入0円でブログ起業。SEOとアフィリエイトを組み合わせて開始1年で月100万円超の利益を達成する。

しかしその反動でアフィリエイトには飽きてしまい、もともと好きだったデザインを武器に、チームでWordPressの開発をおこなっている。
記事URLをコピーしました