カスタムCSS・JavaScript・HTML

APIドキュメントを公開する際、カスタムのグローバルHTML、CSS、JavaScriptを追加して、ページのスタイルを自由にカスタマイズしたり、機能を拡張したりできる。

この機能は以下のような用途に役立つ。

サードパーティサービスの埋め込み（例：チャットボット、AIアシスタント）

デフォルトスタイルの調整（例：フォント、色、背景）

インタラクティブ要素の追加（例：ボタン、ポップアップ、クイックフィードバック）

この機能をうまく活用することで、ドキュメントにブランドらしさを反映し、ユーザー体験を向上させることができる。

CSS

カスタムCSSを使えば、フォントの変更、要素の非表示、マージンの調整、色の変更など、柔軟にスタイルを調整できる。

ただし、今後のアップデートでドキュメント構造が変更される可能性があるため、スタイルの安定性を保つために、以下2つの原則に従うことを推奨する。

予約済みCSS変数を利用する

予約済みCSSクラス名を利用する

予約済みCSS変数を利用する

Apidogでは、--g-で始まるCSS変数を用意しており、フォント・色・背景など基本的なページスタイルを制御できる。これらの変数はライトモード・ダークモード両方に対応しており、スタイルの安定性・保守性が高い。

主な変数リファレンス

例：メインテキストの色を変更する

予約済みCSSクラス名を利用する

特定のエリアだけを狙ってスタイルを適用したい場合は、Apidogが予約している.g-で始まるクラス名を使うとよい。これらは比較的安定しており、DOM構造の変更による影響を受けにくい。

主なCSSクラスリファレンス

例：左サイドバーを非表示にする

ページ構造やクラス名の調査方法

上記の予約済みCSS変数・クラス名以外にも、ブラウザの開発者ツールを使って、変更したいページ要素のクラス名を調べ、CSSでスタイルを調整できる。

まずは.g-で始まるクラス名を優先的に使うことを推奨する。これらはプラットフォームで予約されており、構造が安定している。他の構造用クラス名は、製品アップグレード後にスタイルが崩れるリスクがあるため、利用は慎重に。

公開済みドキュメントサイトをブラウザで開き、開発者ツール（デベロッパーモード/コンソール）でページ構造やクラス名を確認できる。

Mac：Command + Option + Iまたはfn + F12

Windows：Ctrl + Shift + Iまたはfn + F12またはF12

開いたら「要素選択ツール」（マウスアイコン）をクリックし、ページ内の任意のエリアをクリックすると、そのエリアのHTMLタグやクラス名が確認できる。

また、検索機能（Cmd/Ctrl + F）でクラス名を素早く探すことも可能。

JavaScript

カスタムJavaScriptは、AIアシスタントやサポートウィジェットなどのサードパーティサービスを埋め込む際に利用する。
注意：ApidogのカスタムJavaScript欄では<script>や<style>タグは使えない。必ず純粋なJavaScriptに変換する必要がある。例：

❌ 元のコード（非対応）

✅ 純粋なJavaScriptに変換後（対応）

サードパーティのスクリプトやスタイルを埋め込みたいが、純粋なJS形式への書き換え方が分からない場合は、下記のプロンプトをAIツール（例：Claude）に貼り付けて自動変換してもらうと便利。

Apidogの「カスタムJavaScript」機能を使っています。ここでは純粋なJavaScriptのみ許可されており、<script>や<style>タグは使えません。

下記コードを純粋なJavaScriptに変換してください。要件は以下の通りです。
1. <script>タグはdocument.createElement('script')による動的生成に書き換えること
2. <style>の内容は新規styleタグに挿入し、headに追加すること
3. すべてのDOM操作はcreateElementやappendChildなど標準メソッドを使い、document.writeは使わないこと
4. 元コードでwindow.addEventListener('DOMContentLoaded'...)を使っている場合は、より安定な'load'イベントに置き換えること
5. 最終的なJavaScriptはブラウザでそのまま実行できること

元コード：
---
（ここにコードを貼り付けてください）
---

セキュリティ上、カスタムJavaScriptはカスタムドメイン経由でアクセスした場合のみ有効になる。

Apidogが提供するデフォルトのドキュメントURL（例：https://xxx.apidog.io/で始まる）でアクセスした場合、カスタムJSは読み込まれず実行されない。

コード自体の信頼性を十分確認し、ページの正常な読み込みや構造を壊さないよう注意すること。

ページの読み込み完了後にコードを実行したい場合は、DOMContentLoadedではなくloadイベントを使うこと。例：

例：ボタンでiframeダイアログを開閉する

「ボタンでiframeダイアログを開閉する」用スクリプト

使い方：

Apidogの「カスタム JavaScript」欄に上記コードを貼り付ける。

カスタムドメイン経由でドキュメントサイトにアクセスする。

画面右下にボタンが表示されるので、クリックするとチャット用iframeが開く。

iframe.srcを自分のAIサービスなどに差し替える。例：

例：Chatbaseウィジェットの埋め込み

「Chatbaseチャットウィジェットの埋め込み」用スクリプト

使い方：

Chatbaseアプリを作成し、埋め込みコードを取得したら、上記プロンプトで純粋なJSに変換する。

変換後のコードをApidogのカスタムJS欄に貼り付ける。

カスタムドメイン経由でドキュメントサイトにアクセスする。

画面右下にボタンが表示され、クリックするとダイアログウィンドウが開く。

HTML

近日公開予定

よくある質問

カスタムJSが動作しない？

カスタムドメイン経由でドキュメントにアクセスしているか確認すること。カスタムJavaScriptは、バインド済みカスタムドメイン利用時のみ実行される。

なぜ 'DOMContentLoaded' ではなく 'load' を使うの？

カスタムCSS・JavaScript・HTML

CSS#

予約済みCSS変数を利用する#

予約済みCSSクラス名を利用する#

ページ構造やクラス名の調査方法#

JavaScript#

例：ボタンでiframeダイアログを開閉する#

例：Chatbaseウィジェットの埋め込み#

HTML#

よくある質問#

CSS

予約済みCSS変数を利用する

予約済みCSSクラス名を利用する

ページ構造やクラス名の調査方法

JavaScript

例：ボタンでiframeダイアログを開閉する

例：Chatbaseウィジェットの埋め込み

HTML

よくある質問