Embedded Authenticationのリファレンススタイルシート

# Embedded Authenticationのリファレンススタイルシート

このページでは、{{%link href="/ja/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/introduction/" %}}Embedded Authentication{{%/link%}} Typeでログイン要素をスタイリングするために必要なすべてのCSSクラスとIDの一覧と説明を提供します。Catalystは、Conventional Loginフォーム、Social-Login Onlyフォーム、Password Resetフォームに個別のCSSファイルを提供し、それぞれに個別のCSS IDとクラスがあります。

これらのCSS IDとクラスは、利便性のためにCatalystによって事前定義されています。必要に応じてスタイルシートに組み込むだけで、ログイン要素のデザインとブランディングをカスタマイズできます。設定したCSSファイルを、この認証のログインフォームスクリプトにインポートする必要があります。

iFrameのスタイリングを開始する前に、必要なCSSファイルをダウンロードしてください。

CSSスタイルシート:
* Conventional Loginフォーム - {{%link href="https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_signin.css" %}}ダウンロード{{%/link%}}
* Social Login-onlyフォーム - {{%link href="https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_signin_providers_only.css" %}}ダウンロード{{%/link%}}
* Confirm Passwordフォーム - {{%link href="https://api.catalyst.zoho.com/__catalyst/auth/static-file?file_name=confirm_password.css" %}}ダウンロード{{%/link%}}
* Password Resetフォーム - {{%link href="https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_password_reset.css" %}}ダウンロード{{%/link%}}

{{%note%}}{{%bold%}}注意:{{%/bold%}} スタイルシートをダウンロードした後、コードの最終行の後からログイン要素のスタイリングを開始してください。既存のコードを変更しないことを強くお勧めします。変更するとiFrameが正しくレンダリングされない可能性があります。上記の各フォームがエンドユーザーにどのように表示されるかの詳細については、この{{%link href="/ja/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/styling-embedded-auth/" %}}シート{{%/link%}}を参照してください。{{%/note%}}

### エンドユーザーがメールアドレスを入力するセクション
<br />

<br />

#### セクション1 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#headtitle</td>
			<td>iFrameのタイトルに存在するスタイリング要素を処理するID</td>
		</tr>
	</tbody>
</table>

#### セクション2 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#login_id</td>
			<td>入力フィールドのスタイリングを処理するID</td>
		</tr>
        <tr>
			<td>.fielderror</td>
			<td>エラーテキストのサイズを処理するクラス</td>
		</tr>
        <tr>
			<td>.errorlabel</td>
			<td>エラーメッセージの配色を処理するクラス</td>
		</tr>
        <tr>
			<td>.errorborder</td>
			<td>エラー発生時に入力フィールドの周囲に表示されるボーダー色を処理するクラス</td>
		</tr>
	</tbody>
</table>

#### セクション3 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#nextbtn</td>
			<td>「{{%bold%}}NEXT{{%/bold%}}」ボタンのスタイリングを処理するID</td>
		</tr>
	</tbody>
</table>

#### セクション4 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#forgotpassword</td>
			<td>「{{%bold%}}Forgot Password{{%/bold%}}」リテラルのスタイリングを処理するID</td>
		</tr>
	</tbody>
</table>

#### セクション5 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.fed_div</td>
			<td>ソーシャルログインオプション全体のサイズ、高さ、カーソル、オーバーフローを処理するクラス</td>
		</tr>
        <tr>
			<td>.zoho_fed_box</td>
			<td>Zohoソーシャルログインの配色を処理するクラス</td>
		</tr>
        <tr>
			<td>.fed_icon</td>
			<td>すべてのソーシャルログインのロゴサイズを処理するクラス</td>
		</tr>
        <tr>
			<td>..zoho_icon</td>
			<td>Zohoソーシャルログインのロゴアイコンを処理するクラス</td>
		</tr>
	</tbody>
</table>

### エンドユーザーがパスワードを入力するセクション
<br />
<br />

#### セクション1 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.username</td>
			<td>メールアドレスフィールドを処理するクラス</td>
		</tr>
	</tbody>
</table>

#### セクション2 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.Notyou</td>
			<td>「{{%bold%}}Change{{%/bold%}}」リテラルのフォントサイズを処理するクラス</td>
		</tr>
        <tr>
			<td>.bluetext</td>
			<td>「{{%bold%}}Change{{%/bold%}}」リテラルの色およびその他のプロパティを処理するクラス</td>
		</tr>
	</tbody>
</table>

