1. Homepage
  2. API Experience Hub
  3. エクスペリエンスビルダーを使用したポータルのカスタマイズ

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

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

API Experience Hub では、API Experience Hub の一般的なコンポーネント向けのカスケードスタイルシート (CSS) という編集可能なサイトによる高度なスタイリング機能が提供されます。

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

CSS を編集する

  1. [ビルダー]​ で、ペイントブラシアイコンをクリックして ​[テーマ]​ メニューを開きます。

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

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

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

例

CSS を使用して API Experience Hub テーマの色を変更できます。

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

CSS クラス

API Card (API カード)

このコンポーネントは API カルーセルや API カタログに含まれます。API カードは、アセットに関する基本情報 (名前、説明、アイコン、タイプ、最終更新日) を表示します。

クラス 説明

.asset-card-container

アセットカードのメインコンテナ。

.asset-card-header-icon

アセットアイコンコンテナ。

.asset-card-type

アセットカードタイプテキスト。たとえば、HTTP-API、REST-API、または SOAP-API。

.asset-card-name

アセットカード名テキスト。

.asset-card-description

アセットカード説明テキスト。

.asset-card-last-updated

アセットカード最終更新テキスト。

このコンポーネントはホームページに表示されます。API カルーセルは、一度に最大 5 つのアセットが表示されるカルーセルとして API カードを表示します。

クラス

説明

.assets-carousel-container

メインカルーセルコンテナ。

.assets-carousel-title

アセットのカルーセルタイトル。

.assets-carousel-sub-title

アセットのカルーセルサブタイトル。

.assets-carousel-view-all-link

すべてのアセットリンクを表示。

.base-carousel-arrow-button-left

左カルーセルボタン。

.base-carousel-arrow-button-right

右カルーセルボタン。

.base-carousel-dots-container

ボトムナビゲーションドットのコンテナ。

.base-carousel-dot

ナビゲーションドット。

.base-carousel-dot-selected

選択済みのナビゲーションドット。

API Catalog (API カタログ)

このコンポーネントは、サイトのすべてのアセットを表示します。ユーザーはアセットを検索してアセットタイプで絞り込むことができます。

クラス

説明

.assets-catalog-container

メインカタログコンテナ。検索条件が含まれるヘッダーとアセットカードが含まれる本文が含まれます。

.assets-catalog-header-container​

ヘッダーカタログコンテナ。検索条件が含まれます。

.assets-catalog-header-search

検索入力コンテナ。

.assets-catalog-header-filters-container​

右側のアセットタイプ検索条件と [Clear all (すべてクリア)] ボタンのコンテナ。

.assets-catalog-header-filter-type-container

アセットタイプ検索条件のコンテナ。

.assets-catalog-header-clear-all​

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

.assets-catalog-body-container​

すべてのアセットカードが含まれる本文コンテナ。

アプリケーション詳細

このコンポーネントは、アプリケーション情報 (名前、説明、アプリケーション URL、リダイレクト URI、許可種別) を表示します。

クラス

説明

.application-details-header-name​

アプリケーション名。

.application-details-header-description-container​

アプリケーションの説明。

.application-details-header-application-url-container

アプリケーション URL コンテナ。

.application-details-header-application-url​

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

.applications-details-cards​

クライアントログイン情報カード、リダイレクト URI カード、許可種別カードのコンテナ。

.application-details-card​

カードコンテナ。

.application-details-card-header-title​

カードタイトル。

.application-details-card-content​

カードコンテンツ。

.application-details-card-content-data .label​

クライアントログイン情報カード: クライアント ID とクライアントシークレットの表示ラベル。

.application-details-card-content-data .value​

クライアントログイン情報カード: クライアント ID とクライアントシークレットの値。

.application-details-card-uri​

リダイレクト URI カード: アプリケーション URI。

.application-details-grant-type​

許可種別カード: アプリケーションの許可種別。

Application Listing (アプリケーションリスト)

このコンポーネントは、ユーザーが作成したアプリケーションを表示します。アプリケーションは名前および説明により絞り込むことができます。

クラス

説明

.applications-listing-search-container​

