shitateの仕様について

1. 位置づけ

WordPress ブロックテーマ（フルサイト編集専用）。無料配布・WordPress.org 公式ディレクトリに掲載中の 100% GPL。

商用フリーミアムの無料側。有料プラグイン shitate pro blocks とセットで、テーマは設計（デザインシステム＋テンプレート）専用。ブロックは一切同梱しない（ブロックはプラグインの責務）。

制作: weblley inc / Theme URI: https://shitate.weblley.co.jp/

2. 基本情報

項目	値
スラッグ / テキストドメイン	shitate
バージョン	1.0.3（公式ディレクトリ公開版。style.css / readme.txt / SHITATE_VERSION を release.sh で同時更新）
Requires at least	7.0
Tested up to	7.1
Requires PHP	7.4
ライセンス	GPL v2 or later
theme.json	version 3
リポジトリ	weblley/shitate（GitHub・公開）
公式ディレクトリ	https://ja.wordpress.org/themes/shitate/
タグ	blog, portfolio, block-patterns, full-site-editing, block-styles, style-variations, wide-blocks, editor-style, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

3. ファイル構成

shitate/
├ style.css              テーマヘッダー＋モバイルメニューの閉じるボタン配置（実スタイルは theme.json / tokens.css）
├ theme.json             v3。パレット・タイポ・余白・影・レイアウトの正本
├ functions.php          363行。セットアップ、余白フィルタ、カスタマイザー、enqueue、旧 st_ 設定の自動移行
├ readme.txt             .org 用（Resources 節あり）
├ screenshot.png         1200×900
├ inc/
│  └ colors.php          派生色の自動追従（base-2 / line / contrast-2 / neutral / primary-hover）
├ assets/
│  ├ css/tokens.css      --st-* トークン定義＋縦リズム規則（115行）
│  ├ css/utilities.css   余白ユーティリティ（169行、!important 層）
│  ├ css/editor.css      ほぼ空（意図的にミニマル）
│  ├ js/customize-preview.js    カスタマイザーのライブプレビュー
│  ├ js/utilities-toolbar.js    エディタツールバー「余白」ドロップダウン
│  └ js/navigation-toggle.js    モバイルメニューの閉じるボタンをハンバーガー位置に追従
├ templates/  404 / archive / index / page / page-full-width / search / single
├ parts/      header.html / footer.html
├ patterns/   hero / columns-3 / columns-4 / cta-two-buttons（＋非表示の 404-content / footer-credit）
├ styles/     cream.json / dark.json / mist.json / mono.json（スタイルバリエーション）
└ languages/  shitate.pot / shitate-ja.po / ja.mo / shitate-ja-shitate-utilities-toolbar.json

4. 命名規則

