Kadenceチュートリアル：Kadenceアドバンス・ナビゲーション・ブロックで柔軟なナビゲーション構造を作成する

ケイデンス・ブロックは強力なページビルダーで、豊富なカスタマイズブロックのセットをユーザーに提供します。その中でも、ナビゲーションアドブロックはワードプレスエディタで柔軟なナビゲーションメニューを構築するために設計された重要なモジュールで、クラシックなサイトアーキテクチャをサポートするだけでなく、フルサイトエディタ（FSE）モードにも完璧に適応します。

この記事では、高度な技術に関する包括的な概要を紹介する。ナビゲーターこのブロックの機能、設定方法、そして高度なヘッダーブロックと組み合わせて使用することで、ウェブサイト内で高度にカスタマイズ可能なナビゲーションメニューを実現できます。

I. アドバンス・ナビゲーション・ブロックの概要

高度なナビゲーション・ブロックはケイデンスヘッダー（Adv）ブロックやナビゲーション・リンク・ブロックと連動するアドバンスド・ヘッダー・システムの一部。ヘッダーエリアに限らず、ページやテンプレートのどこにでもナビゲーションを追加できます。

ナビゲーションは問題ない：

• ブロックエディターで直接追加・設定
• Kadenceダッシュボードからの集中管理
• クラシックメニューのインポートと高度なナビゲーション構造への変換をサポート

高度なナビゲーションの追加と管理

エディターでナビゲーションを作成する

ページエディターに「ナビゲーション（Adv）」ブロックを挿入し、ポップアップオプションから既存のナビゲーションを選択するか、新しいナビゲーションを作成することができます。一度追加すると、すぐにナビゲーションビルダーにアクセスし、ページ、カテゴリー、カスタムリンクを追加することができます。

バックオフィスでのナビゲーション管理

とおす WordPressダッシュボード → Kadence → ナビゲーション作成されたすべてのナビゲーターAdd New Kadence Navigation」をクリックして、新しいナビゲーションを作成します。Add New Kadence Navigation」をクリックして新しいナビゲーションを作成します。

ナビゲーションビルダーのサポート：

• 投稿、ページ、商品、その他のカスタムタイプの追加
• カテゴリーを使ってメニュー項目を生成する（例：記事カテゴリー、商品カテゴリー）
• ドラッグ＆ドロップによるソートと階層化

第三に、WordPressクラシックメニューのインポートをサポートする。

ケイデンス既存のクラシックを組み合わせることは可能だ。ワードプレスメニューはアドバンスド・ナビゲーションとしてインポートされる。インポート後、元のメニューは変更されませんが、さらなる視覚的およびインタラクティブな拡張設定のために、自動的にアドバンスドナビゲーションメニューに変換されます。

第四に、ナビゲーション設定の詳細

一般設定

• ナビゲーションを選択現在表示されているナビゲーターエレメント
• 新しいナビゲーションの作成新しいナビゲーションを作成し、ブロック内で直接編集できます。

• ビルダーを開くクリックするとナビゲーションビルダーに素早くアクセスできます。

• メニューの向き横向きと縦向きに対応
• メニュー間隔ナビゲーションアイテムの間隔は、水平方向と垂直方向で別々に調整できます。

• 親アクティベーション項目のハイライト子ページにアクセスすると、親メニューの項目が自動的にハイライトされます。

レイアウト・オプション

• 水平レイアウトスタンダード、ストレッチ、グリッドに対応。
• バーチカルレイアウトメニュー項目をアコーディオンスタイルで展開することができます。

水平レイアウト設定

水平レイアウトを使用する場合、標準、ストレッチ、グリッドの3つのレイアウトから選択でき、それぞれ異なる表示効果と最適化設定を提供します：

標準レイアウト

標準レイアウトは、ナビゲーションアイテム間に一定の間隔が維持される伝統的なスタイルのナビゲーションメニューに適しており、シンプルなメニューレイアウトに適しています。

引張レイアウト

