--- title: コードとウィジェット：カスタムCSSとスクリプト description: カスタムCSS、コード（カウンター、チャット、ピクセルなど）をheadとbodyに追加する方法、制限事項とセキュリティ対策。 section: account keywords: カスタムCSS、ヘッダーコード、ボディコード、カウンター、Googleアナリティクス、ピクセル、チャットウィジェット updated: 2026-09-16 --- 設定の「コードとウィジェット」セクションでは、カウンター、広告ピクセル、チャットウィジェット、クッキーバナーなどの独自のコードをウェブサイトに挿入できるほか、外観を微調整するための独自のCSSも挿入できます。 ![コードとウィジェットブロック](/wiki/img/settings-code.webp "ヘッダーとボディの末尾にコードを配置する") ## ヘッドとボディ内のコード - **ヘッダーコード**— 各ウェブサイトページの``に挿入されます。Google Analytics、Meta Pixel、および検証用メタタグに使用されます。 - **本文末尾のコードは**、 ``の前に挿入されます。チャットウィジェット、クッキーバナー、およびページ読み込みを必要とするスクリプトに使用されます。サービスから提供されたコード全体を貼り付けて、「保存」をクリックしてください。文字数制限は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では、 `