Themes

テーマ

機能はプラグイン、見た目はテーマ。色や書体、ヘッダーや記事カードの形まで、サイトの見た目を 1 つのディレクトリにまとめて持ち、管理画面から切り替えます。記事や設定はそのままに、見た目だけを入れ替えられます。

テーマの例

同じサンプル記事を、テーマだけ変えてビルドしたデモを公開しています。画像をクリックするとデモが開きます。

紙と木目
生成りの紙色の地に墨色の文字、木目のアクセント。落ち着いた読みものに合うテーマです。
デモを開く
シンプル
白い地・グレーの罫・ゴシック体だけの、業種を選ばない汎用テーマ。装飾は最小限で、ブランドカラー 1 色が主役です。
デモを開く
HOKUSAI（藍と和紙）
葛飾北斎の浮世絵に着想を得たテーマ。和紙色の地に墨の文字、ベロ藍の差し色と朱の落款、青海波の文様。見出しは明朝体で、トップには「神奈川沖浪裏」を大きく敷きます。
デモを開く

テーマの中身

テーマの構成

frontend/themes/my-theme/
├── theme.json      # id・名前・バージョン・差し替える部品
├── tokens.css      # 色・余白・書体などのデザイントークン
├── overrides.css   # 任意: コンポーネントの CSS 上書き
├── components/     # 任意: 部品の差し替え
└── public/         # 任意: ロゴ・OG 画像・favicon など

差し替えられる部品

theme.json に書いた部品だけがテーマ側に置き換わり、それ以外は標準の部品が使われます。

Headerヘッダー
Footerフッター
HomeHeroトップページのヒーロー
PostCard記事カード
ArticleSidebar / Sidebar記事・一覧ページのサイドバー
PrDisclosurePR 表記の見た目（表示するかどうかはサイト設定）

サイトの設定と組み合わせる

ブランドカラー
テーマの tokens.css が既定の色を決め、管理画面のサイト設定でブランドカラーを指定すると、ボタンや差し色がその色に変わります。同じテーマでも、サイトごとに色を変えられます。
アイキャッチの代わりの画像
テーマに画像を同梱しておくと、アイキャッチを設定していない記事に記事ごとに固定の 1 枚を割り当てられます。一覧ページが歯抜けになりません。
切り替えと反映
有効なテーマは管理画面の「システム > テーマ」で切り替えます。公開サイトには次のビルドから反映されます。

作る・配る

既存テーマの tokens.css をコピーして値を変えるのが近道です。コードを書かずに、デザインツールで CSS だけを書き換えてテーマを作ることもできます。

npm run theme:kit
実ページを書き出して、デザインツールに渡す
npm run theme:import
書き換えた CSS からテーマを作る
./scripts/package.sh --theme my-theme
配布用 zip を作る

デモを見るはじめ方（テーマ）