Keycloak: 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/
  acme/
    login/                             # ユーザーサインインページ
      theme.properties                 # テーマ継承と CSS インクルード
      resources/css/stackhero.css      # カスタム CSS
      resources/img/logo.svg           # 画像
      messages/messages_en.properties  # テキスト
    account/                           # ユーザープロファイル管理
    admin/                             # 管理コンソールの外観
    email/                             # メールテンプレート

テーマは標準の Keycloak テーマを継承し、必要な部分だけを上書きします。典型的な login/theme.properties は次のようになります：

parent=keycloak.v2
styles=css/styles.css css/stackhero.css

• parent でベースとなるテーマを指定します。
• styles で読み込む CSS ファイルを列挙します。カスタム CSS は最後に記載し、変更が確実に反映されるようにしてください。

styles のリストは親テーマのリストを置き換えます。拡張ではありません。必ず親のスタイルシート（css/styles.css）を含めてください。含めないとデフォルトのスタイルが失われます。

HTML 構造を変更したい場合のみ FreeMarker テンプレート（.ftl ファイル）が必要です。色、ロゴ、背景、テキスト、多言語対応だけならテンプレート編集は不要です。詳細は Keycloak テーマドキュメント をご覧ください。