Wix に貼り付ける

所要時間: 約 5 分 / 対象: Wix Editor / Wix Studio（一部機能は有料プラン必須）

Wix プラン要件： Custom Code 機能（サイト全体への <script> 配置）は Premium プラン以上 でのみ利用可能です。無料プランの場合は、Embed HTML 要素による個別ページへの貼り付けのみ利用できます。

1. 事前準備（管理画面で許可ドメインを登録）

埋め込み先の Wix サイトのドメインを、キッキジ管理画面の許可ドメインに登録してください。

1
Wix サイトの公開 URL を確認（独自ドメイン連携済みなら example.com、未連携なら your-account.wixsite.com）
2
キッキジ管理画面にログインし、左メニュー 「組織設定」 > 「許可ドメイン」 タブを開く
3
「ドメインを追加」をクリックし、Wix サイトのドメインを入力（プロトコルや末尾スラッシュは不要）
許可ドメインを登録しないと埋め込みプレーヤーは動作しません。 Wix 独自ドメイン（wixsite.com）から独自ドメインへ移行した場合は、両方を登録しておくと切り替え期間中の事故を防げます。

2. ページごとに貼り付ける（Embed HTML 要素）

特定のページだけに音声プレーヤーを表示する方法です。Embed HTML（旧称：HTML iframe）要素を使います。

手順（Wix Editor）

1
Wix Editor で対象ページを開く
2
左サイドバーの 「+」（要素を追加） > 「Embed Code」 > 「Embed HTML」（または「HTML Code」）を選択し、ページにドラッグ
3
配置した要素をクリック > 「コードを入力」 ボタンをクリック
4
「コード」モードを選択し、次のタグを貼り付け：
<script src="https://kikkiji.net/scripts/embed.js"
  data-url="https://example.com/your-article-page"></script>
5
data-url の値を、音声化したい実際の記事 URL（https:// から始まる絶対 URL）に書き換える
6
「更新」をクリックして閉じる
7
Embed HTML 要素のサイズを調整（プレーヤーが収まる縦幅 200px 以上を推奨）
8
右上の 「公開」（Publish）をクリック
Embed HTML は iframe 内で動きます： Wix の Embed HTML 要素は内部で iframe として描画されるため、現在のページ URL を自動取得できません。必ず data-url 属性で対象記事の URL を明示してください。

3. サイト全体に貼り付ける（Custom Code）

すべてのページに一律でスクリプトを配置する方法です。Premium プラン以上でのみ利用可能。

手順

1
Wix ダッシュボードを開き、「Settings」 > 「Custom Code」（カスタムコード）に移動
2
「+ Add Custom Code」をクリック
3
次のタグをコード欄に貼り付け：
<script src="https://kikkiji.net/scripts/embed.js"
  data-target="#kikkiji-player"></script>
4
設定欄で次を選択：
  • Name：「Kikkiji Audio Player」など分かりやすい名前
  • Add Code to Pages：「All pages」または音声化したい特定ページのみ
  • Place Code in：Body - end（ページ末尾。推奨）
5
「Apply」をクリックして保存
6
プレーヤーを表示したい位置に、Embed HTML 要素として次の div を配置：
<div id="kikkiji-player"></div>
7
サイトを公開（Publish）
Custom Code は Wix サイト全体の <head> または <body> に直接挿入されるため、Embed HTML（iframe 内）とは異なり、現在のページ URL を自動取得できます。data-url 属性は不要です。

4. 動作確認

  1. 公開済みページを開く（Wix Editor のプレビューでは Embed HTML が動作しないことがあるため、必ず Publish 後に確認）
  2. 音声プレーヤーが表示されていることを確認
  3. 再生ボタンをクリックし、音声が流れることを確認
  4. ブラウザの開発者ツール（F12）>「Console」「Network」タブで、赤いエラー（403 / CORS など）が出ていないか確認
  5. キッキジ管理画面 >「利用状況」で、再生回数が記録されていることを確認（数分程度の反映遅延あり）

5. うまく動かないとき

block403 エラーが出る（Network タブで確認）

キッキジ側で「許可ドメイン外」と判定されています。次を確認：

  • キッキジ管理画面 > 組織設定 > 許可ドメイン に、現在のサイトドメインが登録されているか
  • Wix 独自ドメイン（your-account.wixsite.com）でアクセスしているのに、独自ドメイン（example.com）しか登録していない場合は両方登録
  • Embed HTML が iframe 内で動くため、data-url に指定した URL のドメインも許可ドメインに登録されている必要があります
visibility_offプレーヤーが表示されない
  • 必ず公開後に確認：Wix Editor のプレビュー機能では Embed HTML が完全には動作しないことがあります。「Publish」してから実サイトで確認してください
  • data-url を明示：Wix の Embed HTML は iframe 内で動くため、data-url 属性に対象記事の絶対 URL（https:// から始まる）を指定する必要があります
  • 要素のサイズ：Embed HTML 要素の縦幅が小さすぎるとプレーヤーが隠れます。200px 以上を目安にしてください
  • ブラウザキャッシュ：ハードリロード（Ctrl+Shift+R / Cmd+Shift+R）で古いスクリプトキャッシュを破棄してください
lockCustom Code メニューが見つからない

Custom Code 機能は Wix の Premium プラン以上 でのみ利用可能です。無料プラン（wixsite.com サブドメイン運用）の場合は、ページごとに Embed HTML 要素を貼る方法（手順 2）をご利用ください。

layersiframe にスクロールバーが出る / 横幅が合わない

Embed HTML 要素のサイズはエディタで明示的に指定する必要があります。要素を選択 > サイドバーの「サイズ調整」から、横幅 100%（または親要素の幅）・縦幅 200px 程度に設定してください。Custom Code で全体挿入する場合はこの問題は発生しません。

解決しないとき

上記で解決しない場合は kikkiji-support@heare-to.com までご連絡ください。次の情報を添えていただけると調査がスムーズです：