# Keycloakのテーマカスタマイズによるブランド統一

## 目次
1. Keycloakの概要
2. ブランド統一の重要性
3. Keycloakのテーマとは
4. テーマカスタマイズの手順
   1. テーマディレクトリの作成
   2. テンプレートの編集
   3. CSSの調整
   4. ロゴと画像の差し替え
5. トラブルシューティング
6. まとめ

## 1. Keycloakの概要
Keycloakは、オープンソースのアイデンティティおよびアクセス管理ツールです。シングルサインオン（SSO）、ユーザ管理、プロトコル（OIDC、OAuth 2.0、SAMLなど）の対応といった機能を持ちます。

## 2. ブランド統一の重要性
ブランド統一は、ユーザーのエクスペリエンスを向上させ、企業の一貫性を維持するために重要です。同じデザイン感覚が貫かれていると、ユーザーに安心感を与えることができます。

## 3. Keycloakのテーマとは
Keycloakのテーマは、ユーザーが対話するログインページや管理画面の外見を設定するための機能です。デフォルトのテーマのままではなく、企業やプロジェクトのブランドに合致するよう、カスタマイズが可能です。

## 4. テーマカスタマイズの手順

### 4-1. テーマディレクトリの作成
まず、Keycloakサーバーの`themes`ディレクトリにカスタムテーマのディレクトリを作成します。このディレクトリには、ベースとなるテーマからコピーしたファイルを配置します。

![img](/mosaic-code.jpg)

### 4-2. テンプレートの編集
ログイン画面やエラー画面などのテンプレートは、`themes/my-custom-theme/login`以下に配置されています。`login.ftl`などのテンプレートファイルを編集して、HTML構造をカスタマイズします。

![img](/mosaic-code.jpg)

### 4-3. CSSの調整
`resources`ディレクトリ内のCSSファイルを編集することで、スタイルの調整が可能です。具体的な色設定やフォントの指定を行います。

![img](/mosaic-code.jpg)

### 4-4. ロゴと画像の差し替え
ブランドのロゴやその他の画像も、同様にカスタムディレクトリ内に配置し、テンプレートからそれを参照するようにします。

![img](/mosaic-code.jpg)

## 5. トラブルシューティング
- **テーマが反映されない場合**: Keycloakサーバーを再起動し、キャッシュがクリアされていることを確認します。
- **スタイルが崩れる場合**: CSSのセレクタを検証し、`.kc-login`のような特定のクラス名が正しく指定されているかを確認します。

## 6. まとめ
Keycloakのテーマカスタマイズは、サーバー管理者が企業のブランドを一貫性を持って表現するための強力な方法です。ユーザーインターフェースをブランド化することで、ユーザーにとっての信頼性とユーザーエクスペリエンスを向上させることができます。テーマカスタマイズの基本手順を理解すれば、Keycloakを用いたブランド体験の統一が可能となります。 [cv:issue_marketplace_engineer]

# Keycloakのテーマカスタマイズによるブランド統一

## 目次
1. Keycloakの概要
2. ブランド統一の重要性
3. Keycloakのテーマとは
4. テーマカスタマイズの手順
   1. テーマディレクトリの作成
   2. テンプレートの編集
   3. CSSの調整
   4. ロゴと画像の差し替え
5. トラブルシューティング
6. まとめ

## 1. Keycloakの概要
Keycloakは、オープンソースのアイデンティティおよびアクセス管理ツールです。シングルサインオン（SSO）、ユーザ管理、プロトコル（OIDC、OAuth 2.0、SAMLなど）の対応といった機能を持ちます。

## 2. ブランド統一の重要性
ブランド統一は、ユーザーのエクスペリエンスを向上させ、企業の一貫性を維持するために重要です。同じデザイン感覚が貫かれていると、ユーザーに安心感を与えることができます。

## 3. Keycloakのテーマとは
Keycloakのテーマは、ユーザーが対話するログインページや管理画面の外見を設定するための機能です。デフォルトのテーマのままではなく、企業やプロジェクトのブランドに合致するよう、カスタマイズが可能です。

## 4. テーマカスタマイズの手順

### 4-1. テーマディレクトリの作成
まず、Keycloakサーバーの`themes`ディレクトリにカスタムテーマのディレクトリを作成します。このディレクトリには、ベースとなるテーマからコピーしたファイルを配置します。

```bash
mkdir -p themes/my-custom-theme/login
cp -r themes/base/* themes/my-custom-theme/login/
```

### 4-2. テンプレートの編集
ログイン画面やエラー画面などのテンプレートは、`themes/my-custom-theme/login`以下に配置されています。`login.ftl`などのテンプレートファイルを編集して、HTML構造をカスタマイズします。

```html

<div class="kc-login">
    <img src="logo.png" alt="Brand Logo">
    <h1>Welcome to [Your Brand Name]</h1>
    
</div>
```

### 4-3. CSSの調整
`resources`ディレクトリ内のCSSファイルを編集することで、スタイルの調整が可能です。具体的な色設定やフォントの指定を行います。

```css
body {
    background-color: #f5f5f5;
    font-family: 'Roboto', sans-serif;
}
.kc-login h1 {
    color: #333;
}
```

### 4-4. ロゴと画像の差し替え
ブランドのロゴやその他の画像も、同様にカスタムディレクトリ内に配置し、テンプレートからそれを参照するようにします。

```html
<img src="resources/img/my-logo.png" alt="My Brand">
```

## 5. トラブルシューティング
- **テーマが反映されない場合**: Keycloakサーバーを再起動し、キャッシュがクリアされていることを確認します。
- **スタイルが崩れる場合**: CSSのセレクタを検証し、`.kc-login`のような特定のクラス名が正しく指定されているかを確認します。

## 6. まとめ
Keycloakのテーマカスタマイズは、サーバー管理者が企業のブランドを一貫性を持って表現するための強力な方法です。ユーザーインターフェースをブランド化することで、ユーザーにとっての信頼性とユーザーエクスペリエンスを向上させることができます。テーマカスタマイズの基本手順を理解すれば、Keycloakを用いたブランド体験の統一が可能となります。

Keycloakのテーマカスタマイズによるブランド統一

目次

1. Keyclo

続きを読むには単価診断を受けてください（30秒）