Keycloak: テーマの編集準備ができています

このドキュメントは外観のカスタマイズガイドの一部です。完全なガイドはこちらからご覧いただけます：Stackhero で Keycloak のログインページ、アカウントコンソール、メールのブランド化が簡単にできます。色、ロゴ、テキストを設定したり、内蔵のオンラインエディタで完全なカスタムテーマを作成することも可能です。。

👋 Stackheroドキュメントへようこそ！

Stackheroは、Keycloakクラウドサービスを提供しており、本番環境対応のアイデンティティプロバイダーをわずか2分でデプロイできます：

無制限のユーザー、レルム、クライアント

OpenID Connect、OAuth 2.0、SAML 2.0、ソーシャルログイン、LDAPおよびActive Directoryフェデレーションに対応

カスタムドメイン名と組み込みのHTTPSによる安全なアクセス（例：https://login.your-company.com）

カスタムテーマ：付属のオンラインエディターでログインページ、アカウントコンソール、メールを簡単にブランディング可能

SPF、DKIM、DMARC対応の専用メールサーバーを搭載し、アカウント確認やパスワードリセットも自動で処理

管理コンソールを独立したクローズ可能なポートで利用できる組み込みPostgreSQLデータベース

ワンクリックアップデートで、手動作業なしにシステムを常に最新状態に維持

設定作業ではなく開発に時間を使いましょう：StackheroのKeycloakクラウドソリューションは最短5分でお試しいただけます。

themes/ を開くと default/ ディレクトリがあります。これが現在アクティブなテーマで、すでに Keycloak インスタンスで使用されています。選択操作は不要です。ファイルを編集するだけで、即座に変更が反映されます。

Keycloak テーマの事前知識は不要です。各ファイルには、よく変更される設定項目がすでに記載されており、現在の Keycloak の値がコメントアウトされた例として示されています。 値を変更するには、コメント記号を外し、値を調整して保存してください。

コメントのまま残した行は、Keycloak のデフォルト値が使用されます。これにより、アップデート後も常に標準の Keycloak 動作が維持されます。

変更内容	編集するファイル
色、ロゴ、背景、ログインフォント	`default/login/resources/css/stackhero.css`
ログインページのテキスト	`default/login/messages/messages_en.properties`
メールの件名・本文	`default/email/messages/messages_en.properties`
ライト／ダークテーマ	`default/login/theme.properties`
アカウント／管理コンソールのロゴ	`default/account/theme.properties`, `default/admin/theme.properties`
ログインページの HTML 構造	Keycloak の `.ftl` ファイルを `default/login/` にコピーして編集

ロゴの更新

default/login/resources/img/ を開くと、現在ログインページで使用されている2つの画像が表示されます。同じファイル名（keycloak-logo-text.svg）でご自身のロゴをアップロードし、Ctrl+F5（macOS の場合は Cmd+Shift+R）でログインページをリロードしてください。

これだけで完了です。ファイル編集やサービス再起動は不要で、保存と同時に変更が反映されます。背景画像を変更したい場合は、同じフォルダ内の keycloak-bg-darken.svg を更新してください。

異なるファイル名を使いたい場合は、default/login/resources/css/stackhero.css の「Your logo」セクションで参照先を変更できます。

色の設定

stackhero.css には、現在の値が記載された変数がすでに用意されています：

:root {
  /* ---------- Colors ---------- */
  /* The buttons */
  /* --pf-v5-global--primary-color--100: #06c; */
  /* The buttons, while hovered */
  /* --pf-v5-global--primary-color--200: #004080; */
  /* The links */
  /* --pf-v5-global--link--Color: #06c; */
  /* The colored line on top of the login box */
  /* --keycloak-card-top-color: #06c; */

変更を適用するには、コメント記号を外し、色を設定して保存し、ページをリロードしてください。これだけです。

作業中の注意: ブラウザはテーマの CSS、画像、スクリプトを1時間キャッシュします。繰り返し編集する場合は、常に Ctrl+F5 でリロードして最新の変更を確認してください。訪問者には1時間以内に更新が反映されます。

完全なコントロールが可能です。このファイルはプレーンな CSS で、最後に読み込まれるため、どんなスタイルも上書きできます。ブラウザの DevTools（F12）で要素を調査してください。Keycloak 26 では PatternFly design system が使われており、多くの色変数は --pf-v5-global--* という名前で、:root で再定義できます。

会社名の設定

この設定にはテーマ編集は不要です。管理コンソールで Realm settings > General を開き、Display name を設定してください。この名前はログインページやメールに表示されます。

テキストの多言語対応・変更

CSS や HTML を編集せずにテキストを変更できます。default/login/messages/messages_en.properties には、ログインフォームの全テキストとデフォルト文言が記載されています。行頭の # を外し、任意のテキストを入力して保存してください：

loginAccountTitle=Sign in to Acme
doLogIn=Sign in
doForgotPassword=I forgot my password

messages_fr.properties（フランス語）や messages_de.properties（ドイツ語）などのファイルを追加し、管理コンソールの Realm settings > Localization で該当言語を有効化してください。

ヒント：Localization タブには Realm overrides セクションもあり、コンソール上で直接テキストを変更できます。ファイル編集や再起動は不要です。ワークフローに合った方法をご利用ください。

メールのブランド化

Keycloak はアドレス確認、パスワードリセット、ユーザー招待などのメールを送信します。default/email/messages/messages_en.properties には、標準の件名や本文が記載されており、すぐにカスタマイズできます：

emailVerificationSubject=Confirm your Acme account
passwordResetSubject=Reset your Acme password

メール本文を編集する際は、以下にご注意ください：

{0}、{1}、{2} のプレースホルダーはそのまま残してください（Keycloak がリンク、表示名、遅延時間を自動で挿入します）。
アポストロフィは2つ連続で記述してください（例：don''t）。

メール HTML を上書きしたい場合は、Keycloak base email theme からテンプレートを default/email/html/ にコピーし、そのコピーを編集してください。

Stackhero では SPF、DKIM、DMARC 設定済みでメール送信が構成されています。Realm settings > Email で、サービスページに記載されたホスト名とポートを使って設定してください。

テーマをリセットしたい場合

問題が発生した場合は、default ディレクトリを丸ごと削除し、サービスを再起動してください。Stackhero が新しいデフォルトテーマを作成し、Keycloak 標準の外観が復元されます。

realm、ユーザー、クライアントはデータベースに保存されているため影響を受けません。