shitate ver1.0.0をリリースしました。

雪谷匡良のアバター

·

·

28〜43分
st noimg

shitate pro blocks ver1.5.0のリリースに合わせてshitateのテーマも最新版として公開しました。

1.0.1

スタイルバリエーションごとにブランド色(Primary)を持つように

これまで Dark / Mono / Cream / Mist の4つのバリエーションは、Primary が既定の青 #2952cc に固定されていました。そのため Mono を選んでもボタンとリンクだけ青いまま残り、Dark では暗い背景上のボタン文字とのコントラストが 2.4:1 まで落ちていました。各バリエーションが自分の Primary と Primary hover を持つようにし、すべて本文・ボタン文字に対して 4.5:1 以上のコントラストを確保しています。

バリエーションPrimaryHover
Dark#7f9cea#a3b8f0
Mono#1a1a1a#444444
Cream#8a4f14#6f3f10
Mist#257556#1f6449

既定(theme.json)の青は変わりません。

派生色の自動追従がバリエーションの指定を上書きしない

バリエーションを適用した直後に、そのバリエーションが定めた Primary hover などの派生色を「源の色が変わった」と判定して計算し直す経路がありました。源4色(base / contrast / primary / accent)が同梱パレットのいずれかと完全に一致する場合はそのファイルの派生色を正とし、再計算はサイト所有者が源の色を編集したときだけ行うようにしました。

Safari で流体比率が効かない不具合

Safari 26.5 は画面幅を無単位化する tan(atan2(100vw, 1px)) を 0 と評価するため、すべての画面幅で「小さな画面での比率」に固定されていました。画面幅を登録済みカスタムプロパティ経由で絶対 px に解決してから渡す方式に変え、Safari でも広い画面で比率が開くようになりました。Chrome / Firefox の結果は変わりません。

1.0.2

Requires PHP の宣言を 7.4 に変更しました

style.css と readme.txt の Requires PHP を 7.2 から 7.4 に変更しました。shitate は WordPress 7.0 以上を前提としているため、実質の下限は元から 7.4 です。宣言を実態に合わせたもので、動作する環境が狭まったわけではありません。Requires at least(WordPress 7.0)は据え置きです。

PHP 8.5.3 で動作確認しました

フロントの各テンプレートの描画、カスタマイザーの登録、派生色のフィルター、画像の読み込みヒント、パターンの登録を PHP 8.5.3 で確認し、警告・非推奨の通知が出ないことを確認しています。

比率がひとつになりました

文字サイズと余白のすべての段を、ひとつの比率から計算するようにしました。比率は画面幅 375px から 1260px の間で滑らかに変わるため、スマートフォンでも PC でも段と段の比が揃います。カスタマイザーの「Typography Scale」に「小さな画面での比率」が追加され、スマートフォン用の比率を PC 用とは別に選べます。

ベースリセットを同梱

ブラウザごとの見た目の差をならす最小限のリセット CSS を追加しました。すべて特異度ゼロで書いているので、お客様の CSS を邪魔しません。不要な場合はフィルター shitate_use_reset で無効にできます。

そのほかの追加

  • 欧州 6 言語(ドイツ語・フランス語・スペイン語・イタリア語・オランダ語・ポルトガル語)の翻訳を同梱
  • フォントスタックをページ言語で切り替え。日本語サイトでは Hiragino Sans → Yu Gothic → Meiryo の順で表示
  • カスタマイザーに「小さな文字の数値指定」(Small 以下を 0.95rem / 0.8rem / 0.75rem に固定)を追加。既定はオフ
  • カスタマイザーに「パフォーマンス → 画像の読み込みを最適化」を追加。高速化プラグインと干渉しないよう既定はオフ
  • ホバーのある要素に共通のトランジション(0.2 秒)