#### セクション3 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#password</td>
			<td>入力フィールドのさまざまなプロパティを処理するID</td>
		</tr>
        <tr>
			<td>.fielderror</td>
			<td>エラーテキストのサイズを処理するクラス</td>
		</tr>
        <tr>
			<td>.errorborder</td>
			<td>エラー発生時に入力フィールドの周囲に表示されるボーダー色を処理するクラス</td>
		</tr>
        <tr>
			<td>.errorlabel</td>
			<td>エラーテキストの配色を処理するクラス</td>
		</tr>
        <tr>
			<td>.show_hide_password</td>
			<td>表示アイコンのプロパティを処理するクラス</td>
		</tr>
        <tr>
			<td>.icon_hide</td>
			<td>非表示アイコンのプロパティを処理するクラス</td>
		</tr>
        <tr>
			<td>.icon_show</td>
			<td>クリック時の表示アイコンのプロパティを処理するクラス</td>
		</tr>
	</tbody>
</table>

#### セクション4 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.blue_text_action</td>
			<td>両方のリテラルの配色、フォントサイズ、その他のプロパティを処理するクラス</td>
		</tr>
	</tbody>
</table>

#### セクション5 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.blue</td>
			<td>Sign Inボタンとボックスの配色を処理するクラス</td>
		</tr>
        <tr>
			<td>.btn</td>
			<td>ボタンのサイズを処理するクラス</td>
		</tr>
	</tbody>
</table>

### エンドユーザーがパスワードを確認するセクション
<br />

#### セクション1 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.confirmtitle</td>
			<td>タイトルに存在するスタイリング要素を処理するクラス</td>
		</tr>
		<tr>
			<td>.confirmdesc</td>
			<td>タイトル要素の下部に強力でユニークなパスワードの作成を通知する通知/説明要素</td>
		</tr>
		<tr>
			<td>.confirm_head</td>
			<td>確認フォームの背景のスタイリングを処理するクラス</td>
		</tr>
	</tbody>
</table>

#### セクション2 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.username</td>
			<td>メールアドレスフィールドを処理するクラス</td>
		</tr>
		<tr>
			<td>.icon-profile</td>
			<td>メールアドレスフィールド内のプロフィールを処理するクラス</td>
		</tr>
	</tbody>
</table>

#### セクション3 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#password</td>
			<td>パスワード入力フィールドに存在するスタイリング要素を処理するID</td>
		</tr>
		<tr>
			<td>.icon-hide</td>
			<td>非表示アイコンのプロパティを処理するクラス</td>
		</tr>
		<tr>
			<td>.show_hide_password</td>
			<td>アイコンの表示のプロパティを処理するクラス</td>
		</tr>
		<tr>
			<td>.fielderror</td>
			<td>エラーテキストのサイズを処理するクラス</td>
		</tr>
		<tr>
			<td>.passwordpolicy</td>
			<td>パスワードポリシーを含むポップアップを処理するクラス</td>
		</tr>
	</tbody>
</table>

#### セクション4 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#cpassword</td>
			<td>パスワード確認の入力フィールドを処理するID</td>
		</tr>
	</tbody>
</table>

#### セクション5 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#nextbtn</td>
			<td>確認ボタンを処理するID</td>
		</tr>
</table>

### エンドユーザーがCAPTCHAを入力するセクション
<br />
<br />

#### セクション2 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.user_info</td>
			<td>ボックスのボーダーのスタイリング要素を処理するクラス</td>
		</tr>
        <tr>
			<td>.menutext</td>
			<td>ユーザーのメールIDのスタイリングを処理するクラス</td>
		</tr>
	</tbody>
</table>

#### セクション3 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.changeuser</td>
			<td>「{{%bold%}}Change{{%/bold%}}」リテラルに存在するスタイリング要素を処理するクラス</td>
		</tr>
	</tbody>
</table>

#### セクション4 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#captcha_container</td>
			<td>Captchaコントロールボックスを囲むボックスのスタイリングを処理するID</td>
		</tr>
        <tr>
			<td>.reload_captcha ::before</td>
			<td>リロードボタンのクリック前のスタイリングを処理するクラス</td>
		</tr>
        <tr>
			<td>.text_box</td>
			<td>入力フィールドのプロパティを処理するクラス</td>
		</tr>
	</tbody>
</table>

#### セクション5 <br />
<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">CSS ID・クラス</th>
			<th class="w50p">説明</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.blue</td>
			<td>ボタンとボックスの配色を処理するクラス</td>
		</tr>
        <tr>
			<td>.btn</td>
			<td>ボタンのサイズを処理するクラス</td>
		</tr>
	</tbody>
</table>

このページでは、Embedded Authentication Typeでログイン要素をスタイリングするために必要なすべてのCSSクラスとIDの一覧と説明を提供します。Catalystは、Conventional Loginフォーム、Social-Login Onlyフォーム、Password Resetフォームに個別のCSSファイルを提供し、それぞれに個別のCSS IDとクラスがあります。

iFrameのスタイリングを開始する前に、必要なCSSファイルをダウンロードしてください。

CSSスタイルシート:

Conventional Loginフォーム - ダウンロード
Social Login-onlyフォーム - ダウンロード
Confirm Passwordフォーム - ダウンロード
Password Resetフォーム - ダウンロード