アプリケーションリストの検索入力コンテナ。

.applications-listing-table-container​

アプリケーションテーブルコンテナ。

.applications-listing-table .name-column​

アプリケーション名テーブルヘッダーの表示ラベル。

.applications-listing-table​

.description-column​

アプリケーションの説明テーブルヘッダーの表示ラベル。

.applications-listing-table .credentials-column​

アプリケーションログイン情報テーブルヘッダーの表示ラベル。

.applications-listing-table-row​

アプリケーション行が含まれる各テーブル要素。

.applications-listing-table-row​

.name-cell​

アプリケーション名。

.applications-listing-table-row​

.description-cell​

アプリケーションの説明。

.applications-listing-table-row​

.credentials-icon​

ログイン情報アイコンを表示。

.applications-listing-table-row​

.credentials-label​

ログイン情報の表示ラベルを表示。

.applications-listing-table-row-credentials​

ログイン情報のポップアップコンテナ。

.applications-listing-table-row-credentials `​

`.crendetials-tooltip-title​

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

`.applications-listing-table-row-credentials `​

.crendetials-tooltip-code

アプリケーションのクライアント ID とシークレットコード。

Asset Documentation Viewer (API Overview) (アセットドキュメントビューアー (API 概要))

(公開コンポーネント) このコンポーネントは API 詳細ページに含まれます。 アセットからのページが表示されます。このページは Exchange から要求されます。

クラス

説明

.asset-documentation-viewer-container

アセットドキュメントビューアーのプリンシパルコンテナ。

asset-documentation-viewer-spinner-container

アセット詳細ヘッダー以降のドキュメント要求情報中に実行されるスピナーコンテナ。

.asset-documentation-viewer-spinner-container​

​.asset-documentation-viewer-spinner​

アセット詳細ヘッダー以降のドキュメント要求情報中に実行されるスピナー。

.asset-documentation-viewer-pages-container​

アセットドキュメントビューアーページコンテナのコンテナ。このコンテナは、ナビゲーションバーの有無に関係なく使用できます。

.asset-documentation-viewer-pages-tabs

アセットドキュメントページを表示するためのナビゲーションバー。

.asset-documentation-viewer-pages-spinner-container​

Exchange からのページコンテンツの要求時に実行されるスピナーコンテナ。

.asset-documentation-viewer-pages-spinner-container​

.asset-documentation-viewer-pages-spinner​

Exchange からのページコンテンツの要求中に実行されるスピナー。

.asset-documentation-pages-base-error

Exchange からのコンテンツの要求に失敗した時に表示されるコンテナ。

c-base-error を表示。

.asset-documentation-viewer-pages-one-page-container

アセットに 1 ページしかない場合に表示されるコンテナ。この場合、ナビゲーションバーは表示されません。

.asset-documentation-viewer-markdown

マークダウンが表示される div 要素。

Asset Detail Header (アセット詳細ヘッダー)

(公開コンポーネント) このコンポーネントは [API detail (API 詳細)] ページで表示されます。アセットに関する基本情報 (ロゴ、名前、アセットタイプ、情報の連絡先、コンボボックスバージョン、状況、インスタンス、クライアント、仕様のダウンロード、[Request Access (アクセス権の要求)] ボタン) が表示されます

クラス

説明

asset-detail-header-container

アセット詳細ヘッダーのプリンシパルコンテナ。

.asset-detail-header-spinner-container​

ページが読み込まれるときに実行されるスピナーコンテナ。

.asset-version-header-index-information-collapsible

アセット情報の折りたたみ可能なボタン。

.asset-version-header-index-information-icon​

.asset-type-{assetType}-background-color​

アセットアイコンの背景色。assetType:

rest-api

evented-api

http-api

soap-api

.asset-version-header-index-information-icon​

.asset-type-{this.assetType}-border-color​

アセットアイコンの境界線の色。assetType:

rest-api

evented-api

http-api

soap-api

.asset-version-header-index-information-title-container​

.asset-version-header-index-information-title

アセットのタイトル。

.asset-detail-header-index-content-version-action-buttons​

.asset-detail-header-index-content-version-download-button-button​

