Wix Studio エディタ：カスタム要素を追加する
読了時間：3分
独自の要素を追加してクライアントサイトを強化しましょう。カスタム要素をサーバー URL またはコードファイルに接続することで、JavaScript コンポーネントを追加することができます。必要に応じて、エディタから直接、属性をさらに設定できます。（英語）
この記事では、以下の項目について説明します：
始める前に：
クライアントのサイトにドメインが接続されていることと、Wix 広告が表示されていないことを確認してください。
カスタム要素とは？
カスタム要素を使用すると、独自の HTML タグを使用できます。これらの要素は、サポートされているすべてのブラウザで動作し、HTML 5 で動作する任意の JavaScript ES6 ライブラリまたはフレームワークで使用できます。
カスタム要素を埋め込む場合、次の要件に注意してください：
- Javascript ファイルは Velo（推奨）を使用して Wix でホストされるか、独自の外部サーバーまたはローカルサーバーで ホストされる必要があります。（英語）
- コードには HTTP ではなく HTTPS を含める必要があります。コードに HTTPS が含まれていない場合、ライブサイトでは表示されません。
- コードは最新で、HTML5 と互換性がある必要があります。古いバージョンの JS または HTML を使用して記述されている場合、ほとんどのブラウザはページやスクリプトを正しく表示しません。
- CSS やその他の JS ファイルなど、関連するすべてのデザイン設定と複雑な機能はメインの JS コード内に保存する必要があります。これらの設定が個別に保存された場合、サイトでは機能しません。
ヒント：
- サードパーティのソースからのカスタム要素を使用できます。カスタム要素をページに追加する際は、「プロパティ」の「タグ名」を更新してください。
- カスタム要素のパフォーマンスは、その実装によって異なります。
カスタム要素を追加・設定する
必要な数だけカスタム要素を追加します。カスタム要素をページにドラッグしたら、そのソース（サーバーの URL または Velo ファイル）を定義し、ページレジストリで簡単に識別できるようにタグ名を付けます。
カスタム要素を追加・設定する方法：
- エディタ左側で「要素を追加」
をクリックします。 - 「埋め込み・SNS」をクリックします。
- 「カスタム要素」をクリックします。
- 「カスタム要素」横の「追加」アイコン
をクリックします。 - スクリプトファイルを追加します：
- カスタム要素を選択します。
- 「ソースを選択」をクリックします。
- カスタム要素の追加方法を選択します：
- サーバーの URL：ファイル名を含むファイル URL を入力します。
- Velo ファイル：Velo ファイルの 1つを選択します。
- 要素のタグ名を入力します。
注意：タグ名は、ダッシュで区切られた2語以上である必要があります（例：big-weather-widget）。
- （オプション）要素設定パネルから要素のサイズ、ドッキング、配置を調整します。
注意：
- セキュリティ上の理由から、カスタム要素はエディタの iFrame 内とプレビューモードでレンダリングされます。これは、コンポーネントのレイアウトに影響する可能性があります。公開済みのサイトにアクセスして、実際にサイトでどのように表示されているか確認しましょう。
- Velo API を使用して、要素の SEO 設定を定義できます。
カスタム要素の属性を設定する
属性を設定して、要素のプロパティと動作をさらに調整します。「パーツ属性」パネルでは、実際のコードにアクセスすることなく、エディタから直接属性を追加、編集、削除することができます。
重要：
カスタム要素のコードは、定義された属性を認識し、処理する必要があります。そうでない場合、正しく機能しません。
カスタム要素の属性を設定する方法：
- カスタム要素を選択します。
- 「属性を設定」をクリックします。
- 「属性を設定」をクリックします。
- 「rotation」や「width」など、属性に名前を付けます。
- 属性の値を入力します（任意の関連する文字列を使用できます）。
- 「設定」をクリックします。
詳細情報：
Velo by Wix によるカスタム要素の使用方法はこちら。特定の質問やトラブルシューティングについては、カスタム要素に関するよくある質問をご覧ください。（英語）
お役に立ちましたか？
|