これから Nishiki Pro
テーマを使うなら1度は確認しよう!

Nishiki テーマおすすめ設定 テーマおすすめ設定を見る
  1. ホーム
  2. Nishiki(Pro)
  3. Nishiki Pro:【シングルページのウェブサイトを作る時に使える】グローバルナビのメニューをクリック(タップ)したタイミングでドロワーメニューを閉じる方法

Nishiki Pro で、1 ページのみ(シングルページ)の構成で「グローバルナビのメニューをクリックすると、ページ内の特定のコンテンツまでスルスルっとスクロールするウェブサイト」を作りたい時に使える方法です。

シングルページとは、例えば、下の動画のようなウェブサイトですね。

前提あります

Nishiki Pro では、特定の px 数でグローバルナビのメニューがドロワーメニューに切り替わります(px 数は変更できます)。

通常は、下の動画のようにメニューをクリック(タップ)してもドロワーメニューは閉じません。

ですが、下の動画のように、メニューをページ内リンクとして使用している場合は、クリック(タップ)した際にドロワーメニューを閉じたくなりませんか?

というわけで、以下に方法を紹介します。

設定方法

ワードプレスの管理画面から「外観」→「メニュー」を選択します。

メニューの位置を「グローバル」に設定して読み込んでください。

次に、メニュー構造の中からページ内リンクを設定しているメニューを展開し「CSS class (オプション)」の欄に「anchor」と入力してください。これで完成です。複数の CSS class と組み合わせたい場合は「aaa anchor」など、スペースを空けて指定ください。

「CSS class(オプション)」の入力欄が表示されていない場合は、下の画像のように「表示オプション」の中にある「CSS クラス」にチェックを入れてください。

WordPress テーマ Nishiki Pro

「ウェブサイト運営に本当に必要とされる機能」をテーマ内にまとめて搭載した WordPress テーマです。

ブロックエディター機能を強化し、これまでの WordPress では難しかったコンテンツが簡単に作れます。

ブログ、ポートフォリオ、コーポレートサイト、ビジネスサイトなど、様々な目的のウェブサイトに対応できるテーマです。

最新情報をチェック!

Nishiki / Nishiki Pro テーマに特化した情報を「にしきちゃん」がお伝えします😀

  • リリース情報
  • 新機能の紹介
  • 便利な使い方
  • 開発中の機能紹介
  • 導入事例
  • あるある日常ネタ

など