修正

  • スタイルバリエーション(Dark / Mono / Cream / Mist)でボタンとリンクの色が既定の青のまま残っていた不具合
  • Safari で比率が小さな画面用に固定されていた不具合
  • カスタム HTML ブロックに貼った Google マップなどの iframe が固定幅になっていた問題
  • WordPress 7.1 の新しいナビゲーションオーバーレイでメニューと「閉じる」ボタンがずれていた問題

1.0.3

投稿一覧に見出しが付きました。

投稿一覧(index テンプレート)に h1 を追加しました。「設定 → 表示設定」で投稿ページに選んだ固定ページのタイトルがそのまま見出しになり、未設定のときは「ブログ」と表示します。サイトエディターでは通常の見出しブロックとして書き換えられます。

翻訳できなかった文言をなくしました。

テンプレートに英語で直書きされていた 5 か所(投稿がないときの案内、検索結果がないときの案内、検索フォームのラベルとボタン、タグの「Tags:」)をパターンに移し、日本語と欧州 6 言語の訳を同梱しました。

レイアウト幅の変更に全体が追従します。

コンテンツ幅と幅広サイズのトークンが、サイトエディター「スタイル → レイアウト」の設定を参照するようになりました。幅を変えると、タイプスケールの比率が最大になる位置も同じ幅に移ります。従来は 1260px に固定されていました。

修正

  • ヘッダーとフッターのテンプレートパーツで <header> <footer> が二重に出力されていた問題を修正
  • 「本文サイズ」の保存値を 12〜24px に制限し、旧設定からの移行時も同じ検査を通すように
  • パターンファイルに直接アクセス時のガードを追加
  • 内部用パターンの名前を hidden- 始まりに統一(footer-credit → hidden-footer-credit、404-content → hidden-404)

更新時の注意。

サイトエディターでヘッダー・フッター・404 テンプレートを保存しているサイトでは、保存済みの内容が優先されます。更新後にフッターのクレジットや 404 の本文が消えた場合は、該当テンプレートで「カスタマイズをクリア」を選ぶか、パターン名を新しいものに書き換えてください。

1.0.4

コアブロックだけで組んだパターンを 12 本追加しました

会社紹介、お問い合わせ、よくある質問、特長 3 つ、ヒーロー 2 種(カバー型・左右分割)、最新のお知らせ、料金 3 プラン、サービス 6 つ、3 ステップ、メンバー紹介、お客様の声の 12 本です。すべて WordPress 標準のブロックだけでできているので、pro blocks がなくても使えます。見本の文章は日本語と欧州 6 言語(独・仏・西・伊・蘭・葡)を同梱していて、サイトの言語に合わせて切り替わります。

エディターでフォントと太さをすぐ変えられます

段落・見出し・投稿タイトル・リスト・引用・ボタンの「タイポグラフィ」パネルに、「フォント」と「外観(太さ・スタイル)」を最初から表示するようにしました。これまでは「+」メニューの中に隠れていました。サイト全体の既定値はこれまでどおりサイトエディターの「スタイル → タイポグラフィ」で設定し、こちらはブロック単位の調整に使います。

日本語組版の最適化(カスタマイザー)

カスタマイザーの「タイポグラフィスケール」に「日本語組版の最適化」を追加しました(既定はオフ)。オンにすると、サイトの言語が日本語のときだけ、厳格な禁則処理(小書きの仮名や長音記号を行頭に置かない)、和文と英数字の間の自動アキ、仮名・漢字の詰め組み(palt)を本文に適用します。コードブロックには適用しません。

縦の余白をタイプスケールの比率で段階化しました

ブロック間の余白も、文字サイズと同じ比率 r の累乗で決まるようになりました。積み重なるブロックの間は gap × r、画像・表・引用の前後は gap × r²、小見出しの前は gap × r³、大見出しの前は gap × r⁴ です。比率を変えれば余白も一緒に動き、カードの中など間隔の狭い場所では自動的に詰まります。ナビゲーションやボタン列の間隔は変わりません。全体に余白がひと回り広がるので、更新後に一度ページをご確認ください。

