--- schema_version: "1" id: 1bb1abb4974c4e5339fcde5df96451cd794bde55e7d947bb7fe28af9395aefb8 title: CSS を使用した高度なスタイリング collection: mulesoft version: current locale: ja-jp portal_url: https://docs.salesforce.com/mulesoft/current/ja-jp/api-community-manager/css-styling.md canonical_url: https://docs.mulesoft.com/jp/api-community-manager/css-styling source_site: docs.mulesoft.com content_type: documentation content_hash: c72c09dc2517f01d4a9621a04e1bb91efb8fe402b81bff99e6b822728dd4b301 description: MuleSoft Documentation Site latest: true --- # CSS を使用した高度なスタイリング Anypoint API コミュニティマネージャーは、カスケードスタイルシート (CSS) という編集可能なサイトによる高度なスタイリング機能を提供します。以下のセクションでは、使用できるオプションについて簡単に説明します。詳細については、『Experience Cloud 開発者ガイド』の [「カスタム CSS によるテンプレート要素の上書き」](https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_customize_css.htm)を参照してください。 ## [](#css-を編集する)CSS を編集する 1. API コミュニティマネージャーコントロールパネルで **\[Community Builder (コミュニティビルダー)\]** を選択します。 2. ナビゲーションサイドバーでペイントブラシアイコンを選択して **\[テーマ\]** メニューを開きます。 3. メニューの隅にあるドロップダウン矢印を選択して **\[CSS を編集\]** を選択します。 4. **\[CSS を編集\]** ダイアログボックスで CSS ファイルを編集します。 5. 編集が終わったら **\[保存\]** を選択します。 ## [](#例)例 CSS を使用して API コミュニティマネージャーテーマの色を変更できます。 ```css search-bar-container { background: #342b4a!important; } ``` ## [](#css-クラス)CSS クラス ### [](#acm-search-box-acm-検索ボックス)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-検索結果)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-カルーセル)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-カタログ)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-の詳細ボタン)API Details Button (API の詳細ボタン)

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

### [](#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-ヘッダー)Header (ヘッダー)

Table 14. ヘッダーの CSS クラスと説明
クラス	説明
`acm-header`	コミュニティのメインヘッダー
`defaultLogo`	コミュニティのロゴ

### [](#learn-more-button-詳細ボタン)Learn More Button (詳細ボタン)

Table 15. Learn More Button (詳細ボタン) の CSS クラスと説明
クラス	説明
`learn-more-button`	[Learn more (詳細はこちら)] ボタン