[Download spec (仕様をダウンロード)] ボタン。

.asset-detail-header-index-content-version-action-buttons​

.asset-detail-header-index-content-version-download-button-modal

ユーザーが ​[Download (ダウンロード)]​ をクリックしたときに開くオプションが含まれるモーダル。

.asset-version-header-index-information-detail​

.asset-type

アセットタイプ。

.asset-version-header-index-information-detail​

.name

連絡先名。

.asset-version-header-index-information-detail​

.email-link​

連絡先メール。

.asset-version-header-index-information-description​

.description

アセットの説明。

.asset-detail-header-index-content-version-main-container​

.asset-detail-header-index-content-version-spinner-container

ユーザーが選択するバージョンを変更したときに実行されるスピナーコンテナ。

.asset-detail-header-index-content-version-element-detail​

.header

コンテンツバージョン内のアクションのタイトル。アセットバージョン、アセットの状態、インスタンス、クライアント。すべての要素に適用されます。

.asset-detail-header-index-content-version-element-detail​

.body

コンテンツバージョン内のアクションの本文。アセットバージョン、アセットの状態、インスタンス、クライアント。すべての要素に適用されます。

.asset-detail-header-index-content-version-element-detail​

.status

アセットの状況を表示。

.asset-detail-header-index-content-version-element-detail​

.instances

アセットのインスタンスの数。

.asset-detail-header-index-content-version-element-detail​

.number-contracts

アセットのコントラクトの数。

.asset-detail-header-index-content-version-element-detail​

.asset-detail-header-index-content-version-select-container`​

アセットのバージョンを選択するコンテナ。

c-base-title-selector を表示。

Base Error (基本エラー)

(非公開コンポーネント) このコンポーネントは、エラーまたは空の状態のメッセージを表示するためにアセット詳細ヘッダーまたはアセットドキュメントビューアーとして他の公開コンポーネントによって使用されます。

クラス

説明

.base-error-container

コンポーネントのメインコンテナ。

.base-error-svg-icon-container

メインアイコンが含まれる要素。

.base-error-text

エラーまたは空の状態のメッセージのタイトル。

.base-error-sub-text

エラーまたは空の状態のメッセージのサブタイトル。

.base-error-request-id

一部のエラーでは、要求 ID が表示されます。

.base-error-try-again

一部のエラーでは、失敗したアクションをもう一度実行するボタンが表示されます。

アクセス権の要求

(非公開コンポーネント) このコンポーネントは、エラーまたは空の状態のメッセージを表示するためにアセット詳細ヘッダーまたはアセットドキュメントビューアーとして他の公開コンポーネントによって使用されます。

クラス

説明

.request-access-container​

[Request access (アクセス権の要求)] ボタンのコンテナ。

.request-access-button

アセット詳細ヘッダー内の [Request access (アクセス権の要求)] ボタン。

.request-access-button-label

[Request access (アクセス権の要求)] ボタンの表示ラベル。

.request-access-modal-content

[Request access (アクセス権の要求)] モーダルのコンテンツのコンテナ。

.request-access-modal-footer

[Request access (アクセス権の要求)] モーダルのフッターのコンテナ。

.request-access-field-label

[Request access (アクセス権の要求)] モーダルのフォーム入力の表示ラベル。

.request-access-field-subtitle

[Request access (アクセス権の要求)] モーダルのフォーム入力のサブタイトル。

.request-access-field-content

[Request access (アクセス権の要求)] モーダルのフォーム入力のコンテンツ。

.request-access-modal-new-application

新規アプリケーションフォームのコンテナ。

.request-access-new-application-form-title

新規アプリケーションタイトルを作成。

.request-access-input-content.name

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

.request-access-input-content.description

新規アプリケーションの入力の説明。

.request-access-input-content.url

新規アプリケーションのアプリケーション URL 入力。

.request-access-input-content.redirectUri

新規アプリケーションのリダイレクト URI 入力。

.request-access-modal-button

[Cancel (キャンセル)] および [Request access (アクセス権の要求)] モーダルボタン。

.request-access-modal-button.confirm

[Request access (アクセス権の要求)] モーダルボタン。

関連情報