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 (詳細はこちら)] ボタン