そのほか

  • 投稿・固定ページのエディターで、タイトルと本文の 1 行目が密着していた問題を修正
  • WordPress.org のテーマタグを 18 個に拡充し、テーマの説明文を書き直し
  • readme の Resources 節のパス誤りを修正

1.0.5

テンプレートの見た目、本文の細部、読み込みの軽さをまとめて見直した版です。投稿ページと一覧の型を決め直し、ナビゲーションを国産テーマの作法に寄せ、CSS を 1 ファイルにしました。

投稿ページを読み物のレイアウトに

投稿専用のテンプレート single-post を追加しました。本文幅を 42rem(約 672px)に絞り、パンくず、カテゴリー、タイトル、著者・日付・読了時間のメタ行、16:9 のアイキャッチの順に並べ、本文の後にタグ、著者ボックス、前後の記事、コメントが続きます。固定ページや他の投稿タイプは従来の single のままです。サイトエディターで single を編集して保存しているサイトでは、投稿だけが新しいレイアウトに切り替わります(他の投稿タイプは保存した内容のまま)。

一覧カードを 1 つの型に、レイアウトは 3 種類

投稿ページ・アーカイブ・検索結果の一覧をコアブロックだけで組み直しました。カードは「16:9 のアイキャッチ → カテゴリーのチップと日付 → 2 行で省略するタイトル → 2 行で省略する抜粋」の 1 つの型です。投稿テンプレートのブロックスタイルとして「Cards, first post large」(1 件目をグリッド幅いっぱいに。2 ページ目以降と狭い幅では普通のカード)、「List」(画像を左に 1/3、文字を右に、罫線で区切る)、「Rows」(日付・チップ・タイトルの 1 行。お知らせ向け)を用意し、既定では投稿ページが 1 件目大、アーカイブと検索結果がリストです。shitate pro blocks の投稿カードも同じ骨格に揃えています。

投稿ページの見出しは、固定ページの抜粋を右に添える 2 カラムにし、その下に「すべて」と投稿のあるカテゴリーをチップで並べます(現在地は塗り)。カテゴリーアーカイブにも同じ列が出ます。お知らせ欄向けのパターン「News rows」(見出し・最新 5 件の行・一覧へのリンク)も追加しました。ページネーションは中央揃えで、番号は 36px の角丸ボタンです。

ナビゲーションを国産テーマの作法に

ナビゲーションブロックのスタイル「Captioned」を追加しました。各項目の下に小さなキャプションを表示し(ナビゲーションリンクの「説明」欄の文字。クラシックテーマのメニュー項目の説明と同じ使い方です)、ホバーと現在ページにブランド色のバー、ドロップダウンは影付きのパネル、スマホのメニューは罫線付きの行になります。キャプションなしの「Underline」、右端のお問い合わせボタン用にナビゲーションリンクの「Button」(塗り)と「Outline」(枠線)もあります。新規インストール時のヘッダーは Captioned です。

本文の細部を決めました

これまでコアの既定に任せていた部分を、全サイト共通の様式にしました。リンクの下線は細く、文字から少し離して、リンク色の 45% の濃さ(ホバーで 100%)。引用は薄い縦罫と小さな引用元、プルクオートは上下の細い罫で太字、表は横罫だけにして偶数行に縞、数字は等幅。キャプションは小さく中間色、区切り線は細い罫、コードブロックは薄い面に等幅フォント、インラインコードは小さなチップです。罫の色はパレットから自動で導く新しい変数 –st-color-rule で、スタイルバリエーションを変えても追従します。

縦のリズムは「行」単位に、余白は固定値に