ストレッチレイアウトは、コンテナの幅全体にナビゲーション項目を均等に広げ、メニュー項目をより均等に配置します。

ストレッチ動作::

• 規範: ナビゲーションリンクの間にスペースを追加し、利用可能なスペースにメニュー項目を均等に配置します。

• フィルとセンター各ナビゲーション項目のテキストが中央に配置されるように、間隔を広げてテキスト領域を調整します。テキストの整列設定は、ナビゲーション・アイテム・スタイルのスタイル・ブロック設定でさらにカスタマイズできます。

グリッドレイアウト

グリッドレイアウトは、ナビゲーションアイテムを構造化されたグリッドに配置し、より整理されたナビゲーションメニューを提供します。

• 水平グリッドの列グリッド内の列数を指定すると、ナビゲーション・リンクは定義された列内に整列され、グリッド形式で左から右に流れます。

これらのレイアウトオプションにより、さまざまなデザインニーズに合わせてナビゲーションメニューの外観や動作を柔軟に調整することができます。

垂直レイアウトの設定

縦書きレイアウトの場合ケイデンス アドバンスド・ナビゲーション・ブロックは、ユーザーとのインタラクション体験を向上させるために、以下の2つの便利な機能を提供します：

プロジェクト全体を通して垂直サブメニューを拡張する

このオプションを有効にすると、ユーザーはテキストやアイコンエリアだけでなく、垂直メニューアイテムの幅全体をクリックしてサブメニューを展開することができます。

垂直サブメニューの折りたたみ

このオプションは垂直サブメニューを"アコーディオン"見せ方"。

この2つの設定は、独立して、または組み合わせて使用することで、垂直ナビゲーションの使いやすさと視覚的階層を効果的に改善することができます。

V. アンカーリンク活性化関数

ターゲットエリアにスクロールすると、アンカーリンクが自動的にアクティブになります。より正確なアクティブ化のために、異なるレイアウトや固定ヘッダーの高さに合わせてアクティブ化オフセットを設定できます。

外観スタイルの設定

スタイルテンプレート

• 正規形

• 下線スタイル

• フルハイト・スタイル

• フルハイト・アンダーライン・スタイル

リンクスタイル

サポートルーチン, ホバー, アクティブ化この3つの状態は、色、背景、ボーダー、角丸、影などのスタイルを設定する。

フォント設定

メニュー項目のフォントサイズ、行の高さ、フォントの太さ、フォント間隔、大文字と小文字などのグローバル設定。また、個々のナビゲーションリンクに対して上書きすることもできます。

セパレーター設定

メニュー項目の間に、色と幅を調整できるセパレータを挿入します。

サブメニューとメガメニューのスタイル (Pro)

サブメニューコンテナの設定

• サブメニューの選択がアニメーションで表示される（フェードイン、フェードアップなど）

• ドロップダウンメニューの配置と幅の設定

• サブメニュー項目のフォント、色、間隔、ボーダー、影などのカスタマイズ

サブメニューのリンク設定

サブメニュー・リンクのスタイリングは、アドバンスド・ナビゲーションのすべてのドロップダウンメニュー項目の外観を、以下の方法で統一的にコントロールするのに役立ちます：

カラー

サブメニューのナビゲーションリンクの色を設定することで、以下の3つの状態を独立してサポートします：

• 通常状態
• ホバリング状態
• アクティブステータス

ディバイダー

各サブメニュー項目の間に区切り線を追加して、階層と読みやすさを向上させます。区切り線の色と幅はカスタマイズできます。

リンクのパディングとマージン

サブメニューのナビゲーションリンクの内マージンと外マージンを統一することで、コンテンツの間隔を一定にし、メニューをよりすっきりと規則的に見せることができます。

アライメント

サブメニュー項目のテキストアライメントを設定する：

• 左揃え

• 中央揃え

• 右寄せ

この設定は、レスポンシブ・デザインを有効にするために、デバイスの種類ごとに個別に設定することができます。

タイポグラフィ

サブメニュー項目のテキストスタイルを微調整する：

