---
title: "Embedded Authenticationのスタイリング"
url: https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/styling-embedded-auth/
description: "Catalyst Authenticationを使用すると、アプリユーザーに安全な認証とサインインを提供し、ユーザーアカウントを管理できます。"
last_updated: 2026-08-17T12:16:04Z
service: Cloud Scale
type: general
---

# Embedded Authentication Typeのスタイリング

Catalystでは、Embedded Authentication Typeの両方のバリアントをスタイリングできます:

* Conventional Loginフォームのiframe
* Social Login-onlyフォームのiFrame

カスタムCSSファイルを提供するか、*Hosted Authentication* Typeの設定時に使用したスタイリング要素をインポートすることで、**Reset Password**および**Confirm Password**ページもスタイリングできます。

### 従来のiFrameのスタイルを変更するには:
![cloud_scale_auth_embedded_conventional](https://catalyst-docs-development.zohostratus.in/images/help/authentication/cloud_scale_auth_embedded_conventional.webp)

1. CSSファイルをダウンロードし、ファイル内の指示に従って、コードの最終行の後からiFrameログイン要素のスタイリングを開始します。[こちらからダウンロード](https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_signin.css)。

2. 各CSSコンポーネントの説明については、[このドキュメントを参照](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/reference-stylesheet-embedded/)してください。

### Social Login-onlyフォームのスタイルを変更するには:
![cloud_scale_auth_embedded_socials](https://catalyst-docs-development.zohostratus.in/images/help/authentication/cloud_scale_auth_embedded_socials.webp)

1. CSSファイルをダウンロードし、ファイル内の指示に従って、コードの最終行の後からiFrameログイン要素のスタイリングを開始します。[こちらからダウンロード](https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_signin_providers_only.css)。

2. 各CSSコンポーネントの説明については、[このドキュメントを参照](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/reference-stylesheet-embedded/)してください。

### Confirm Password iFrameのスタイルを変更するには:
![cloud_scale_confirm_pwd_page](https://catalyst-docs-development.zohostratus.in/images/help/authentication/cloud_scale_confirm_pwd_page.webp)

1. CSSファイルをダウンロードし、ファイル内の指示に従って、コードの最終行の後からiFrameログイン要素のスタイリングを開始します。[こちらからダウンロード](https://api.catalyst.zoho.com/__catalyst/auth/static-file?file_name=confirm_password.css)。

2. 各CSSコンポーネントの説明については、[このドキュメントを参照](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/reference-stylesheet-embedded/#section-where-the-end-user-confirms-their-password/)してください。

### Password Reset iFrameのスタイルを変更するには:
![cloud_scale_password_reset_page](https://catalyst-docs-development.zohostratus.in/images/help/authentication/cloud_scale_password_reset_page.webp)

1. ダウンロードボタンをクリックしてCSSファイルをダウンロードし、ドキュメント内の指示に従って、コードの最終行の後からドキュメントのスタイリングを開始します。[こちらからダウンロード](https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_password_reset.css)。

2. 各CSSコンポーネントの説明については、[このドキュメントを参照](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/reference-stylesheet-embedded/)してください。