Wix / Squarespace / その他での公開

WordPressをご利用ですか？ 手動埋め込みの代わりに専用のNaviplus Menu Builderプラグインを使用してください — テーマの編集は不要で、ショートコードまたはGutenbergブロックを介してグリッドを配置できます。

Shopifyをご利用ですか？ 専用のShopifyアプリをインストールしてください — プラットフォームに最適化されており、組み込みの公開オプションがあります。

このページでは、手動スクリプト埋め込みメソッドについて説明します。これは、Wix、Squarespace、Webflow、Magento、およびPHP、Node.js、または純粋なHTMLで構築されたカスタムウェブサイトに適した方法です。以下の実装方法があります：

1. ウェブサイトにNavi+を埋め込む

この実装方法は、Navi+が現在サポートしているすべてのメニュータイプに適しています。これには、Tabbar、Mega menu、Slide menu、FAB、およびGrid menuが含まれます。このコードは、すべてのメニューに対して一度だけ使用する必要があります。

<!-- Insert this code to the <head> of website. (c) naviplus.io -->
<script>(window._navi_setting ||= []).push({
   token: "NAVI123456"
});</script>
&lt;script src="https://live.naviplus.app/start.js" async&gt;&lt;/script&gt;
<!-- Insert this code to the <head> of website -->

FAQ (よくある質問)

トークンとは何ですか？

各Navi+アカウントには一意のトークンが割り当てられています。このトークンは、アプリケーションのヘッダーから直接表示およびコピーできます。トークンは、メニューを安全に公開するために使用されます。

https://live.naviplus.app/start.jsとは何ですか？

これは、アプリケーションの初期化ロジックを含むNavi+の固定URLです。このスクリプトは軽量（約4KB）で、ほとんどのデバイスやネットワーク条件で迅速に読み込むことができます。CloudflareとBunnyCDNを介して配信され、安定したグローバルパフォーマンスと最新のブラウザとの信頼性のある互換性を提供します。

非同期読み込みメソッドを使用することで、ウェブサイトの読み込みプロセスに影響を与えません。

この埋め込みコードはウェブサイトを遅くしますか？

以下のコードは非常に軽量で、速度（最初の読み込みに約100-200ms、以降の読み込みは0ms）や顧客体験、SEOスコアに影響を与えることなく、ウェブサイトに挿入できます。

このコードスニペットを挿入するのに最適な場所はどこですか？

ヘッダーセクション（またはできるだけ早い段階）です。なぜなら、ウェブサイトはインターフェースをレンダリングするためにリソースを順次読み込むからです。HTMLコード内でNavi+を最初に配置することで、条件が満たされるとすぐにメニューが表示されるようになります。これにより、ユーザー体験が向上します。

このコードがウェブサイトに正常に埋め込まれたかどうかを確認するにはどうすればよいですか？

方法は2つあります：

方法1（誰でも）：

ウェブサイトを#navidebug-onのサフィックスで開きます。例えば：https://domain.com#navidebug-on。ウェブサイトがデバッグモードに切り替わる場合、埋め込みは正しく機能しています。デバッグモードは、CSSセレクタを簡単に特定するのに役立ちます。#navidebug-offを使用してオフにします。

方法2（開発者向け）：

ブラウザの検査ツールを開き、コンソールタブに移動し、緑色のメッセージ「Using Navi+..」を探します。このメッセージは、コードが正常に埋め込まれたことを示しています。

2. CSSセレクタを使用してメニューを公開する（推奨）

上記のスクリプトを埋め込んだ後、Navi+アプリに移動して、メニューがページに表示される場所と方法を設定します。

I.1. CSSセレクタの理解

CSSセレクタは、ウェブページ上の特定のHTML要素をターゲットにする方法です。Navi+は、メニューを正確にどこに配置するかを知るためにこれを使用します — 要素の前または後に挿入するか、既存の要素を完全に置き換えるかです。

これを使用するために開発者である必要はありません。Navi+は、セレクタを入力するためのシンプルな入力フィールドを提供し、残りは自動的に処理します。

