Bareungyeol テーマ（企業サイト）
Bareungyeol テーマ（企業サイト · 企業メディア）
企業 · 団体のホームページと企業メディア（ニュースルーム · 社内ストーリー）のための Zittme 有料テーマ Bareungyeol（bareungyeol） のマニュアルです。白地に黒い活字、写真が主役のカード構成です。トップでは掲示板の最新記事が写真スライドで切り替わり、その下におすすめ記事 · ストーリー · 最新ニュースのカードと、黒いお問い合わせ誘導エリアが続きます。サブページのタイトル帯 · バナー · 下位メニュータブ · 本文幅もレイアウト設定で決めます。
デモ：bareungyeol-demo.zitt.me · ストア：zitt.me/store/package/37507
構成
| 構成要素 | 場所 | 役割 |
|---|---|---|
| レイアウト | themes/bareungyeol/layouts/bareungyeol | サイトの骨格 + テーマ内蔵メインページ + サブページのヘッダー部 |
| 掲示板スキン | themes/bareungyeol/modules/board | リスト型 · カード型 · 大型ギャラリー型 · ウェブマガジン型 · FAQ 型 |
| 会員 · メッセージ · 通知センター · システムメッセージスキン | themes/bareungyeol/modules/{member, communication, ncenterlite, message} | ログイン · マイページ · メッセージ · 通知 · システム案内 |
| お問い合わせ · コマース · zittme Pay スキン | themes/bareungyeol/modules/{contact, commerce, zittme_pay} | 該当モジュールがインストールされたサイトでのみ適用。コマースはサービス · 製品の紹介と販売用 |
ポイントカラー（既定は緑 #00b04f）とカラーモード（明るく が既定 · 暗く · 端末設定）は、レイアウト設定 > 基本で変更します。
インストールと適用
- ストアで購入した後、使用するドメインを登録（ライセンス有効化）するとダウンロードできるようになります。エンジン（管理者 > 資料室）からインストールするか、
themes/bareungyeolに展開します。 - 管理者 > デザイン設定で Bareungyeol を選んで適用します。レイアウトとモジュールスキンが一度に切り替わります。
- トップに使う掲示板（例：
journal）を作り、記事に写真を入れます。レイアウト設定 > トップ画面の「表紙スライド掲示板（mid）」にその掲示板を入力すると表紙が完成します。 - メイン：サイトのトップ（サイト設定の既定モジュール）が自動的にメインになります。他のページをメイン形式で使うには、サイトマップでそのメニューのクラスに
mを入力します。 - サブ：それ以外のページ。タイトル帯 →（下位メニュータブ）→ 本文の順です。
- 全幅：メニュークラスに
wideを入力すると、本文幅の制限なしで画面いっぱいに使います（ウィジェットページなど）。 - トップではヘッダーが表紙写真の上に透明に重なり（白文字）、スクロールすると白い背景で固定されます。ロゴ画像を使う場合は、「白色ロゴ画像」欄に白いロゴも一緒に入れてください。
- ヘッダーボタンは、レイアウト設定 > 基本の「ヘッダーボタン名 · リンク」で作ります。空にすると表示しません。
- ログイン · アカウントのリンクをヘッダーから隠してモバイルのドロワーだけに置くには、「ヘッダーにログイン · アカウントを表示」を非表示に変更します。
- 写真スライド：「表紙スライド掲示板（mid）」に掲示板を入力すると、その掲示板の最新記事のうち代表画像がある記事がスライドになります。タイトルが写真の中央に大きく表示され、下に
1 / 4のカウンターと矢印が付きます。自動切り替え間隔（オフ · 4 · 5 · 8 秒）と枚数を設定でき、マウスを乗せると止まります。 - 固定表紙：掲示板を空にすると、背景画像 · 上の行 · タイトル · 説明 · ボタンを使う固定表紙になります。
- 動画表紙（1.2.0）：「固定表紙の背景動画」に mp4 · webm のアドレスを入力すると、固定表紙の背景で音のない動画がループ再生されます。背景画像は動画が表示される前の最初の画面として使われます。右下に停止ボタンが付き、端末で「視差効果を減らす（動作を減らす）」をオンにしている訪問者には自動再生しません。
- スライドの自動切り替えにも停止 · 再生ボタンが付きます。キーボードでスライド内に入ると自動切り替えが一時停止します。
- 高さ：画面全体 · 高め（80%、既定） · 標準（620px）。
- タイトル上の小さな文字：タイトルの上にポイントカラーで付く短い言葉（About、Since 2009 など）。
- 背景：なし · 薄いグレー · 暗く。グレー · 暗くは画面の端まで塗られ、前後のセクションと区別されます。写真帯 · お問い合わせ誘導 · 採用バナー · 動画は独自の背景を使います。
- 表示する場所：空にするとトップ。ページ mid を入力すると そのサブページ に表示されます。複数の場所はカンマ区切り（
about, ceo）、トップにも置くにはhomeを一緒に入力します。 - サブページでの位置：本文の下（既定） · 本文の上。
- カード右上の 表示チェック をオフにすると、削除せずに一時的に非表示にします。カードを ドラッグして順序 を変えます。
- ヘッダー形式：タイトル帯（写真背景、既定） · タイトルのみ（白地） · 表示しない。
- タイトル帯の既定背景画像 と 高さ（220 · 320 · 460px）。背景画像がなければ濃い単色の帯になります。
- タイトルの出典：第 1 階層メニュー名（既定）またはモジュール（掲示板 · ページ）名。
- パンくず表示：ホーム / 第 1 階層メニュー / 下位メニュー。
- 下位メニュータブ：現在の第 1 階層メニューに第 2 階層メニューがあると、タイトル帯の下に「すべて · 下位メニュー…」タブが付きます。
- サブ本文の幅：本文の最大幅と同じ、または読みやすい 960px。
- ページ別バナー：繰り返しフィールドにページ mid · 背景画像 · タイトル · サブタイトルを入力すると、そのページのタイトル帯が個別に装飾されます。第 1 階層メニューの mid を入力すると、その下のページにも適用されます。
- ウェブマガジン型 · 大型ギャラリー型の 本文要約 は、掲示板管理 > 一覧設定で「要約（summary）」項目をオンにすると表示されます。コアは一覧を取得する際、要約項目があるときだけ本文も一緒に読み込むためです。
- 投稿 · 編集 · 削除ボタンは権限のある会員にだけ表示されます。FAQ のように管理者だけが書く掲示板は、掲示板管理 > 権限で「投稿作成」を管理グループに制限してください。
- デモのメニュー構成：ストーリー → インサイド（大型ギャラリー）、ニュースルーム → プレスリリース（ウェブマガジン）、お問い合わせ → FAQ。第 2 階層メニューはヘッダーのドロップダウンとサブページのタブに自動で表示されます。
- ダークモード切り替えボタン：カラーモードを「訪問者の端末設定に合わせる」にすると、ヘッダーに太陽 / 月のボタンが表示されます。最初は端末設定に従い、訪問者が選んだモードは記憶されます。掲示板 · 会員 · お問い合わせ · コマーススキンも一緒に切り替わります。
- スクロール表示アニメーション：セクションが画面に入るとふわりと浮かび上がります。設定でオフにでき、端末で「視差効果を減らす（動作を減らす）」をオンにしている訪問者には自動的にオフになります。スクリプトの読み込みが遅れても、3 秒後にはすべてのセクションが表示されるようになっています。
- ボタンのコントラスト：ポイントカラーはそのまま使いつつ、白文字が乗るボタンの背景と、白地の上のポイントカラーの文字は自動的に少し濃く混ぜて、WCAG AA（4.5:1）のコントラストを満たします。ダークモードでは逆に明るく混ぜます。非常に明るいポイントカラー（黄色 · 黄緑）はボタンの文字が弱くなることがあるため、中程度以上の濃い色をおすすめします。
- キーボード：先頭に「本文へスキップ」リンク、すべてのボタン · リンクにフォーカス枠。
- 印刷：ヘッダー · メニュー · 地図 · 動画を除いて白黒で、FAQ は展開した状態で印刷します。
推奨環境：Zittme 1.0.1 以上。レスポンシブテーマなので、モバイル専用ビューはオフにすることを推奨します。
ページタイプ
ヘッダー
ロゴ（画像またはテキスト） · 上部メニュー（第 2 階層はドロップダウン） · 右側の文言（スローガン） · 検索 · カート（コマースのインストール時） · ログイン · ポイントカラーのボタン（例：お問い合わせ） · モバイルのドロワーメニューで構成されます。
表紙（トップ画面）
代表画像のルール
カードと表紙の写真には、記事の代表画像（サムネイル）を使います。サムネイルが取得できない場合は、本文の最初の画像を代わりに使います。記事ごとに写真を必ず 1 枚入れておいてください。写真のない記事は表紙スライドから除外されます。
テーマ内蔵メインページ（メイン構成）
レイアウト設定 > メイン構成 タブの「メインページセクション」繰り返しフィールドで、順番に組み立てます。1 つもない場合は既定の構成（おすすめ記事 → ストーリー → 最新ニュース → お問い合わせ誘導）を使います。
| セクションの種類 | 内容 | 掲示板 mid | 件数 |
|---|---|---|---|
| おすすめ記事 | 大きなカード 1 つ + 小さなカード。分類名が写真上のチップとして、掲示板名が出典行として表示 | 例：journal | 5 推奨 |
| ストーリー | 横長カード 2 つ + 本文の要約 | 掲示板 mid | 2 推奨 |
| 最新ニュース | 左にタイトル、右に横並びのカード列、日付 | 例：notice | 4 推奨 |
| お知らせ | 3 列カード | 掲示板 mid | 3 または 6 |
| 会社紹介文 | 小さなラベル + 大きな文字のひとまとまり（本文を使用） | - | - |
| 事業領域 | 「事業領域」繰り返しフィールドのアイコンカード 4 列 | - | - |
| 経営陣 · メンバー | 「経営陣 · メンバー」繰り返しフィールド。写真がなければ名前の最初の文字 | - | - |
| 数値指標 | 「数値指標」繰り返しフィールド。画面に入ると数字がカウントアップします | - | - |
| 顧客 · パートナーのロゴ | 「顧客 · パートナー」繰り返しフィールド。ロゴがなければ名前を文字で表示 | - | - |
| 写真帯 | 画面いっぱいの写真 + タイトル · 文章 · ボタン（画像 · 本文を使用） | - | - |
| お問い合わせ誘導 | 黒い帯にタイトル · 文章 · 枠線ボタン（本文 · ボタン名 · リンクを使用、画像を入れると写真背景） | - | - |
| 製品 · 新製品 | コマース商品カード 4 列（コマースのインストール時）。価格が 0 なら「お問い合わせ」と表示 | - | 4 推奨 |
| 写真 + テキスト（左 · 右） | 写真 1 枚とタイトル · 本文 · リンクを横に並べる。2 種類を交互に使うとジグザグ構成 | - | - |
| CEO あいさつ | 縦長の写真 + タイトル + 長い本文 + 署名。署名は「ボタン名」欄に入力します（例：代表取締役 キム・バルン） | - | - |
| 沿革タイムライン | 「沿革」繰り返しフィールド（年 · タイトル · 内容 · 写真）。縦線と点でつながったタイムライン | - | - |
| 組織図 | 「組織図」繰り返しフィールド。段階 1（最上位） · 2（本部） · 3（直前の本部の下のチーム） | - | - |
| 受賞 · 認証 | 「受賞 · 認証」繰り返しフィールド（マーク画像 · 名称 · 機関 · 年）。マークがなければ星アイコン | - | - |
| よくある質問 | 「よくある質問」繰り返しフィールド。左にタイトル、右に展開式リスト | - | 表示件数 |
| アクセス | Google マップ + 住所 · 交通案内（本文） · 電話 · 営業時間 · 地図アプリのボタン。住所は「掲示板アドレス（mid） · 住所」欄に入力し、空にするとフッターの会社紹介の最終行 | - | - |
| お問い合わせ案内 | タイトル · 文章 · お問い合わせボタン + フッターの電話 · メール · 営業時間の一覧 | - | - |
| 採用バナー | ポイントカラーの帯（画像を入れると写真の上にポイントカラーを重ねる） + 白いボタン | - | - |
| 動画 | YouTube · Vimeo のアドレスまたは mp4 を「ボタンリンク」に入力。押すまで外部プレーヤーを読み込まないので高速です（YouTube は Cookie なしのアドレスを使用）。画像は最初の画面 | - | - |
| 資料室 · IR | 掲示板の記事を表で表示。分類 · タイトル · 日付 · 「添付 N」を表示 | 例：ir | 4〜6 |
セクション共通の欄（1.2.0）
サブページの組み立て例（デモと同じ構成）
本文が短いページ（タイトル 1 行 + 紹介文）を作り、セクションの「表示する場所」にそのページの mid を入力すると、レイアウトでサブページを組み立てられます。
| ページ（mid） | セクション |
|---|---|
CEO あいさつ（ceo） | CEO あいさつ → 写真 + テキスト（右） |
沿革 · 組織（history） | 沿革タイムライン → 組織図（背景グレー） |
アクセス（location） | アクセス → お問い合わせ案内（背景グレー） |
会社紹介（about） | 数値指標（暗く） → 資料室 · IR → 受賞 · 認証 |
お問い合わせ（contact） | よくある質問（home, contact でトップと一緒に） |
間隔 · 文字の体系
セクション間の間隔、タイトルと内容の間隔、カード間の間隔、帯セクションの内側余白、タイトル · 本文の文字サイズを 1 セットの値でそろえています。画面幅に応じて滑らかに縮みます（セクション間 72〜120px、タイトル下 24〜36px、カード間 16〜28px、帯の内側 64〜112px）。セクションをどの順番で置いても間隔は同じで、帯セクション同士が隣接すると間に白い隙間なくつながります。
分類チップ
おすすめ記事 · 最新ニュース · お知らせカードの写真の上に付く黒いチップは、記事の 分類（カテゴリー） 名です。掲示板管理 > 分類で「人&文化 · 技術 · サービス · 企業」のように作っておき、記事ごとに分類を選ぶと企業メディアのトップになります。
サブページ（設定タブ「サブページ」）
掲示板の種類（掲示板スキン設定「一覧スタイル」）
| スタイル | 見た目 | デモ |
|---|---|---|
| リスト型 | 番号 · タイトル · 投稿者 · 日付の表 | ニュースルーム |
| 大型ギャラリー型 | 最初の記事は写真を大きく + タイトル、続いて 3 列の写真カード。写真の上に分類チップ | インサイド |
| ウェブマガジン型 | 左にサムネイル + タイトル · 要約 | プレスリリース |
| カード型 | 枠線付きカードのグリッド | - |
| FAQ 型 | 質問を押すと回答が展開するアコーディオン。分類タブでまとめる | FAQ |
本文組み立てブロック（会社紹介 · 組織ページ）
ページモジュール（ウィジェットページではない通常のページ）の本文で以下のクラスを使うと、トップと同じ雰囲気の紹介ページになります。エディターの HTML モードに貼り付ければ使えます。全体を <div class="bg-page"> で囲むと、ブロック間の間隔が自動で空きます。
| ブロック | マークアップ | 用途 |
|---|---|---|
| リード | <section class="bg-page-lead"><span class="bg-eyebrow">About</span><h2>Title</h2><p>Text</p></section> | ページの最初の段落 |
| 写真 + テキスト | <section class="bg-split"><img src="..." /><div class="bg-split-copy"><span class="bg-eyebrow">Label</span><h3>Title</h3><p>Text</p></div></section> | is-flip を付けると写真が右側 |
| カード 3 列 | <section class="bg-cols"><div class="bg-col"><em>01</em><strong>Title</strong><p>Text</p></div>…</section> | 原則 · 特典 · 特徴 |
| 沿革 | <section class="bg-timeline"><div class="bg-tl"><em>2009</em><strong>Title</strong><p>Text</p></div>…</section> | 4 列、モバイルは 2 列 |
| 引用 | <section class="bg-quote"><blockquote>Text</blockquote><cite>Source</cite></section> | 大きな文字の 1 行 |
| 写真帯 | <section class="bg-band" style="background-image:url('...')"><div class="bg-band-copy"><h3>Title</h3><p>Text</p></div></section> | 画面幅いっぱいに表示 |
| 人物リスト | <section class="bg-roster"><div class="bg-roster-item"><img src="..." /><strong>Name</strong><span>Position</span><em>Department</em></div>…</section> | 写真の代わりに <span class="bg-roster-photo">N</span> も可 |
| ボタン行 | <div class="bg-page-links"><a class="is-primary" href="/contact">Contact</a><a href="/shop">Services</a></div> | ページの最後 |
デモの会社紹介（/about） · メンバー（/riders）ページはこのブロックだけで作られているので、本文をコピーして修正すると早く作れます。
サービス · 製品（コマース）
コマースモジュールをサービス商品の紹介と販売に使います。商品の 要約 項目がカードの上の行（ポイントカラー）に表示され、トップの製品セクションは正方形のサムネイルを使います。見積もり商品は価格を 0 にするとトップで「お問い合わせ」と表示されます（ショップ一覧では 0 ウォンと表示されるので、価格を入力しておくほうがよいでしょう）。
フッター
明るい · 暗いの 2 色。会社紹介文（住所）、代表電話 · メール · 営業時間、SNS（Instagram · YouTube · Facebook · LinkedIn · ブログ）、下部の案内文、事業者 · 連絡先情報（1 行ごとに 1 項目）、著作権、トップへ戻るボタン。
ダークモード · アニメーション · アクセシビリティ（1.2.0）
検索エンジン向け構造化データ（1.2.0）
トップに schema.org の Organization 情報を入れます。会社名（正式な会社名 → ロゴテキスト → サイトタイトルの順）、ロゴ、代表電話 · メール、住所（フッターの会社紹介の最終行）、SNS のアドレスをフッター設定から取得します。設定 > 基本 > 「検索エンジン向け会社情報」でオフにできます。
統合検索
ヘッダーの検索はサイトの統合検索に移動します。結果画面もテーマのデザイン（タブ · 結果一覧 · ボタン）で描画します。管理者 > 統合検索で検索対象のモジュールを指定しないと結果が表示されません（対象を空にして「含める」にすると「検索を使用できません」と表示されます）。
レイアウト設定の全項目
基本
ロゴ画像 · 白色ロゴ画像 · ロゴテキスト · ヘッダー右側の文言 · ヘッダーボタン名 · リンク · ポイントカラー · 本文の最大幅 · カラーモード · 検索の使用 · ヘッダーにログイン · アカウントを表示 · 製品ショップのアドレス（mid） · ダークモード切り替えボタン · スクロール表示アニメーション · 検索エンジン向け会社情報 · 正式な会社名 · 上部メニュー · フッターメニュー
トップ画面
表紙の表示 · 表紙の高さ · 表紙スライド掲示板（mid） · スライド枚数 · 自動切り替え間隔 · 固定表紙の背景画像 · 固定表紙の背景動画 · 上の行 · タイトル · 説明 · ボタン名 · ボタンリンク
メイン構成
メインページセクション（種類 · タイトル · タイトル上の小さな文字 · 本文 · 画像 · 掲示板 mid · 住所 · ボタン名 · ボタンリンク · 件数 · 背景 · 表示する場所 · サブページでの位置） · 沿革 · 組織図 · 受賞 · 認証 · よくある質問 · 経営陣 · メンバー · 事業領域 · 顧客 · パートナー · 数値指標
サブページ
サブページのヘッダー部 · タイトル帯の既定背景画像 · タイトル帯の高さ · タイトルの出典 · パンくず表示 · 下位メニュータブ · サブ本文の幅 · ページ別バナー
フッター
フッターの色 · 会社紹介文 · 住所 · 代表電話 · 代表メール · 営業時間 · SNS アドレス 5 種 · 下部の案内文 · 事業者 · 連絡先情報 · 著作権表記