本文の段落と段落の間隔を本文 1 行分にし、画像・表・引用の前後は 1.5 行、h3/h4 の前は 1.5 行、h1/h2 の前は 2 行、見出しの直後は 0.5 行という行単位のルールにしました。1.0.4 で入れた「余白が比率の累乗で広がる」方式は、比率を大きくすると余白が膨らみすぎたため取り下げています。余白のスケール(–st-space-xxs〜xxxl)も 4 / 8 / 12 / 16 / 24 / 40 / 64 / 104px の固定値になり、タイプスケールは文字サイズだけを動かします。

エディターの「shitate設定」パネル

投稿・固定ページの編集画面のサイドバーに「shitate設定」パネルを追加しました。そのページだけタイプスケールの比率と本文サイズを変えられ、変更はエディター内にすぐ反映されます。独自のヒーローで始まるページ向けに「ページタイトルを出力しない」も同じパネルにあります。

読み込みを軽く

テーマの CSS を 1 ファイルにまとめて圧縮し(4 ファイル 34KB → 1 ファイル 17KB)、使っていないコア既定の色・グラデーション・シャドウのプリセットを CSS から外しました(新規インストールの global styles が 18KB → 10KB)。ブロックスタイルの CSS は、そのスタイルを使っているページにだけ出力します。元の CSS ファイルも同梱しているので、SCRIPT_DEBUG が有効なサイトではそちらを読みます。

更新時の注意

  • サイトエディターで single を保存しているサイトでは、投稿だけが新しい single-post に切り替わります。戻すにはサイトエディターで single-post を編集して保存してください。
  • 他のテーマで作った記事がコア既定の色(has-vivid-red-color など)を使っていると、その色が消えます。テーマのパレットで塗り直してください。
  • CSS を 1 ファイルにしたため、shitate-reset / shitate-utilities / shitate-style を個別に外す指定は効きません。従来の 4 ファイル構成に戻すには add_filter( ‘shitate_use_bundle’, ‘__return_false’ ) を使います。

1.0.6

  • 動作に必要な PHP を 8.3 以上にしました(これまでは 7.4 以上)。 PHP 8.3 未満のサーバーでは、WordPress がテーマの更新・有効化を止めます。更新の前に、サーバーの管理画面で PHP のバージョンをご確認ください
  • テーマのスクリーンショットを、リニューアルした公式サイトのトップページに差し替えました

1.0.7

  • 新しいパターン「Posts, first post large」を追加しました。最新の投稿 1 件を、画像の横に本文を置いた大きなカードで見せ、続く 3 件を 3 列のカードで並べます。「一覧を見る」リンク付きの見出しも入っています
  • 投稿以外の個別ページと固定ページのテンプレートで、アイキャッチ画像の角丸をなくしました。角丸を付けたい場合は、サイトエディターでアイキャッチのブロックを選び、「角丸」を設定してください
  • パターン「Three features with icons」のアイコン画像が、WordPress 7.0 と 7.1 のどちらでも同じ形で保存されるようにしました。パターンを挿入したときに、エディターが画像を自動で書き換えなくなります
  • エディターの「shitate設定」パネルで、項目どうしの間隔を整えました

タイポグラフィスケール

変更はこのページに即時反映され、あなたのブラウザ内にだけ記憶されます。サイト側には何も保存されません。

比率が大きいほど見出し間のコントラストが強くなります(typescale.com と同じ考え方)。

画面幅 375px で使う比率。1260px までにメイン比率へなめらかに変化し、メディアクエリなしでスマホでは文字も余白も引き締まります。

本文の文字サイズ。スケール全体はここから計算されます。

すべての文字段を偶数ピクセル(2px)にスナップします。

Small / X-Small / XX-Small を比率で割らず 0.95rem / 0.8rem / 0.75rem に固定します(比率で割ると小さすぎて読みにくくなる場合の対策)。

この画面幅での実サイズ
Display / H1 –
Huge / H2 –
Extra Large / H3 –
Large / H4 –
Medium / 本文 –
Small / H6 –
X-Small –
XX-Small –