heritage XEDITION テーマ
Zittme 1.0.0 からコアに同梱されている標準テーマ heritage XEDITION の詳細マニュアルです。heritage テーマの構造と設定体系をそのまま受け継ぎ、XE 時代の XEDITION レイアウトと XEDITION 掲示板スキンのデザイン(ゴールドのアクセント · ダークグレー · 直角の区切り · クラシックなテーブル型掲示板)を現在の基準で描き直したワイドテーマです。ポイントカラー連動、ダークモード、レスポンシブに標準対応しています。
heritage テーマとの違いは「デザイン」です。レイアウト設定項目、メニュークラス(m / sl / sf)のルール、テーマの適用方法は heritage と同じなので、どちらを使っても同じ方法で運用できます。
構成
| 構成要素 | 名前 | 役割 |
|---|---|---|
| レイアウト | heritage_xedition | サイト全体の骨格(ヘッダー · メニュー · ビジュアル · 本文 · フッター) |
| 掲示板スキン | heritage_xedition | 掲示板の一覧 · 閲覧 · 投稿 · コメント(クラシックなテーブル型) |
| 会員スキン | heritage_xedition | ログイン · 会員登録 · マイページ · アカウント検索 |
| メッセージスキン | heritage_xedition | メッセージボックス · 友だちリスト |
| コマーススキン | heritage_xedition | ショッピングモール画面(コマースモジュールのインストール時) |
| 予約スキン | heritage_xedition | 予約画面(予約モジュールのインストール時) |
| zittme Pay スキン | heritage_xedition | 決済画面(zittme Pay モジュールのインストール時) |
| お問い合わせ · 知識iN スキン | heritage_xedition | コンタクト · 知識質問モジュールのインストール時 |
| ウィジェットスキン | heritage XEDITION | 統合コンテンツウィジェット · 統合コマースウィジェット(コアウィジェットに含まれる) |
すべての構成要素が同じデザイントークン(色 · 書体 · 間隔 · 直角の角)を共有します。本文書体は Pretendard、英字の見出しとロゴテキストには Raleway が使われます(ハングルは Pretendard で表示)。
heritage テーマとの違い
| 項目 | heritage | heritage XEDITION |
|---|---|---|
| ポイントカラーの既定値 | #6c5ce0(紫) | #cda25a(ゴールド) |
| 角 | 角丸 | 直角(すべてのカード · ボタン · 入力欄) |
| 本文の最大幅 | 1060 / 1180 / 1320 | 1320 / 1440 / 1600(ワイド) |
| ヘッダー | 上部ユーティリティ行 + メニューバーの 2 段 | ロゴ · メニュー · ユーティリティが 1 行に並ぶ全幅ヘッダー。スクロールすると高さが縮み、半透明ブラーで固定 |
| メニューのドロップダウン | メニューバー下の明るいパネル | 各第 1 階層メニューの下にダークなドロップダウン、上端に 3px のポイントカラーライン |
| 検索 | ヘッダーの検索欄 | 検索アイコンを押すとヘッダーを覆う大型検索オーバーレイ |
| ログイン領域 | テキストリンク | ポイントカラーのプロフィールボックス(写真 + ニックネーム + 通知ベル)、ホバーでマイ情報 · 管理者 · ログアウトメニュー |
| ビジュアルスライダー | 本文幅 | 常に画面全幅 |
| サブページ | タイトルなし | グレーのサブタイトルバンド(slx / sfx で非表示にできる) |
| フッター | 中央揃え | 本文幅の左揃えカラム + 全幅のダークなコピーライトバー |
| ダークモードのパレット | 紺系 | ゴールドに合わせたウォームチャコール |
適用する
- 管理者 > デザイン設定に移動します。
- テーマ一覧から heritage XEDITION を選び、適用を押します。
- レイアウトと各モジュールスキンが一度に適用されます。特定の構成要素だけを除外するには、適用画面でチェックを外します。
- 管理者 > サイトメニュー編集でメニュー項目を開きます。
- クラス 入力欄に
m、sl、sf、slx、sfxのいずれかを入力します。 - 保存すると、そのメニューから入ったページが該当のタイプで表示されます。
- クラスを指定していないメニューは、レイアウト設定の レイアウト形式(既定値:サブ)に従います。サイトのトップページ(最初のページ)は、指定がなければメイン型で表示されます。
- 下位メニューにクラスを入れると、そのページでは下位の値が上位より優先され、下位に指定がなければ上位メニューのクラスを引き継ぎます(3 階層まで)。
- クラス欄に他のクラスと空白区切りで一緒に書いてもかまいません。例:
sfx highlight - 会員 · メッセージ · zittme Pay · 統合検索の画面は、クラス指定がなければ自動的に全幅になります。
- ビジュアル表示「メイン形式のときのみ」(既定) + ホームメニューに
m:ホームでだけスライダーが表示される一般的な構成 - ビジュアル表示「サブページにも表示」:タイプに関係なくすべてのページ上部にスライダー
- ビジュアル表示「使用しない」:どこにも表示しない
- サイトメニュー編集の「上部メニュー」(gnb)に接続した項目が表示され、3 階層まで対応します。第 1 階層メニューにマウスを乗せると、その項目の下にダークなドロップダウンが開き、上端に 3px のポイントカラーラインが付きます。第 3 階層メニューはドロップダウン内でインデントして表示されます。
- 現在のページの第 1 階層メニューには、下側に 3px のポイントカラーの下線が表示されます。
- メニュー配置オプションで、メニューをロゴの横に並べるか、ヘッダーの中央に置くかを選べます。
- コメント数はタイトルの横に
+Nで表示されます。 - 新着表示はタイトルの前の 7px のポイントカラーの四角い点で、掲示板設定の「新着表示時間」に従います(既定 24 時間)。
- 閲覧画面は、暗いタイトルバーの代わりに大きなタイトルと下線付きのメタ行(投稿者 · 日付 · 閲覧数 · 推薦数)で構成されます。
- ボタンはフラットな薄いグレーの四角いボタンで、ホバーするとポイントカラーで塗られます。主要な操作ボタン(登録 · 投稿)は最初からポイントカラーです。
- ページネーションは枠のない数字の並びで、現在のページだけがポイントカラーの数字と下線で表示され、最初 / 最後は二重矢印アイコンです。
- サムネイルは直角に切り取られます。
- 強調色はレイアウトのポイントカラーと連動します。
- 画面上部にはタイトルとその下にポイントカラーの短い線が付き、タイトルと本文の間に十分な余白を取ります。
- マイページ · メッセージボックスのプロフィール領域は、52px のプロフィール写真 + ニックネーム + ランク · 登録日が入ったカードで表示され、カード上端に 3px のポイントカラーの線が付きます。
- 左側のナビゲーションメニューは、レイアウトの LNB と同じ表現(区切り線付きのタイトル + 左側 3px のアクティブバー)です。
- 入力欄 · セレクトボックス · ボタンの高さはすべて 46px に統一されており、1 行に並べてもずれません。ボタンは掲示板と同じフラットな四角いボタンです。
- モバイルではプロフィールカードと検索フォームが縦に積み重なります。
- ボックスなしで、タイトル行の下の区切り線とポイントカラーの短い線で領域を分けます(掲示板ヘッダーと同じ表現)。
- タブ型はタブ行 1 本だけを端まで引き、「もっと見る」リンクがタブ行の右側に置かれます。
- コメント数
+N、新着の四角い点、直角のサムネイルなどの表記は掲示板スキンと同じです。 - カラーモードが「自動」なら訪問者の端末のライト / ダーク設定に従い、ヘッダーの切り替えボタンで訪問者が自分で変更することもできます(端末ごとに保存)。
- ダークパレットは、ゴールドのアクセントに合わせたウォームチャコール(茶色がかった濃いグレー)です。掲示板 · 会員 · メッセージ · コマース · ウィジェットスキンまで一緒に切り替わります。
- ダークモード用ロゴ画像を別に登録すると、ダークモードではそのロゴが代わりに表示されます。登録しない場合は標準ロゴをそのまま使うため、背景が透明なロゴを推奨します。
- ホームメニューのクラスを
mに指定し、ビジュアルスライドを 2 枚以上登録します。 - ページモジュールでホームの本文を作り、統合コンテンツウィジェットを行単位で積み重ねます。ウィジェットスキンは「heritage XEDITION」を選びます。
- 掲示板が複数ある場合は、タブ型ウィジェットでまとめて 1 つの領域に表示します。
- ショッピングモールも運営する場合は、統合コマースウィジェットで商品の行を追加します。
- ビジュアルスライダーが表示されません:① スライドが 1 枚以上登録されているか ② ビジュアル表示が「使用しない」になっていないか ③ 現在のページがメイン型(
m)か(表示設定が「メイン形式のときのみ」の場合)の順に確認してください。 - サブページ上部のグレーの帯(タイトル)を消したいです:メニュークラスを
slxまたはsfxに変更してください。 - 左側メニュー(LNB)が表示されません:サブ型(
sl/slx)である必要があり、現在の第 1 階層メニューに下位メニューがある必要があります。 - メニューを中央に移したら、アクティブメニューの横に細い縦線が見えます:1.0.0 の不具合です。テーマを 1.0.1 以上にアップデートしてください。
- ダークモードが適用されません:カラーモードが「常に明るく」に固定されていないか確認してください。
- 一部のモジュール画面が標準デザインのままです:該当モジュールの設定でスキンが heritage_xedition に選択されているか確認してください。テーマの一括適用はサイトメニューに接続されたモジュールにのみ適用されるため、コンタクトのようにメニューに接続されていないモジュールは、モジュール設定で個別に選びます。
- ポイントカラーを変えたのに一部しか変わりません:キャッシュが原因の可能性があります。管理者 > キャッシュ再生成の後、再読み込みしてください。
- 英字の見出し書体が違って見えます:見出しとロゴテキストの英字は Raleway(Google Fonts)で表示されます。外部フォントの読み込みがブロックされた環境では Pretendard で代替されます。
- Rhymix からアップデートしたのにテーマが適用されていません:アップデートでは既存のデザイン設定が維持されます。管理者 > デザイン設定で heritage XEDITION を手動で適用してください。
Zittme 1.0.0 を新規インストールしたサイトには、このテーマが最初から適用されています(レイアウト + 掲示板 · 会員 · メッセージスキン)。Rhymix や 0.0.x からアップデートしたサイトは既存の設定が維持されるため、上記の手順で手動で適用する必要があります。
テーマの適用は以前の状態を記憶するので、いつでも適用前の状態に戻せます。使用中のテーマは、インストール済みテーマ一覧で削除ボタンが無効になります。
レイアウト設定の全項目
管理者 > レイアウト設定、またはサイトを見ながら左下のフロント管理バーの「レイアウト設定」で変更します。設定は 4 つのグループ(タブ)に分かれています。
基本
| 項目 | 既定値 | 説明 |
|---|---|---|
| ロゴ画像 | なし | 高さ 40px 基準で表示。空にするとロゴテキストを使用 |
| ダークモード用ロゴ画像 | なし | ダークモードで代わりに表示するロゴ。空にすると標準ロゴをそのまま使用 |
| ロゴテキスト | なし | 空にするとサイトタイトルが表示されます。Raleway 書体で表示 |
| ポイントカラー | #cda25a | ボタン · リンク · アクティブ表示 · プロフィールボックス · ドロップダウン上端の線、さらに掲示板 · ウィジェットスキンの強調色まで一括で決まります |
| 本文の最大幅 | 1440px | 狭い 1320 / 標準 1440 / 広い 1600。ワイドテーマなので既定値が heritage より広くなっています |
| メニューの配置 | ロゴの横に並べる | ロゴの横 / 中央。ヘッダーは常に画面全幅を使い、このオプションはメニューの位置だけを変えます |
| メニューバーの色 | 暗く | 暗く / ポイントカラー / 明るく。モバイルのドロワーはこの値に関係なく常にダークトーンです |
| モバイルのダークモードボタンの位置 | メニュードロワー内 | メニュードロワー内 / ヘッダー / フッター。PC では常にヘッダーに表示 |
| モバイルの言語選択の位置 | メニュードロワー内 | メニュードロワー内 / ヘッダー / フッター。PC では常にヘッダーに表示。コアで使用言語が 2 つ以上のときだけ表示されます |
| カラーモード | 訪問者の端末設定に合わせる | 自動 / 常に明るく / 常に暗く |
トップ画面(ビジュアルスライダー)
| 項目 | 既定値 | 説明 |
|---|---|---|
| ビジュアルスライダーの表示 | メイン形式のときのみ | メイン形式のときのみ / サブページにも表示 / 使用しない。スライドを 1 枚も登録しないと表示されません |
| 自動切り替え間隔(秒) | 6 | 0 にすると自動で切り替わりません |
| ビジュアルスライド | なし | 繰り返しフィールド。追加ボタンでスライドを複数登録し、ドラッグで順序を変えます |
スライド 1 枚の項目:背景画像、タイトル、説明、ボタン名、ボタンリンク、テキストの配置(左 / 中央)。
スライダーは本文幅に関係なく常に画面全幅で表示され、高さは画面幅に応じて 320px から 600px の間で調整されます。横 1920px 以上の背景画像を推奨します。左右の矢印は半透明の四角いボタン、ページ表示は四角いドットで、現在のスライドは縦長のポイントカラーのバーで表示されます。
本文・サイド
| 項目 | 既定値 | 説明 |
|---|---|---|
| 統合検索を使用 | オン | ヘッダーの検索アイコンと検索オーバーレイの表示有無 |
| サイドにログインボックスを表示 | オフ | サブ(LNB)ページのサイドにログインウィジェットを表示します |
フッター
| 項目 | 説明 |
|---|---|
| サイト紹介文 | フッター左側の紹介テキスト |
| 事業者・連絡先情報 | 改行した各行が 1 項目として表示されます(商号 · 代表者 · 事業者番号 · 住所など) |
| 著作権表記 | 下部のダークなコピーライトバーに表示 |
フッターメニューは、サイトメニュー編集で「フッターメニュー」(footer_menu)に項目を接続すると表示されます(1 階層)。コピーライトバーの右側にはトップへ戻るボタンがあり、モバイルの位置オプションを「フッター」にした場合は、ダークモードボタンと言語選択がここに表示されます。
ページタイプ(メニュークラス m / sl / sf / slx / sfx)
ページごとに 5 種類の表記のうち 1 つをメニュークラスとして指定します。
| タイプ | メニュークラス | 見た目 |
|---|---|---|
| メイン型 | m | ビジュアルスライダーが表示されるホーム画面用。サブタイトルバンドなし |
| サブ型 | sl | サブタイトルバンド + 左側 LNB(現在のメニューに下位メニューがある場合) + 本文 |
| 全幅サブ型 | sf | サブタイトルバンド + LNB なしで本文が全幅 |
| サブ型(バンドなし) | slx | sl と同じだがサブタイトルバンドを表示しない |
| 全幅サブ型(バンドなし) | sfx | sf と同じだがサブタイトルバンドを表示しない |
サブタイトルバンドは本文の上に敷かれるグレーの帯で、現在のメニュー名をタイトルとして表示します。掲示板スキンの掲示板タイトル機能と重なる場合は、slx / sfx でバンドをオフにして掲示板タイトルだけを使うか、逆にバンドを残して掲示板タイトルを空にしてください。
指定方法
動作ルール:
メインビジュアルとの組み合わせ
LNB(左側の下位メニュー)
サブ型(sl / slx)ページで、現在の第 1 階層メニューに下位メニューがあると、左側 260px の領域に下位メニューの一覧が表示されます。ボックスのないリスト形式で、タイトルの下に区切り線とポイントカラーの短い線が付き、現在の項目は左側の 3px のポイントカラーのバーで表示されます。第 3 階層メニューがある項目には右矢印が付き、展開された下位項目は折れ矢印アイコンでインデントされます。下位メニューがないメニューは LNB なしで本文だけが表示されます。
ヘッダーと上部メニュー(GNB)
ヘッダーは常に画面全幅を使います。左からロゴ、メニュー、右側のユーティリティの順で、ページを下にスクロールすると高さが縮んだ状態で上部に固定され、背景が半透明ブラーに変わります。
右側のユーティリティは左から次の順です。
| 要素 | 説明 |
|---|---|
| ダークモードボタン | 訪問者が明るく / 暗くを自分で切り替えます(端末ごとに保存) |
| 検索アイコン | 押すとヘッダーを覆う大型の検索入力欄が開きます。X、Esc、外側のクリックで閉じます。統合検索の使用をオフにすると非表示になります |
| 言語ボタン | KR / EN のような略称コードで表示。押すと使用言語の一覧が開き、見ていたページを保ったまま言語だけが切り替わります。コアで使用言語が 2 つ以上のときだけ表示されます |
| プロフィール領域 | 未ログイン:ポイントカラーのログインボタン。ログイン時:プロフィール写真 + ニックネーム + 通知ベルが入ったポイントカラーのボックス。ホバーするとマイ情報 · 管理者(管理権限がある場合) · ログアウトのメニューが開きます |
通知ベルは通知センター(ncenterlite)モジュールがインストールされたサイトで表示され、未読通知の数と最近の通知一覧を表示します。この場合、通知センターの標準フローティングウィジェットは自動的にオフになります。
モバイル
1024px 以下ではメニューが非表示になり、右端のハンバーガーボタンでドロワーメニューを開きます。ドロワーはポイントカラーをベースにしたダークトーンで、メニュー全体(3 階層)とログイン · マイ情報 · 管理者のリンクが入ります。ダークモードボタンと言語選択は、レイアウト設定の「モバイルの ... の位置」オプションに応じて、ドロワー下部のツール行、ヘッダー、フッターのいずれかに表示されます。
掲示板スキン
掲示板設定 > スキン設定で heritage_xedition を選びます。レスポンシブなので、モバイルスキンを別に用意する必要はありません。
XEDITION 掲示板スキンのクラシックなテーブル形式に従います。一覧は上下の太い区切り線の間に置かれ、見出し行は明るい背景に二重線で仕上げられます。お知らせ行は薄いグレーの背景で区別されます。
| 項目 | 説明 |
|---|---|
| 掲示板タイトル · 説明 | スキン設定で入力すると、一覧の上に掲示板ヘッダー(タイトル + ポイントカラーの短い線 + 説明)が表示され、投稿ボタンがヘッダーの右側に移ります。空にするとヘッダーなしで、一覧下のボタン行に投稿ボタンが置かれます。閲覧画面ではヘッダーは表示されません |
| 一覧の形式 | リスト型 / カード型(サムネイル) / ウェブマガジン型(サムネイル + 要約) / FAQ 型(質問をクリックすると回答が展開) |
| 投稿者の配置 | 左 / 中央 |
| プロフィール写真 · 署名 · 添付ファイルの表示 | 閲覧画面での表示有無 |
| 推薦 · 非推薦ボタン | 使用有無(既定:推薦のみ使用) |
会員 · メッセージスキン
会員モジュール設定とメッセージ設定で、それぞれ heritage_xedition を選びます。
ウィジェットスキン
統合コンテンツウィジェットと統合コマースウィジェットに「heritage XEDITION」スキンが含まれています(コアウィジェットに含まれ、別途インストールは不要)。
ダークモード
ポイントカラーを変更する
標準のゴールド(#cda25a)の代わりに別の色を使うには、レイアウト設定のポイントカラーだけを変更すれば済みます。ボタン · リンク · アクティブ表示 · プロフィールボックス · ドロップダウン上端の線 · 掲示板とウィジェットの強調色、チェックボックス · ラジオボタンなどの入力要素の色まで一度に変わります。ダークモードでは、指定した色を基準に明るさが自動補正されます。
濃い紺や黒をポイントカラーにすると XEDITION オリジナルのモノトーンの雰囲気に近づき、ゴールドのままにするとクラシックな印象になります。
カスタマイズ(CSS 変数)
色は CSS 変数で管理されています。ほとんどはポイントカラー 1 つで対応できますが、より細かく修正したい場合は子 CSS で変数を再定義してください。レイアウトファイルを直接修正すると、テーマのアップデート時に上書きされることがあります。
| 変数 | 意味 |
|---|---|
--hr-brand | ポイントカラー(レイアウト設定の値が注入される) |
--hr-brand-dark / --hr-brand-light | ポイントカラーの暗い · 明るいバリエーション(ホバー、ダークモードのリンク) |
--hr-ink | 本文の文字色 |
--hr-muted | 補助の文字色 |
--hr-bg | ページ背景 |
--hr-surface | カード · パネルの背景 |
--hr-line | 区切り線 |
--hr-nav-bg | ドロップダウン · フッターバー · モバイルドロワーなどダーク要素の背景 |
--hr-w | 本文の最大幅(レイアウト設定の値) |
--hr-font-display | 見出し · ロゴ用の書体(既定 Raleway) |
--hr-radius | 角の半径(このテーマは 0) |