ウェブサイトに適切なCSSセレクタを見つけるには、次の方法を使用できます：

デバッグモード — Navi+の組み込みツール：ページ上の任意の要素にカーソルを合わせ、そのセレクタを瞬時にコピーします
ブラウザDevTools — ブラウザの組み込みインスペクタを使用した手動方法

I.2. 3つの公開オプション

ステップ1：Navi+アプリでウェブサイトに公開ボタンをクリックします。

ステップ2：トグル”Publish menu by Insert/Replace method”をオンにします。

ステップ3：CSSセレクタを入力し、以下の3つの公開オプションのいずれかを選択します。

オプション1：前に挿入

Navi+メニューを選択した要素の前に即座に挿入します。

例： CSSセレクタ main → グリッドメニューがページのメインコンテンツエリアの上に表示され、完全なセクションとして表示されます。

これは、非Shopifyプラットフォームでのグリッドメニューの最も一般的な設定です。

このオプションの一般的なCSSセレクタ：

main — ほとんどのプラットフォームで機能します（Webflow、Magento、カスタムサイト）
#main — 一部のプラットフォームおよびカスタムテーマ
.main-content — 様々なプラットフォーム

このリストにないですか？Navi+サポーターとチャットして即座に助けを得るか、デバッグモードまたはブラウザDevToolsを使用して自分で見つけることができます。

オプション2：後に挿入

Navi+メニューを選択した要素の後に即座に挿入します。

例： CSSセレクタ header → グリッドメニューがヘッダーのすぐ下に表示されます。

このオプションの一般的なCSSセレクタ：

header — ほとんどのプラットフォームで機能します
.header-wrapper — 一部のプラットフォーム
.site-header — 様々なプラットフォーム

オプション3：置き換え

選択した要素を完全にNavi+メニューで置き換えます。元の要素は非表示になり、Navi+がその場所を取ります。

ほとんどのプラットフォームには組み込みのグリッドメニューがないため、置き換えモードはこのメニュータイプにはほとんど適用されません。前に挿入mainが推奨されるアプローチです。

プラットフォームに置き換えたいグリッドスタイルのナビゲーション要素がある場合は、デバッグモードまたはブラウザDevToolsを使用してそのCSSセレクタを見つけてください。

I.3. デバイス特有のターゲティング

CSSセレクタがモバイル、デスクトップ、または両方に適用されるかどうかを制御するには、セレクタにサフィックスを追加します：

サフィックス	適用対象
`(M)`	モバイルのみ
`(D)`	デスクトップのみ
(なし)	モバイルとデスクトップの両方

例：

main(D) — デスクトップのみで挿入
main(M) — モバイルのみで挿入
main — 両方のプラットフォームで挿入

これは、グリッドメニューを特定のデバイスにのみ表示したい場合や、モバイルとデスクトップで異なる配置が必要な場合に便利です。

3. ウェブサイトの任意のポイントにNavi+メニューを挿入する

以下のコードは、異なる挿入情報（特に埋め込みID、例えばSF-123456789）を使用してウェブサイトで複数回使用できます。ウェブサイトがレンダリングされると、条件が満たされると、コードが挿入された位置にメニューが展開されて表示されます。このメニュータイプは、Mega menu、Gridなどに適しています。

<!-- Insert the code where the menu SF-123456789 appears. (c) naviplus.io -->
<div class="naviman_app section_naviman_app" id="SF-123456789-container"></div>
<script>(window._navi_setting ||= []).push({
   token: "NAVI123456",
   embed_id: "SF-123456789"
});</script>
&lt;script src="https://live.naviplus.app/start.js" async&gt;&lt;/script&gt;
<!-- Insert the code where the menu SF-123456789 appears -->

重要: 上記のコードはサンプル埋め込みコードSF-123456789を使用しています。実際のメニュー埋め込みコードに置き換えることを確認してください。

Navi+ Help — Build menus that convert visitors into buyers