テーマパッケージは、レイアウトと複数のモジュールスキンを一式にまとめて配布・適用する Zittme の方式です。ユーザーがテーマを 1 つインストール・適用すると、レイアウトと掲示板・会員などの各モジュールスキンが、互いに調和した 1 セットに切り替わります。

テーマは新しい種類の資料ではありません。既存のレイアウト・スキンをまとめる包装です。各構成要素は普段どおりに作れば大丈夫です。

1. フォルダ構成：すべて自分のフォルダの中に

テーマは themes/{theme-name}/ の中にすべての構成要素を収めます。内部構造は本来のパスをそのまま真似ます。

themes/heritage/
├── theme.xml                              ← 테마 정보와 구성 목록
├── assets/                                ← (선택) 구성요소가 공유하는 CSS 등
├── layouts/
│   └── heritage_default/                  ← 일반 레이아웃과 완전히 같은 구조
│       ├── layout.html
│       ├── conf/info.xml
│       ├── css/  js/
└── modules/
    ├── board/skins/heritage_default/      ← 일반 게시판 스킨과 같은 구조
    └── member/skins/heritage_default/

こうする理由は、衝突が起きないからです。テーマの掲示板スキンと他の資料の掲示板スキンが同じ名前でも、別々のフォルダにあるので上書きしません。テーマを削除すると、フォルダが 1 つ消えるだけです。

2. theme.xml

<?xml version="1.0" encoding="UTF-8"?>
<theme schema="1.0">
	<title xml:lang="ko">헤리티지</title>
	<description xml:lang="ko">레이아웃·게시판·회원 스킨이 한 벌로 맞춰진 테마입니다.</description>
	<version>1.0.0</version>
	<date>2026-08-04</date>
	<author email_address="you@example.com" link="https://example.com">제작자</author>
	<license>GPLv2</license>

	<components>
		<component type="layout" name="heritage_default" />
		<component type="module-skin" target="board" name="heritage_default" />
		<component type="module-skin" target="member" name="heritage_default" />
	</components>

	<apply>
		<layout name="heritage_default" />
		<skin module="board" name="heritage_default" />
		<skin module="member" name="heritage_default" />
	</apply>
</theme>

• components：このテーマフォルダの中に何が入っているかを宣言します。type は layout または module-skin（この場合は target でモジュールを指定）。
• apply：「テーマを適用」を押したときに、何をどこに適用するかを決めます。適用前に変更される項目の一覧をユーザーに表示し、確認を取ります。

存在しないモジュールはスキップします

テーマにコマーススキンが含まれていても、コマースモジュールがインストールされていないサイトでは、その項目だけが静かにスキップされます。追加モジュール用のスキンをセットに入れても安全です。

レスポンシブテーマ

テーマをレスポンシブとして宣言するには、構成要素のスキン・レイアウトがすべて <responsive>true</responsive> の表示を持っている必要があります。1 つでも欠けていると検証で拒否されます。（レスポンシブビューとレスポンシブ表示 を参照）

3. 構成要素は普段どおりに作る

テーマ内のレイアウト・スキンは、構文も規約も通常の資料とまったく同じです。場所がテーマフォルダの中というだけです。

• レイアウト：layout.html + conf/info.xml（extra_vars、メニュー宣言、繰り返しフィールド を含む）
• スキン：該当モジュールの基本スキンと同じテンプレートファイル構成

共有アセット：テーマ全体で同じ色・フォント体系を使うには、themes/{name}/assets/ に共通 CSS を置き、各構成要素から相対パスで読み込みます。色を CSS 変数にまとめておけば、テーマ全体の色を 1 か所で変更できます。

/* themes/heritage/assets/heritage.css */
:root {
	--hr-brand: #6c5ce0;
	--hr-ink: #10151f;
	...
}

/* 게시판 스킨 css 에서 */
@import url("../../../../../assets/heritage.css");

4. インストールと適用の動作

• インストールはすべて検証してからすべて展開する方式です。構成要素が 1 つでも問題を抱えていれば、何もインストールされません。
• 適用範囲は選択したサイト内に限られます。
• 適用前に何が変わるかの一覧を表示し、確認を取ります。

5. 制作チェックリスト

• theme.xml の components と実際のフォルダの内容が一致しているか
• 各構成要素が単体でも正常に動作するか（テーマは包装にすぎないため）
• レスポンシブ宣言時、すべての構成要素に <responsive>true</responsive> があるか
• テンプレート v2 を使う場合、複数行の {{-- --}} コメントを使っていないか：1 行のコメントしか除去されないため、複数行のコメントはサーバーエラーになります。複数行の説明は HTML コメントで書いてください。
• レイアウト CSS で html, body の背景を宣言したか：最上位の div にだけ背景を塗ると、ダークモードで画面の端に白い帯が残ります。