本文へスキップ
ドキュメント

公式資料

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 テーマとの違い

項目heritageheritage XEDITION
ポイントカラーの既定値#6c5ce0(紫)#cda25a(ゴールド)
角角丸直角(すべてのカード · ボタン · 入力欄)
本文の最大幅1060 / 1180 / 13201320 / 1440 / 1600(ワイド)
ヘッダー上部ユーティリティ行 + メニューバーの 2 段ロゴ · メニュー · ユーティリティが 1 行に並ぶ全幅ヘッダー。スクロールすると高さが縮み、半透明ブラーで固定
メニューのドロップダウンメニューバー下の明るいパネル各第 1 階層メニューの下にダークなドロップダウン、上端に 3px のポイントカラーライン
検索ヘッダーの検索欄検索アイコンを押すとヘッダーを覆う大型検索オーバーレイ
ログイン領域テキストリンクポイントカラーのプロフィールボックス(写真 + ニックネーム + 通知ベル)、ホバーでマイ情報 · 管理者 · ログアウトメニュー
ビジュアルスライダー本文幅常に画面全幅
サブページタイトルなしグレーのサブタイトルバンド(slx / sfx で非表示にできる)
フッター中央揃え本文幅の左揃えカラム + 全幅のダークなコピーライトバー
ダークモードのパレット紺系ゴールドに合わせたウォームチャコール

