CSS を使用した高度なスタイリング

Anypoint API コミュニティマネージャーは、カスケードスタイルシート (CSS) という編集可能なサイトによる高度なスタイリング機能を提供します。

以下のセクションでは、使用できるオプションについて簡単に説明します。詳細については、『Experience Cloud 開発者ガイド』の 「カスタム CSS によるテンプレート要素の上書き」​を参照してください。

CSS を編集する

  1. API コミュニティマネージャーコントロールパネルで ​[Community Builder (コミュニティビルダー)]​ を選択します。

  2. ナビゲーションサイドバーでペイントブラシアイコンを選択して ​[テーマ]​ メニューを開きます。

  3. メニューの隅にあるドロップダウン矢印を選択して ​[CSS を編集]​ を選択します。

  4. [CSS を編集]​ ダイアログボックスで CSS ファイルを編集します。

  5. 編集が終わったら ​[保存]​ を選択します。

例

CSS を使用して API コミュニティマネージャーテーマの色を変更できます。

search-bar-container {
  background: #342b4a!important;
}

CSS クラス

ACM Search Box (ACM 検索ボックス)

Table 1. ACM Search Box (ACM 検索ボックス) の CSS クラスと説明
クラス 説明

search-box-container​

コンテナ

search-box-result​

結果

search-box-results​

結果

search-result-group​

結果グループ

ACM Search Results (ACM 検索結果)

Table 2. ACM Search Results (ACM 検索結果) の CSS クラスと説明
クラス 説明

search-result​

検索結果

search-result-name​

名前

search-result-description​

説明

search-result-api-detail​

API の詳細

search-result-api-learn-more​

API の詳細はこちら

search-results-all-page​

すべてのページ

search-result-page​

ページ

search-results-container​

コンテナ

search-result-tab-menu-container​

タブメニューコンテナ

search-results-info​

情報

search-result-empty-main-text-message​

空のメインテキストメッセージ

search-result-empty-header-message​

空のヘッダーメッセージ

API カルーセル

Table 3. API カルーセルの CSS クラスと説明
クラス 説明

api-version-carousel-container​

カルーセルコンテナ

api-version-carousel-empty-message​

空カードメッセージ

api-version-carousel-slider​

Slick スライダーコンポーネントコンテナ

api-version-carousel-dots​

カルーセルのボトムドットナビゲーション

api-version-carousel-arrow​

左右矢印ナビゲーション

API Catalog (API カタログ)

Table 4. API Catalog (API カタログ) の CSS クラスと説明
クラス 説明

api-catalog-container​

カタログコンテナ

api-catalog-header​

カタログヘッダー

api-catalog-categories-container​

カテゴリコンテナ

api-catalog-mini-search​

検索バーがカテゴリの横にあるときに使用される小さい検索

api-catalog-mini-search-input​

小さい検索入力

api-catalog-multiselect-container​

複数選択コンテナ

api-catalog-multiselect-label​

複数選択の表示ラベル

api-catalog-multiselect​

カテゴリの複数選択コンポーネント

api-catalog-chips-container​

チップ、選択したカテゴリの表示ラベル、[Clear All (すべてクリア)] ボタンのコンテナ

api-catalog-chips-label​

チップの表示ラベル

api-catalog-clear-all-button​

[Clear All (すべてクリア)] ボタン

chips-container​

チップコンテナ

chip-container​

表示ラベルと閉じるアイコンを含む 1 つのチップのコンテナ

chip-label​

チップの表示ラベル

chip-icon​

チップの閉じるアイコン

api-catalog-separator​

区切り文字

api-catalog-search-container​

検索コンテナ

api-catalog-search​

検索バーがカテゴリの下にあるときに使用される標準サイズの検索

api-catalog-apis-container​

API コンテナ

api-catalog-page-indicator​

ページインジケーター

api-catalog-empty-message​

空カードメッセージ

api-catalog-card-container​

カードコンテナ

api-catalog-card-badges-container​

カードバッジコンテナ

api-catalog-card-badge​

カードバッジ

api-catalog-card-icon​

カードアイコン

api-catalog-card-name​

カード名

api-catalog-card-description​

カードの説明

api-catalog-card-buttons-container​

カードボタンコンテナ

api-catalog-card-details-button​

カードの [Details (詳細)] ボタン

api-catalog-card-learn-more-button​

カードの [Learn More (詳細はこちら)] ボタン

api-catalog-paginator-container​

ページネーターコンテナ

API Details Button (API の詳細ボタン)

Table 5. API Details Button ([API Details (API の詳細)] ボタン) の CSS クラスと説明
クラス 説明

api-details-button​

[API Details (API の詳細)] ボタン

API バージョンカード

Table 6. API バージョンカードの CSS クラスと説明
クラス 説明

api-version-card-container​

API カードコンテナ

api-version-card-border​

API カードの境界線と影

api-version-card-header​

アイコンとタイトルのコンテナ

api-version-card-icon​

カードアイコン