注意: スタイルシートをダウンロードした後、コードの最終行の後からログイン要素のスタイリングを開始してください。既存のコードを変更しないことを強くお勧めします。変更するとiFrameが正しくレンダリングされない可能性があります。上記の各フォームがエンドユーザーにどのように表示されるかの詳細については、このシートを参照してください。

エンドユーザーがメールアドレスを入力するセクション

セクション1

CSS ID・クラス	説明
#headtitle	iFrameのタイトルに存在するスタイリング要素を処理するID

セクション2

CSS ID・クラス	説明
#login_id	入力フィールドのスタイリングを処理するID
.fielderror	エラーテキストのサイズを処理するクラス
.errorlabel	エラーメッセージの配色を処理するクラス
.errorborder	エラー発生時に入力フィールドの周囲に表示されるボーダー色を処理するクラス

セクション3

CSS ID・クラス	説明
#nextbtn	「NEXT」ボタンのスタイリングを処理するID

セクション4

CSS ID・クラス	説明
#forgotpassword	「Forgot Password」リテラルのスタイリングを処理するID

セクション5

CSS ID・クラス	説明
.fed_div	ソーシャルログインオプション全体のサイズ、高さ、カーソル、オーバーフローを処理するクラス
.zoho_fed_box	Zohoソーシャルログインの配色を処理するクラス
.fed_icon	すべてのソーシャルログインのロゴサイズを処理するクラス
..zoho_icon	Zohoソーシャルログインのロゴアイコンを処理するクラス

エンドユーザーがパスワードを入力するセクション

セクション1

CSS ID・クラス	説明
.username	メールアドレスフィールドを処理するクラス

セクション2

CSS ID・クラス	説明
.Notyou	「Change」リテラルのフォントサイズを処理するクラス
.bluetext	「Change」リテラルの色およびその他のプロパティを処理するクラス

セクション3

CSS ID・クラス	説明
#password	入力フィールドのさまざまなプロパティを処理するID
.fielderror	エラーテキストのサイズを処理するクラス
.errorborder	エラー発生時に入力フィールドの周囲に表示されるボーダー色を処理するクラス
.errorlabel	エラーテキストの配色を処理するクラス
.show_hide_password	表示アイコンのプロパティを処理するクラス
.icon_hide	非表示アイコンのプロパティを処理するクラス
.icon_show	クリック時の表示アイコンのプロパティを処理するクラス

セクション4

CSS ID・クラス	説明
.blue_text_action	両方のリテラルの配色、フォントサイズ、その他のプロパティを処理するクラス

セクション5

CSS ID・クラス	説明
.blue	Sign Inボタンとボックスの配色を処理するクラス
.btn	ボタンのサイズを処理するクラス

エンドユーザーがパスワードを確認するセクション

セクション1

CSS ID・クラス	説明
.confirmtitle	タイトルに存在するスタイリング要素を処理するクラス
.confirmdesc	タイトル要素の下部に強力でユニークなパスワードの作成を通知する通知/説明要素
.confirm_head	確認フォームの背景のスタイリングを処理するクラス

セクション2

CSS ID・クラス	説明
.username	メールアドレスフィールドを処理するクラス
.icon-profile	メールアドレスフィールド内のプロフィールを処理するクラス

セクション3

CSS ID・クラス	説明
#password	パスワード入力フィールドに存在するスタイリング要素を処理するID
.icon-hide	非表示アイコンのプロパティを処理するクラス
.show_hide_password	アイコンの表示のプロパティを処理するクラス
.fielderror	エラーテキストのサイズを処理するクラス
.passwordpolicy	パスワードポリシーを含むポップアップを処理するクラス

セクション4

CSS ID・クラス	説明
#cpassword	パスワード確認の入力フィールドを処理するID

セクション5

CSS ID・クラス	説明
#nextbtn	確認ボタンを処理するID

エンドユーザーがCAPTCHAを入力するセクション

セクション1

CSS ID・クラス	説明
#headtitle	iFrameのタイトルに存在するスタイリング要素を処理するID

セクション2

CSS ID・クラス	説明
.user_info	ボックスのボーダーのスタイリング要素を処理するクラス
.menutext	ユーザーのメールIDのスタイリングを処理するクラス

セクション3

CSS ID・クラス	説明
.changeuser	「Change」リテラルに存在するスタイリング要素を処理するクラス

セクション4

CSS ID・クラス	説明
#captcha_container	Captchaコントロールボックスを囲むボックスのスタイリングを処理するID
.reload_captcha ::before	リロードボタンのクリック前のスタイリングを処理するクラス
.text_box	入力フィールドのプロパティを処理するクラス

セクション5

CSS ID・クラス	説明
.blue	ボタンとボックスの配色を処理するクラス
.btn	ボタンのサイズを処理するクラス

最終更新日 2026-02-23 18:09:41 +0530 IST

Yes

Thank you for your feedback!

Send your feedback to us

Skip

Submit