• 公開識別子の接頭辞は shitate（WordPress.org の規定で 4 文字以上）: PHP 関数 shitate_、定数 SHITATE_、スクリプト/スタイルハンドル shitate-、カスタマイザー設定 shitate_、パターン shitate/*（カテゴリ shitate）。
• CSS 変数だけは --st-* を維持。カスタムプロパティは接頭辞規則の対象外で、プラグインの var(--st-*, …) フォールバックや保存済みコンテンツとの互換を優先している。
• sb = shitate block（プラグイン側）。テーマは --sb-* を定義しない。
• 変数の見分け: --st-* = テーマ定義（カスタム CSS ではこちらを使う） / --wp--* = WordPress 生成。
• 旧 st_* のカスタマイザー設定は、テーマ更新後の初回読み込みで shitate_* に自動移行される。

5. デザインシステム（設計の中核）

5.1 トークンの置き場所

すべて assets/css/tokens.css の --st-* に集約。theme.json の custom は使わない。tokens.css はフロント（ハンドル shitate-tokens）とエディタ（add_editor_style）の両方に読み込む。

5.2 色

theme.json のパレット（実値）が唯一の情報源。サイトエディター → スタイル → 色でそのまま編集でき、スタイルバリエーションもネイティブに差し替わる。--st-color-* はプリセットへのエイリアス（var(--wp--preset--color--primary, #2952cc) 形式）で、パレットを変えれば自動追従する。

既定パレット（9 色）。源 4 色（base / contrast / primary / accent）と派生 5 色（base-2 / line / contrast-2 / neutral / primary-hover）に分かれる:

slug	色	名前	種別
base	#ffffff	Base	源
base-2	#f4f6fc	Base / Two	派生
contrast	#171f33	Contrast	源
contrast-2	#515766	Contrast / Two	派生
neutral	#5c6b90	Neutral	派生
line	#e4e9f7	Border（表示名）	派生
primary	#2952cc	Primary（ブランド色）	源
primary-hover	#20409f	Primary / Hover	派生
accent	#0fae8e	Accent	源

• 派生色は自動追従（inc/colors.php）: サイトエディターで源の色を変更すると、派生色が既定値のままである限り読み取り時に再計算される（base-2 = base に primary を 5% 混色、line = 13% 混色、contrast-2 = contrast と base の混色、neutral = contrast・primary・base の混色、primary-hover = primary を 22% 暗く／暗い背景では 25% 明るく）。派生色を手動で設定した場合はそちらが常に優先。保存データは書き換えないので可逆。
• コア既定のパレット・グラデーション・デュオトーンは全て false。
• 重要な禁止事項: パレットのスラッグに border / background など構造クラスと衝突する名前を使わない。過去に border スラッグがコア生成の .has-border-color{color:…!important} を生み、枠線ブロックの文字色を乗っ取る実害があり line へ改名した（表示名は「Border」のまま）。

5.3 文字（モジュラースケール）

• typescale.com 方式。基準 --st-text-m（既定 16px = 1rem）と比率 --st-ratio（既定 1.25）から calc(prev × ratio) の連鎖で上位段を生成。
• 段: --st-text-xxs / xs / s / m / l / xl / xxl / xxxl。
• m 未満の 3 段は固定値: s = 0.95rem、xs = 0.8rem、xxs = 0.75rem。比率で割ると読めないほど小さくなるため、比率や丸めモードの影響を受けない。
• theme.json の fontSizes は各段への参照（slug: xx-small〜xx-large, display）。defaultFontSizes: false。
• 見出しマッピング: h1=xxxl / h2=xxl / h3=xl / h4=l / h5=m / h6=s、weight 700、line-height 1.3。本文 line-height 1.75。
• フォント: sans（日本語 UI フォント優先スタック）/ serif（明朝）/ mono。Web フォントは同梱しない。
• 丸め／流体モード（shitate_round_scale）は既定 ON: l 〜 xxxl を round(nearest, …, 2px) で偶数 px にスナップし、「派生モバイル比率 (1+ratio)/2 〜 選択比率」の間を clamp で流体化する。

5.4 余白（文字と同名の 8 段）

• 文字サイズと同じ 8 つの名前: --st-space-xxs / xs / s / m / l / xl / xxl / xxxl。数字名のトークン（--st-space-1〜15）は廃止済みで存在しない。
• 基準は m = --st-text-m（本文サイズ）。上は 2 乗刻み（l = m×r²、xl = m×r⁴、xxl = m×r⁶、xxxl = m×r⁸）、下は s = m÷r、xs = m÷r³、xxs = m÷r⁶。比率 --st-ratio や基準サイズを変えると全段が追従する。
• 既定比率 1.25 では約 4 / 8 / 13 / 16 / 25 / 39 / 61 / 95px（xxs → xxxl）。
• 小比率で全体が圧縮、大比率で拡大されるのは仕様（等比スケールの正しい挙動）。
• l 〜 xxxl は流体: clamp(min, min + N vw, max)。狭い画面ではリズム全体が自動で締まる＝メディアクエリ不要のレスポンシブ余白。xxs 〜 m は差が小さいため静的。
• 中間サイズが必要なときは calc(var(--st-space-m) * var(--st-ratio)) のように比率を掛けて作る（新しいトークンは増やさない）。
• エディタの余白ピッカーにも同じ 8 段を公開（slug は互換のため数字のまま、表示名は XXS〜XXXL）:

slug	名前	実体
10	XXS	--st-space-xxs
20	XS	--st-space-xs
25	S	--st-space-s
30	M	--st-space-m
40	L	--st-space-l
50	XL	--st-space-xl
60	XXL	--st-space-xxl
70	XXXL	--st-space-xxxl

• defaultSpacingSizes: false と spacingScale.steps: 0 が両方必須。前者を省くとコア既定 7 段（2X-Small／小／中／大…）が混在、後者を省くとコアがテーマ側にも自動生成段を作る。
• プリセット名に数字を使わない（theme.json の name はそのまま UI に出る）。

5.5 縦リズム（margin-top 方式）

• 基本ギャップ = blockGap（= spacing 40 = --st-space-l）を WordPress が margin-block-start として適用。
• 見出しは前を広く取る。ただし固定段ではなくローカル gap 連動: h1 / h2 = --wp--style--block-gap × 1.75、h3 / h4 = × 1.25。
• セレクタ: :root :where(.is-layout-flow, .is-layout-constrained) > hN:not(:first-child)（:root で特異度を上げ !important を回避）。
• gap が狭いカード内では見出し前も自動で締まる。ユーティリティ等の明示指定が優先。
• 全コアブロックは上マージンのみ: register_block_type_args フィルタ（shitate_top_margin_only_supports）で core/* の supports.spacing.margin を ['top'] に制限。
• em は不使用（トークンの固定値とズレるため）。

5.6 レイアウト・その他トークン

• コンテンツ幅 64rem（1024px）／幅広 78.75rem（1260px）。--st-width-text / --st-width-max と同期。rem 化済み＝ブラウザの文字サイズ設定・ズームに行長が追従。
• ルートパディング左右 = spacing 30（useRootPaddingAwareAlignments: true）。
• 角丸は 3 語彙のみ: --st-radius-s 0.375rem（ボタン・チップ）／-m 0.625rem（カード・画像）／-l 0.75rem（フィーチャーカード）。px 直書き禁止、パターン・テンプレートも var() 参照。
• 影プリセット 2 種: soft / card（コア既定はオフ）。
• --st-border-card: 1px solid var(--st-color-border)、--st-radius-card: var(--st-radius-m)。

5.7 CSS の掟

• メディアクエリ禁止（clamp / grid / auto-fit / intrinsic sizing で解決）。例外はデバイス出し分けのみ。
• ただし theme.json settings.viewport（mobile 768px / tablet 1024px、WP 7.1 機能）は宣言済み。これはユーザーがエディタのレスポンシブスタイルを使うときの境界で、プラグイン側の details / sb/if と同じ 768 / 1024 に統一してある。
• !important 禁止。例外は utilities.css（ユーティリティ層）のみ。
• フロント用 JS は navigation-toggle.js の 1 本だけ（モバイルメニューの閉じるボタンをヘッダーのハンバーガーと同じ位置に置く。JS 無効時はコア既定の位置）。

6. スタイルバリエーション

styles/ に 4 種。いずれもパレット上書きのみ（構造は触らない）。

バリエーション	base	contrast	accent
（既定）	#ffffff	#171f33	#0fae8e
Dark	#14171c	#f2f4f8	#37c8a4（hover は #5d80e0 に明転）
Cream	#fbf8f1	#2c2517	#c07a2e
Mist	#ffffff	#1d2523	#2f8f68
Mono	#ffffff	#1a1a1a	#1a1a1a

primary は全バリエーションで #2952cc 固定（ブランド一貫性のため）。派生色の自動追従（5.2）はバリエーション適用後も同様に働く。

7. カスタマイザー「Typography Scale」

セクション shitate_typography（priority 40）。3 設定。

設定	種別	既定	反映
shitate_ratio	select（1.067 / 1.125 / 1.2 / 1.25 / 1.333 / 1.414 / 1.5 / 1.618）	1.25	postMessage（ライブ）
shitate_text_m	number 12〜24px	16	postMessage（ライブ）
shitate_round_scale	checkbox（偶数 px スナップ＋流体見出し）	ON	refresh

• 比率は shitate_sanitize_ratio() でホワイトリスト検証（外れ値は 1.25 にフォールバック）。
• 生成 CSS は shitate_scale_inline_css()。フロントは shitate-tokens 直後に wp_add_inline_style で注入、エディタは block_editor_settings_all で settings['styles'] に追加（iframe キャンバス内で確実に tokens.css を上書きするため）。
• 比率を変えると文字も余白も同時に変わる（余白の基準が m = --st-text-m のため）。これがこのテーマの設計上いちばんの特徴。

8. 余白ユーティリティ

• クラス命名: <prop><sides>-<step>。prop: m = margin / p = padding。sides: t r b l / x（左右）/ y（上下）/ なし（全方向）。step: 0 xxs xs s m l xl xxl xxxl。
• 例: mt-0 mb-l px-m py-xxl p-s、加えて mx-auto。
• ユーティリティ層は意図的に !important（明示的な上書き層のため）。
• エディタツールバー「余白」ドロップダウン（assets/js/utilities-toolbar.js）: 全ブロックのツールバーに追加され、mt / mb / pt / pb / px ＋ mx-auto をクラス手入力なしで付け外しできる。className 属性を書き換える方式。
• 段を追加するときは、先に tokens.css で --st-space-<name> を定義してから utilities.css に行を足す。

9. テンプレート / パーツ / パターン

テンプレート（7）

ファイル	内容
index.html	ブログ一覧。クエリ（3 列グリッド）＋アイキャッチ 3:2＋日付＋タイトル＋抜粋＋ページネーション
single.html	投稿。パンくず → タイトル → 公開日／更新日 → アイキャッチ → 本文 → カテゴリ → コメント
page.html	固定ページ。アイキャッチ 21:9（角丸 --st-radius-m）＋タイトル＋本文＋コメント
page-full-width.html	カスタムテンプレート「Full Width」。default レイアウトで全幅
archive.html	アーカイブ。query-title＋term-description＋一覧
search.html	検索結果。query-title＋検索フォーム＋一覧
404.html	大きな 404＋説明＋ホームへのボタン（パターン shitate/404-content、コンテンツ幅 560px）

• front-page.html は持たない。フロントページは固定ページの本文（page.html）で構成し、パターンで組み立てる。
• 共通構造: header パート → <main>（上マージン 0 / 下 spacing 60、404 のみ 70）→ footer パート。ヘッダー直下の余白はパターンやブロック側で持たせる。

テンプレートパーツ（2）

• header.html: base 背景。ロゴ＋サイトタイトルを左、ナビを右（flex space-between）。モバイルではナビがオーバーレイになり、閉じるボタンはハンバーガーと同じ位置に出る。
• footer.html: contrast 背景／base 文字。ロゴ＋縦ナビ、下に © 行（パターン shitate/footer-credit: 年＋サイト名、サイト所有者の表記としてサイトエディターで編集可）。

パターン（4 ＋ 非表示 2、すべて shitate/*、カテゴリ shitate）

slug	内容	カテゴリ
shitate/hero	全幅ヒーロー（見出し＋文＋CTA ボタン 2 つ、上下 spacing 70）	shitate, banner, call-to-action
shitate/columns-3	画像カード 3 列（中央見出し＋画像＋説明＋ボタン）	shitate, columns
shitate/columns-4	4 列グリッド（縦長画像＋見出し＋本文）	shitate, columns
shitate/cta-two-buttons	メッセージ＋半幅ボタン 2 つ（狭い画面では縦積み）	shitate, call-to-action
shitate/404-content	404 本文（非表示）	—
shitate/footer-credit	フッター © 行（非表示）	—

• 画像ブロックは空で同梱（画像は同梱しない）。文言は esc_html_e( '…', 'shitate' )。日本語訳は languages/ にあり、サイト言語に自動追従。
• sb/* ブロックを使うパターンはテーマに置かない（プラグイン側で register_block_pattern）。

10. functions.php の実装内容

• SHITATE_VERSION 定義（アセットのキャッシュバスター。release.sh が同時更新）
• shitate_migrate_theme_mods() — 旧 st_* のカスタマイザー値を shitate_* に一度だけ移行
• shitate_setup() — wp-block-styles / editor-styles / responsive-embeds / custom-logo / html5、set_post_thumbnail_size(1568, 9999)（アイキャッチがボケる問題の対策・等比／クロップなし）、add_editor_style([tokens, utilities, editor])、load_theme_textdomain
• shitate_register_pattern_categories() — パターンカテゴリ shitate を登録
• shitate_patterns_admin_menu() — 「外観 → パターン」メニュー（site-editor.php?p=/pattern への直リンク）
• shitate_top_margin_only_supports() — 全コアブロックの余白を上マージンのみに制限
• shitate_sanitize_ratio() / shitate_sanitize_checkbox() / shitate_customize_register() / shitate_scale_inline_css() / shitate_scale_editor_settings() — タイポスケール一式
• shitate_customize_preview_js() — ライブプレビュー
• shitate_utilities_toolbar_script() — エディタツールバー（wp_set_script_translations に明示パス）
• shitate_enqueue_styles() — 読み込み順が重要: shitate-tokens →（インラインでスケール上書き）→ shitate-utilities → shitate-style
• shitate_enqueue_navigation_toggle() — フロント用 JS（defer）
• inc/colors.php — wp_theme_json_data_user フィルタで派生色を再計算（5.2）

11. i18n（翻訳）

• テーマの文言は英語ソース＋日本語訳（languages/ の .pot / .po / .mo）。日本語サイトではパターンや 404、フッターがそのまま日本語で表示される。
• JS 翻訳 JSON はハンドル名命名: shitate-ja-shitate-utilities-toolbar.json（WP 7.0 以降は md5 ではなくハンドル名で探す）。
• 翻訳辞書と抽出スクリプトはプラグイン側で横断管理している。

12. ビルド・リリース

• 配布 zip: bin/build-zip.sh → dist/shitate.zip。同梱するのは style.css / theme.json / functions.php / readme.txt / screenshot.png / templates / parts / patterns / styles / assets / inc / languages のみ。
• リリース: CHANGELOG.md の [Unreleased] を「## [X.Y.Z] – YYYY-MM-DD」に移し、bin/release.sh X.Y.Z でバージョン一括更新（style.css の Version / readme.txt の Stable tag / SHITATE_VERSION）→ commit → tag → zip → push → GitHub Release。
• 公式ディレクトリへの更新は、同じ zip を wordpress.org のアップロードページから上げる。反映後は導入サイトに通常の WordPress 更新として届く。

13. WordPress.org 掲載

• 2026 年 9 月に審査を通過し公開（初回公開は v0.4.0、現行は v1.0.3）。審査での必須対応: 接頭辞を 4 文字以上に、readme に Resources 節、フロントにテーマ作者の © を出さない、初期コンテンツから宣伝要素を除く、コメント対応、404 のリンクをポータブルに。
• GitHub 経由の自動アップデートは v0.3.0 で削除済み。.org は Update URI・外部通信とも禁止のため再導入しない。
• 配布 zip は Theme Check PASS 済み。フォント・画像・JS ライブラリは一切同梱しない。screenshot.png は規定の 1200×900。
• 審査時の推奨事項: 説明文からプラグインへの言及を外す（対応済み・次回更新で反映）、CSS 変数を --shitate-* に（互換性のため見送り）。

14. WP 7.1 対応状況

• 7.1 で実機テスト済み・全項目パス（Tested up to 7.1）。
• エディタ完全 iframe 化 → Block API v3 必須（テーマ側は該当なし、プラグインは全 block.json v3 で対応済み）。
• settings.viewport 対応済み。
• 7.1 でコアに core/tabs / core/icon が追加されたため、プラグイン側の重複ブロック（sb/tab・sb/icon）は廃止済み。