コードとウィジェット：カスタムCSSとスクリプト
設定の「コードとウィジェット」セクションでは、カウンター、広告ピクセル、チャットウィジェット、クッキーバナーなどの独自のコードをウェブサイトに挿入できるほか、外観を微調整するための独自のCSSも挿入できます。
ヘッドとボディ内のコード#
- ヘッダーコード— 各ウェブサイトページの
<head>に挿入されます。Google Analytics、Meta Pixel、および検証用メタタグに使用されます。 - 本文末尾のコードは、
</body>の前に挿入されます。チャットウィジェット、クッキーバナー、およびページ読み込みを必要とするスクリプトに使用されます。
サービスから提供されたコード全体を貼り付けて、「保存」をクリックしてください。文字数制限は1フィールドあたり20,000文字です。このコードは公開ウェブサイトでのみ有効で、アカウントでは動作しません。
例：
- Google Analytics 4 - ヘッダー内の
gtag.jsフラグメント。 - メタピクセルとは、ヘッド内のピクセルの断片のことです。
- チャットウィジェット（Tawk、Crisp、JivoChat） - 本文にスクリプトを記述します。
- Google/Bing/Yandexの権限を確認するには、SEOブロックの「権限の確認」から行う方が便利です。
カスタムCSS#
AIアシスタントまたは連携AIチャットを介してカスタムCSSを追加します。「CSSを追加：ボタンを完全に丸くする」と入力します。アシスタントがコードをチェックし、サイトに適用します。より詳細なカスタマイズを行うには、カードの場合は[data-asd="card"] 、ヘッダーの場合は[data-asd="header"] 、ヒーローブロックの場合は[data-asd="block-hero"]など、サイト要素の属性を使用します。アシスタントが候補リストを提示します。
お客様のCSSは、カタログのCSSスタイルとは別に保存されます。スタイルを変更しても、お客様の編集内容は保持されます。
制限事項と安全性#
- CSSでは、
<style>、<script>、@importタグおよび式は禁止されています。これらは検証時に削除されます。 - ヘッダーとボディ内のスクリプトは、訪問者のブラウザで実行されます。信頼できるサービスからのコードのみを挿入してください。
- 貼り付け後にサイトが「壊れて」しまった場合は、フィールドをクリアして保存してください。サイトは正常な表示に戻ります。
質疑応答#
カウンターはカウントしません#
コードがヘッダーに貼り付けられ、保存されていることを確認し、サイトが（アカウントではなく）公開アドレスで開いていることを確認してください。広告ブロッカーは検証を妨げる可能性があります。
地図やフォームを挿入することは可能ですか？#
はい、AIアシスタントを介してページ上の「カスタムHTML」ブロックとして追加できます。ホームとメニューをご覧ください。