• フォントサイズ
• 御身長
• 文字の大文字小文字（例：すべて大文字）
• フォントファミリー（システムフォント、カスタムフォントなど）
• フォントの太さ
• 文字間

これらの設定は、視覚的に統一され、インタラクティブで親しみやすいサブメニューシステムを構築するのに役立ちます。これは、サブアイテムを美しく表示する必要がある多層メニューやウェブサイトのナビゲーションデザインに特に適しています。

サブメニューの説明スタイル設定

サブメニューにはスタイル設定ナビゲーションリンクの説明の外観を調整し、メインメニュー項目の内容と調和させ、ユーザーエクスペリエンスを向上させることができます。具体的な設定は以下のとおりです：

タブ間隔

ナビゲーションのラベルと説明文の間隔を調整し、説明文とラベルの間のタイポグラフィをより明確に、より快適にする。

カラー

Settings（設定）サブメニューは、異なる状態での色について説明し、以下の3つの状態について独立した設定をサポートします：

• 通常状態
• ホバリング状態
• アクティブステータス

タイポグラフィ

サブメニューの説明のフォントスタイルを調整する：

• フォントサイズ
• 御身長
• アルファベットの大文字と小文字（自動大文字など）
• フォントファミリー（カスタムフォントの選択など）
• フォントの太さ
• 文字間

トップレベルのナビゲーション記述のスタイル

を調整することもできます。ナビゲーターブロック内の記述スタイル（Advanced Header Block）は、サイト全体のデザインの一貫性と読みやすさを向上させるのに役立ちます。

タブ間隔

トップナビゲーションのリンクラベルと説明テキストの間隔を設定し、視覚的に適切に分離されるようにします。

カラー

トップレベルのナビゲーションリンクの説明の色を設定します：

• 通常状態
• ホバリング状態
• アクティブステータス

タイポグラフィ

トップレベルのナビゲーション説明文のフォントスタイルを調整する：

• フォントサイズ
• 御身長
• 大文字と小文字
• フォントシリーズ
• フォントの太さ
• 文字間

これらの記述スタイル設定は、ナビゲーションリンクのテキストの外観と間隔をより適切にコントロールし、ナビゲーションシステム全体をよりすっきりさせ、読みやすく、デザイン志向にするのに役立ちます。

高度なカスタマイズ・オプション

• ナビゲーション・ブロック全体または個々のリンク・アイテムにマージンとインナー・マージンを追加する

• HTMLアンカーの設定(#ID)

• カスタムスタイルをサポートするCSSクラスを追加する

高度なナビゲーションの管理

あなたのウェブサイト上のすべての高度なナビゲーションを簡単に管理することができます：

• ダッシュボードへのアクセス: ワードプレス ダッシュボードで ケイデンス メニュー
• ナビゲーションページを選択Kadenceメニューで ナビゲーター ページ
• ナビゲーションの編集、作成、削除::
  • 編集ナビゲーション既存の高度なナビゲーションを選択して編集・調整することができます。
  • 新しいナビゲーションの作成クリック "新しいKadenceナビゲーションを追加"ボタンをクリックして、新しい高度なナビゲーションを作成する。
  • ナビゲーションの削除ナビゲーションが不要になった場合は、ナビゲーションリストから削除することができます。

この管理ページでは、すべての高度なナビゲーションを一元管理し、簡単に修正・最適化することができます。

概要

ケイデンスアドバンスドナビゲーションブロックは、ナビゲーションメニューの美しさと機能性を高めるだけでなく、従来のメニュー設定の制限から完全に解放します。1ページスクロールのウェブサイトを作成する場合でも、複雑な多階層のeコマースプラットフォームを作成する場合でも、アドバンスドナビゲーションブロックを使用することで、デザインをより柔軟に、インタラクションをよりスムーズにすることができます。

さらなるカスタマイズのために、Kadence Custom FontsプラグインやカスタムCSSなどを組み合わせて、より高度なデザイン効果を得ることもできます。

以下のような綿密な調査を行うことが推奨される：