api-version-card-title​

カードタイトル

api-version-card-description​

カードの説明

api-version-card-buttons-container​

[API Details (API の詳細)] と [Learn more (詳細はこちら)] ボタンのコンテナ

api-version-card-button-detail​

[API Details (API の詳細)] ボタン

api-version-card-button-more​

[Learn more (詳細はこちら)] ボタン

検索バー

Table 7. 検索バーの CSS クラスと説明
クラス 説明

search-bar-container​

検索バーコンテナ

#acm-search​

検索入力

アプリケーションリスト

Table 8. アプリケーションリストの CSS クラスと説明
クラス 説明

application-listing-header​

ボタンとアプリケーション検索入力のコンテナ

application-listing-no-app-msg​

アプリケーションカードがない場合のメッセージ

application-listing-search-container​

検索入力コンテナ

application-listing-cards-container​

アプリケーションカードコンテナ

アプリケーションカード

Table 9. アプリケーションカードの CSS クラスと説明
クラス 説明

application-card-container​

アプリケーションカードコンテナ (境界線と影)

application-card-header-container​

タイトルとカードボタンのコンテナ

application-card-header-title​

アプリケーションカードタイトル

application-card-action-buttons-container​

ボタンコンテナ

application-card-edit-button​

編集コンテナ

application-card-delete-button​

削除コンテナ

application-card-info-container​

情報カードコンテナ

application-card-primary-divisor​

1 行目仕切り

application-card-analytics-container​

分析情報コンテナ

application-card-requests-info​

要求の表示ラベルと値

application-card-throughput-info​

スループットの表示ラベルと値

application-card-errors-info​

エラーの表示ラベルと値

application-card-latency-info​

レイテンシーの表示ラベルと値

application-card-secondary-divisor​

2 行目仕切り

application-card-requests-container​

「要求情報」コンテナ

application-card-api-access​

アクセスの表示ラベル

application-card-requests-approved​

承認済み要求の表示ラベルと値

application-card-requests-rejected​

拒否済み要求の表示ラベルと値

application-card-requests-pending​

保留中の要求の表示ラベルと値

アプリケーションレジスター

Table 10. アプリケーションレジスターの CSS クラスと説明
クラス 説明

application-register-container​

新規アプリケーション登録ラッパー

application-register-title​

アプリケーションタイトルの作成

application-register-subtitle​

アプリケーション情報サブタイトル

application-register-name​

アプリケーション名の表示ラベル

application-register-name-input​

アプリケーション名の入力

application-register-name-registered​

メッセージアプリケーション名はすでに登録済み

application-register-description​

説明の表示ラベル

application-register-description-input​

説明の入力

application-register-callback​

コールバックの表示ラベル

application-register-callback-input​

コールバックの入力

application-register-button​

作成ボタン

アプリケーション詳細

Table 11. アプリケーション詳細の CSS クラスと説明
クラス 説明

application-detail-name​

アプリケーション名

application-detail-line​

行仕切り

application-detail-client-credentials​

クライアントログイン情報の表示ラベル

application-detail-client-id​

クライアント ID のコンテナ

application-detail-client-id-label​

クライアント ID の表示ラベル

application-detail-client-id-value​

クライアント ID の値

application-detail-client-secret​

クライアントシークレットのコンテナ

application-detail-client-secret-label​

クライアントシークレットの表示ラベル

application-detail-client-secret-input​

クライアントシークレットの入力

application-detail-client-access-status​

API アクセス状況の表示ラベル

application-detail-client-approved​

承認済みの表示ラベルと値

application-detail-client-rejected​

拒否済みの表示ラベルと値

application-detail-client-pending​

保留中の承認の表示ラベルと値

インスタンスセレクター

Table 12. インスタンスセレクターの CSS クラスと説明
クラス 説明

instance-selector-container​

インスタンスセレクターのコンテナ

instance-selector-add-api​

API 追加の表示ラベル

instance-selector-line​

行区切り文字

instance-selector-box​

インスタンスセレクターの境界線

instance-selector-list-container​

インスタンスセレクターのリスト

コントラクトセレクター

Table 13. コントラクトセレクターの CSS クラスと説明
クラス 説明

contracts-selector-container​

コントラクトセレクターのコンテナ

contracts-selector-label​

アプリケーション名の表示ラベル

contracts-selector-line​

行区切り文字

contracts-selector-box​

コントラクトセレクターの境界線

contracts-selector-list​

コントラクトセレクターのリスト

contracts-selector-api-name​

API 参照名の表示ラベル

contracts-manager-button​

矢印ボタン

Header (ヘッダー)

Table 14. ヘッダーの CSS クラスと説明
クラス 説明

acm-header​

コミュニティのメインヘッダー

defaultLogo​

コミュニティのロゴ

Learn More Button (詳細ボタン)

Table 15. Learn More Button (詳細ボタン) の CSS クラスと説明
クラス 説明

learn-more-button​

[Learn more (詳細はこちら)] ボタン