適用する

  1. 管理者 > デザイン設定に移動します。
  2. テーマ一覧から heritage XEDITION を選び、適用を押します。
  3. レイアウトと各モジュールスキンが一度に適用されます。特定の構成要素だけを除外するには、適用画面でチェックを外します。
  4. Zittme 1.0.0 を新規インストールしたサイトには、このテーマが最初から適用されています(レイアウト + 掲示板 · 会員 · メッセージスキン)。Rhymix や 0.0.x からアップデートしたサイトは既存の設定が維持されるため、上記の手順で手動で適用する必要があります。

    テーマの適用は以前の状態を記憶するので、いつでも適用前の状態に戻せます。使用中のテーマは、インストール済みテーマ一覧で削除ボタンが無効になります。

    レイアウト設定の全項目

    管理者 > レイアウト設定、またはサイトを見ながら左下のフロント管理バーの「レイアウト設定」で変更します。設定は 4 つのグループ(タブ)に分かれています。

    基本

    項目既定値説明
    ロゴ画像なし高さ 40px 基準で表示。空にするとロゴテキストを使用
    ダークモード用ロゴ画像なしダークモードで代わりに表示するロゴ。空にすると標準ロゴをそのまま使用
    ロゴテキストなし空にするとサイトタイトルが表示されます。Raleway 書体で表示
    ポイントカラー#cda25aボタン · リンク · アクティブ表示 · プロフィールボックス · ドロップダウン上端の線、さらに掲示板 · ウィジェットスキンの強調色まで一括で決まります
    本文の最大幅1440px狭い 1320 / 標準 1440 / 広い 1600。ワイドテーマなので既定値が heritage より広くなっています
    メニューの配置ロゴの横に並べるロゴの横 / 中央。ヘッダーは常に画面全幅を使い、このオプションはメニューの位置だけを変えます
    メニューバーの色暗く暗く / ポイントカラー / 明るく。モバイルのドロワーはこの値に関係なく常にダークトーンです
    モバイルのダークモードボタンの位置メニュードロワー内メニュードロワー内 / ヘッダー / フッター。PC では常にヘッダーに表示
    モバイルの言語選択の位置メニュードロワー内メニュードロワー内 / ヘッダー / フッター。PC では常にヘッダーに表示。コアで使用言語が 2 つ以上のときだけ表示されます
    カラーモード訪問者の端末設定に合わせる自動 / 常に明るく / 常に暗く

    トップ画面(ビジュアルスライダー)

    項目既定値説明
    ビジュアルスライダーの表示メイン形式のときのみメイン形式のときのみ / サブページにも表示 / 使用しない。スライドを 1 枚も登録しないと表示されません
    自動切り替え間隔(秒)60 にすると自動で切り替わりません
    ビジュアルスライドなし繰り返しフィールド。追加ボタンでスライドを複数登録し、ドラッグで順序を変えます

    スライド 1 枚の項目:背景画像、タイトル、説明、ボタン名、ボタンリンク、テキストの配置(左 / 中央)。

    スライダーは本文幅に関係なく常に画面全幅で表示され、高さは画面幅に応じて 320px から 600px の間で調整されます。横 1920px 以上の背景画像を推奨します。左右の矢印は半透明の四角いボタン、ページ表示は四角いドットで、現在のスライドは縦長のポイントカラーのバーで表示されます。

    本文・サイド

    項目既定値説明
    統合検索を使用オンヘッダーの検索アイコンと検索オーバーレイの表示有無
    サイドにログインボックスを表示オフサブ(LNB)ページのサイドにログインウィジェットを表示します

    フッター

    項目説明
    サイト紹介文フッター左側の紹介テキスト
    事業者・連絡先情報改行した各行が 1 項目として表示されます(商号 · 代表者 · 事業者番号 · 住所など)
    著作権表記下部のダークなコピーライトバーに表示

    フッターメニューは、サイトメニュー編集で「フッターメニュー」(footer_menu)に項目を接続すると表示されます(1 階層)。コピーライトバーの右側にはトップへ戻るボタンがあり、モバイルの位置オプションを「フッター」にした場合は、ダークモードボタンと言語選択がここに表示されます。

    ページタイプ(メニュークラス m / sl / sf / slx / sfx)

    ページごとに 5 種類の表記のうち 1 つをメニュークラスとして指定します。

    タイプメニュークラス見た目
    メイン型mビジュアルスライダーが表示されるホーム画面用。サブタイトルバンドなし
    サブ型slサブタイトルバンド + 左側 LNB(現在のメニューに下位メニューがある場合) + 本文
    全幅サブ型sfサブタイトルバンド + LNB なしで本文が全幅
    サブ型(バンドなし)slxsl と同じだがサブタイトルバンドを表示しない
    全幅サブ型(バンドなし)sfxsf と同じだがサブタイトルバンドを表示しない

    サブタイトルバンドは本文の上に敷かれるグレーの帯で、現在のメニュー名をタイトルとして表示します。掲示板スキンの掲示板タイトル機能と重なる場合は、slx / sfx でバンドをオフにして掲示板タイトルだけを使うか、逆にバンドを残して掲示板タイトルを空にしてください。

    指定方法

    1. 管理者 > サイトメニュー編集でメニュー項目を開きます。
    2. クラス 入力欄に m、sl、sf、slx、sfx のいずれかを入力します。
    3. 保存すると、そのメニューから入ったページが該当のタイプで表示されます。
    4. 動作ルール:

      • クラスを指定していないメニューは、レイアウト設定の レイアウト形式(既定値:サブ)に従います。サイトのトップページ(最初のページ)は、指定がなければメイン型で表示されます。
      • 下位メニューにクラスを入れると、そのページでは下位の値が上位より優先され、下位に指定がなければ上位メニューのクラスを引き継ぎます(3 階層まで)。
      • クラス欄に他のクラスと空白区切りで一緒に書いてもかまいません。例:sfx highlight
      • 会員 · メッセージ · zittme Pay · 統合検索の画面は、クラス指定がなければ自動的に全幅になります。

      メインビジュアルとの組み合わせ

      • ビジュアル表示「メイン形式のときのみ」(既定) + ホームメニューに m:ホームでだけスライダーが表示される一般的な構成
      • ビジュアル表示「サブページにも表示」:タイプに関係なくすべてのページ上部にスライダー
      • ビジュアル表示「使用しない」:どこにも表示しない

      LNB(左側の下位メニュー)

      サブ型(sl / slx)ページで、現在の第 1 階層メニューに下位メニューがあると、左側 260px の領域に下位メニューの一覧が表示されます。ボックスのないリスト形式で、タイトルの下に区切り線とポイントカラーの短い線が付き、現在の項目は左側の 3px のポイントカラーのバーで表示されます。第 3 階層メニューがある項目には右矢印が付き、展開された下位項目は折れ矢印アイコンでインデントされます。下位メニューがないメニューは LNB なしで本文だけが表示されます。

      ヘッダーと上部メニュー(GNB)

      ヘッダーは常に画面全幅を使います。左からロゴ、メニュー、右側のユーティリティの順で、ページを下にスクロールすると高さが縮んだ状態で上部に固定され、背景が半透明ブラーに変わります。

      • サイトメニュー編集の「上部メニュー」(gnb)に接続した項目が表示され、3 階層まで対応します。第 1 階層メニューにマウスを乗せると、その項目の下にダークなドロップダウンが開き、上端に 3px のポイントカラーラインが付きます。第 3 階層メニューはドロップダウン内でインデントして表示されます。
      • 現在のページの第 1 階層メニューには、下側に 3px のポイントカラーの下線が表示されます。
      • メニュー配置オプションで、メニューをロゴの横に並べるか、ヘッダーの中央に置くかを選べます。

      右側のユーティリティは左から次の順です。

      要素説明
      ダークモードボタン訪問者が明るく / 暗くを自分で切り替えます(端末ごとに保存)
      検索アイコン押すとヘッダーを覆う大型の検索入力欄が開きます。X、Esc、外側のクリックで閉じます。統合検索の使用をオフにすると非表示になります
      言語ボタンKR / EN のような略称コードで表示。押すと使用言語の一覧が開き、見ていたページを保ったまま言語だけが切り替わります。コアで使用言語が 2 つ以上のときだけ表示されます
      プロフィール領域未ログイン:ポイントカラーのログインボタン。ログイン時:プロフィール写真 + ニックネーム + 通知ベルが入ったポイントカラーのボックス。ホバーするとマイ情報 · 管理者(管理権限がある場合) · ログアウトのメニューが開きます

      通知ベルは通知センター(ncenterlite)モジュールがインストールされたサイトで表示され、未読通知の数と最近の通知一覧を表示します。この場合、通知センターの標準フローティングウィジェットは自動的にオフになります。

      モバイル

      1024px 以下ではメニューが非表示になり、右端のハンバーガーボタンでドロワーメニューを開きます。ドロワーはポイントカラーをベースにしたダークトーンで、メニュー全体(3 階層)とログイン · マイ情報 · 管理者のリンクが入ります。ダークモードボタンと言語選択は、レイアウト設定の「モバイルの ... の位置」オプションに応じて、ドロワー下部のツール行、ヘッダー、フッターのいずれかに表示されます。

      掲示板スキン

      掲示板設定 > スキン設定で heritage_xedition を選びます。レスポンシブなので、モバイルスキンを別に用意する必要はありません。

      XEDITION 掲示板スキンのクラシックなテーブル形式に従います。一覧は上下の太い区切り線の間に置かれ、見出し行は明るい背景に二重線で仕上げられます。お知らせ行は薄いグレーの背景で区別されます。

      項目説明
      掲示板タイトル · 説明スキン設定で入力すると、一覧の上に掲示板ヘッダー(タイトル + ポイントカラーの短い線 + 説明)が表示され、投稿ボタンがヘッダーの右側に移ります。空にするとヘッダーなしで、一覧下のボタン行に投稿ボタンが置かれます。閲覧画面ではヘッダーは表示されません
      一覧の形式リスト型 / カード型(サムネイル) / ウェブマガジン型(サムネイル + 要約) / FAQ 型(質問をクリックすると回答が展開)
      投稿者の配置左 / 中央
      プロフィール写真 · 署名 · 添付ファイルの表示閲覧画面での表示有無
      推薦 · 非推薦ボタン使用有無(既定:推薦のみ使用)
      • コメント数はタイトルの横に +N で表示されます。
      • 新着表示はタイトルの前の 7px のポイントカラーの四角い点で、掲示板設定の「新着表示時間」に従います(既定 24 時間)。
      • 閲覧画面は、暗いタイトルバーの代わりに大きなタイトルと下線付きのメタ行(投稿者 · 日付 · 閲覧数 · 推薦数)で構成されます。
      • ボタンはフラットな薄いグレーの四角いボタンで、ホバーするとポイントカラーで塗られます。主要な操作ボタン(登録 · 投稿)は最初からポイントカラーです。
      • ページネーションは枠のない数字の並びで、現在のページだけがポイントカラーの数字と下線で表示され、最初 / 最後は二重矢印アイコンです。
      • サムネイルは直角に切り取られます。
      • 強調色はレイアウトのポイントカラーと連動します。

      会員 · メッセージスキン

      会員モジュール設定とメッセージ設定で、それぞれ heritage_xedition を選びます。

      • 画面上部にはタイトルとその下にポイントカラーの短い線が付き、タイトルと本文の間に十分な余白を取ります。
      • マイページ · メッセージボックスのプロフィール領域は、52px のプロフィール写真 + ニックネーム + ランク · 登録日が入ったカードで表示され、カード上端に 3px のポイントカラーの線が付きます。
      • 左側のナビゲーションメニューは、レイアウトの LNB と同じ表現(区切り線付きのタイトル + 左側 3px のアクティブバー)です。
      • 入力欄 · セレクトボックス · ボタンの高さはすべて 46px に統一されており、1 行に並べてもずれません。ボタンは掲示板と同じフラットな四角いボタンです。
      • モバイルではプロフィールカードと検索フォームが縦に積み重なります。

      ウィジェットスキン

      統合コンテンツウィジェットと統合コマースウィジェットに「heritage XEDITION」スキンが含まれています(コアウィジェットに含まれ、別途インストールは不要)。

      • ボックスなしで、タイトル行の下の区切り線とポイントカラーの短い線で領域を分けます(掲示板ヘッダーと同じ表現)。
      • タブ型はタブ行 1 本だけを端まで引き、「もっと見る」リンクがタブ行の右側に置かれます。
      • コメント数 +N、新着の四角い点、直角のサムネイルなどの表記は掲示板スキンと同じです。

      ダークモード

      • カラーモードが「自動」なら訪問者の端末のライト / ダーク設定に従い、ヘッダーの切り替えボタンで訪問者が自分で変更することもできます(端末ごとに保存)。
      • ダークパレットは、ゴールドのアクセントに合わせたウォームチャコール(茶色がかった濃いグレー)です。掲示板 · 会員 · メッセージ · コマース · ウィジェットスキンまで一緒に切り替わります。
      • ダークモード用ロゴ画像を別に登録すると、ダークモードではそのロゴが代わりに表示されます。登録しない場合は標準ロゴをそのまま使うため、背景が透明なロゴを推奨します。

      ポイントカラーを変更する

      標準のゴールド(#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)

      メインページの構成例

      1. ホームメニューのクラスを m に指定し、ビジュアルスライドを 2 枚以上登録します。
      2. ページモジュールでホームの本文を作り、統合コンテンツウィジェットを行単位で積み重ねます。ウィジェットスキンは「heritage XEDITION」を選びます。
      3. 掲示板が複数ある場合は、タブ型ウィジェットでまとめて 1 つの領域に表示します。
      4. ショッピングモールも運営する場合は、統合コマースウィジェットで商品の行を追加します。
      5. よくある質問

        • ビジュアルスライダーが表示されません:① スライドが 1 枚以上登録されているか ② ビジュアル表示が「使用しない」になっていないか ③ 現在のページがメイン型(m)か(表示設定が「メイン形式のときのみ」の場合)の順に確認してください。
        • サブページ上部のグレーの帯(タイトル)を消したいです:メニュークラスを slx または sfx に変更してください。
        • 左側メニュー(LNB)が表示されません:サブ型(sl / slx)である必要があり、現在の第 1 階層メニューに下位メニューがある必要があります。
        • メニューを中央に移したら、アクティブメニューの横に細い縦線が見えます:1.0.0 の不具合です。テーマを 1.0.1 以上にアップデートしてください。
        • ダークモードが適用されません:カラーモードが「常に明るく」に固定されていないか確認してください。
        • 一部のモジュール画面が標準デザインのままです:該当モジュールの設定でスキンが heritage_xedition に選択されているか確認してください。テーマの一括適用はサイトメニューに接続されたモジュールにのみ適用されるため、コンタクトのようにメニューに接続されていないモジュールは、モジュール設定で個別に選びます。
        • ポイントカラーを変えたのに一部しか変わりません:キャッシュが原因の可能性があります。管理者 > キャッシュ再生成の後、再読み込みしてください。
        • 英字の見出し書体が違って見えます:見出しとロゴテキストの英字は Raleway(Google Fonts)で表示されます。外部フォントの読み込みがブロックされた環境では Pretendard で代替されます。
        • Rhymix からアップデートしたのにテーマが適用されていません:アップデートでは既存のデザイン設定が維持されます。管理者 > デザイン設定で heritage XEDITION を手動で適用してください。