shitate（シタテ）には、ほかのテーマにはない shitate 独自の設定があります。このページでは、無料のテーマ shitate だけで使える設定を、実際の設定画面と一緒に順番に紹介します。WordPress を使い始めたばかりの方でも、画面と見比べながら進められるように、どのメニューを開いて、どこを押せばよいかを書いています。
有料プラグイン shitate pro blocks の機能は含めていません。テーマを有効にしただけの状態で、すべて設定できます。
※ 2026 年 10 月時点（shitate 1.0.6・WordPress 7.1）の画面です。画面は新しくインストールしたばかりのサイトで撮影しています。
設定の全体像
この記事で使う言葉を先に確認しておきます。
- 管理画面：WordPress にログインしたあとに表示される、左側に黒いメニューが並ぶ画面です
- カスタマイズ：管理画面の「外観」→「カスタマイズ」で開く、サイト全体の設定画面です。右側でサイトの見た目を確かめながら設定できます
- エディター：「外観」→「エディター」で開く、サイト全体のデザインやヘッダー、テンプレートを編集する画面です。開くと左上に「デザイン」と表示されます
- ブロック：見出し、段落、画像など、ページを組み立てる部品のことです。ブロックをクリックすると、画面右側にそのブロックの設定が表示されます
shitate 独自の設定と、それぞれの場所は次のとおりです。
| 設定 | 場所 | できること |
|---|---|---|
| タイポグラフィスケール | 外観 → カスタマイズ | 文字の大きさの比率を選ぶだけで、サイト全体の文字がそろう |
| 日本語組版の最適化 | 外観 → カスタマイズ | 日本語を本や雑誌に近い読みやすい組み方にする |
| 色の組み合わせ（スタイル） | 外観 → エディター → スタイル | 5 種類の配色から選ぶ・色を変える |
| shitate設定 | 投稿・固定ページの編集画面 | そのページだけ文字の大きさを変える・ページタイトルを隠す |
| メニューのキャプションとボタン | 外観 → エディター → パターン → ヘッダー | メニュー項目の下に小さな説明を出す・お問い合わせをボタンにする |
| 一覧の並べ方 | 外観 → エディター → テンプレート | ブログの一覧をカード・リスト・行から選ぶ |
| パターン | 編集画面の「＋」→ パターン | できあがりのデザインを貼り付ける |
| 余白とブロックのスタイル | ブロックのツールバー・右側の「スタイル」 | 上下の余白を段階で選ぶ・見た目を切り替える |
文字の大きさと読みやすさ
タイポグラフィスケール
shitate でいちばん大切な設定です。見出しと本文の大きさの差を、8 種類の「比率」から 1 つ選びます。比率を選ぶだけで、大見出しから小さな注釈まで、サイト内のすべての文字の大きさがまとめて決まります。文字の大きさを 1 か所ずつ調整する必要はありません。
- 管理画面の左側のメニューで「外観」→「カスタマイズ」を開きます
- 左側に並ぶ項目から「タイポグラフィスケール」を押します
- 「スケール比率」の一覧から比率を選びます。右側のサイトの見た目がすぐに変わるので、見比べながら選べます
- 決まったら、画面左上の「公開」ボタンを押します。押すまでは、訪問者が見るサイトには反映されません
比率は、数字が大きいほど見出しと本文の差が大きくなります。音楽の音程にちなんだ名前が付いていますが、名前は気にせず、数字の大小で選んで大丈夫です。
| 比率 | 見た目の印象 | 向いているサイト |
|---|---|---|
| 短2度 1.067／長2度 1.125 | 見出しと本文の差が小さく、落ち着いた印象 | 文章が多いブログ、情報量の多いサイト |
| 短3度 1.2／長3度 1.25 | ほどよい差で、読みやすく整った印象 | 会社案内、店舗サイトなど。迷ったらここから |
| 完全4度 1.333／増4度 1.414 | 見出しがはっきり大きく、メリハリのある印象 | サービス紹介、採用サイト |
| 完全5度 1.5／黄金比 1.618 | 見出しがとても大きく、印象に残る | ランディングページ、作品紹介 |
同じ画面にあるほかの設定は次のとおりです。
- 小さな画面での比率：スマートフォンで見たときの比率です。最初の「自動（1 とメイン比率の中間）」のままにしておくと、スマートフォンでは見出しが少し控えめになり、画面からはみ出しにくくなります
- 基準サイズ（px）：本文の文字の大きさです。最初は 16 です。年配の方が多く読むサイトなら、17〜18 にすると読みやすくなります。見出しの大きさも、この値に合わせて自動で変わります
- フォントサイズにラウンドを適用：文字の大きさを、きりのよい偶数の値にそろえます。最初からチェックが入っています。そのままで問題ありません
- 小さな文字の数値指定：比率を小さくしたときに、注釈などの小さな文字が小さくなりすぎるのを防ぎます。小さな文字が読みにくいと感じたら、チェックを入れてください
段落と段落の間や、見出しの前後の余白は、比率を変えても変わりません。本文 1 行分を基準に、見出しの前は広く、見出しの直後は狭く、自動で整います。
日本語組版の最適化
本や雑誌に近い、きれいな日本語の文字組みにする設定です。サイトの言語が日本語のときに働きます。最初はオフになっています。
- 「外観」→「カスタマイズ」→「タイポグラフィスケール」を開きます
- いちばん下の「日本語組版の最適化」にチェックを入れます
- 「公開」ボタンを押します
チェックを入れると、次の 3 つが自動で行われます。
- 行の先頭に「ゃ」「ー」などの小さな文字や伸ばし棒が来ないようにします
- 日本語と英数字が並ぶところに、わずかなすき間を入れます（例：「WordPress で」の間）
- かなや漢字の間隔を詰めて、文字の並びを引き締めます
サイト全体の色
色の組み合わせを選ぶ
shitate には、標準の配色を含めて 5 種類の色の組み合わせが入っています。
- 「外観」→「エディター」を開きます（左上に「デザイン」と表示されます）
- 左側の「スタイル」を押します
- 「スタイル一覧へ」を押します
- 「カラーバリエーション」に並ぶ色見本から、好みのものを選びます。右側のサイトの見た目がすぐに変わります
- 画面右上の「保存」ボタンを押します
色を 1 色ずつ変える
会社のロゴの色などに合わせたい場合は、同じ「スタイル」の画面で「色」→「パレットを編集」を開きます。「テーマ」の欄に並んでいる 9 色を押すと、1 色ずつ変えられます。ただし、ふだん変えるのは次の表の「自分で選ぶ」4 色だけで大丈夫です。
色の名前は英語で表示されます。主な色の役割は次のとおりです。
| 色の名前 | 使われている場所 | 決め方 |
|---|---|---|
| Base | ページの背景 | 自分で選ぶ |
| Base / Two | 薄く色を付けた背景（表の縞、カテゴリーのボタンなど） | 自動 |
| Contrast | 本文と見出しの文字 | 自分で選ぶ |
| Contrast / Two | 補足の文字 | 自動 |
| Neutral | 日付や注釈などの控えめな文字 | 自動 |
| Border | 枠線 | 自動 |
| Primary | リンクとボタン。サイトの「メインの色」です | 自分で選ぶ |
| Primary / Hover | リンクやボタンにマウスを重ねたときの色 | 自動 |
| Accent | アクセントの色 | 自分で選ぶ |
自分で選ぶのは Base・Contrast・Primary・Accent の 4 色だけです。「自動」の 5 色は、この 4 色から shitate が計算して決めます。たとえばメインの色を変えたいときは、Primary だけを変えて保存すれば、マウスを重ねたときの色（Primary / Hover）や薄い背景（Base / Two）、枠線（Border）も、新しい Primary に合う色に変わります。本文中の罫線（表や引用の線）とリンクの下線の色も、同じように自動で決まります。
自動の色が変わるのは「保存」したあとです。編集中の画面にはすぐには出ないので、保存してからページを再読み込みして確かめてください。また、「自動」の色を自分で選び直した場合は、その色がそのまま使われ、ほかの色を変えても自動では変わらなくなります。元の 4 色に戻すと、自動の色も元に戻ります。
ページごとの設定（shitate設定）
「この固定ページだけ、見出しをもっと大きくしたい」というときに使います。サイト全体の設定は変わりません。
- 変えたい投稿、または固定ページの編集画面を開きます
- 画面右側に設定が出ていない場合は、右上の「保存」ボタンの左にある四角いアイコンを押します
- 右側の「投稿」（固定ページでは「ページ」）タブの中にある、青いマーク付きの「shitate設定」を開きます
- 「スケール比率」と「本文サイズ」を選びます。編集画面の文字がすぐに変わるので、確かめながら選べます
- 「保存」ボタンを押します
「既定」を選ぶと、サイト全体の設定に戻ります。
同じ場所にある「ページタイトルを出力しない」をオンにすると、そのページだけ、上に自動で表示されるページの題名が消えます。大きな写真と見出しで始まるトップページや、キャンペーンページを作るときに便利です。ブラウザーのタブやメニューに出る題名は、そのまま残ります。
ヘッダーのメニュー
shitate のヘッダーのメニューは、日本語の項目名の下に、小さな英語などの説明（キャプション）を添えて表示できます。いま開いているページの項目には、色の付いた下線が付きます。
キャプションを入れる
- 「外観」→「エディター」を開き、左側の「パターン」を押します
- 「テンプレートパーツ一覧」の下にある「ヘッダー」を押し、表示されたヘッダーをクリックして編集画面を開きます
- キャプションを付けたいメニュー項目（例：「お知らせ」）をクリックします
- 右側の「ブロック」タブにある「説明」の欄に、キャプションにしたい文字（例：NEWS）を入力します
- ほかの項目にも同じように入力し、最後に画面右上の「保存」ボタンを押します
「説明」を空にした項目は、キャプションなしで表示されます。以前のテーマでメニュー項目の「説明」を使っていた方は、同じ感覚で使えます。
メニューの見た目を切り替える
メニュー全体を選び（画面下の道すじで「ナビゲーション」やメニュー名を押すと選べます）、右側の半円のアイコン「スタイル」を押すと、見た目を選べます。
- キャプション付き：項目名の下にキャプションを表示します（最初からこの見た目です）
- 下線：キャプションを表示せず、項目名と下線だけのすっきりした見た目です
「お問い合わせ」をボタンにする
メニューの中の 1 つの項目をクリックして、右側の「スタイル」で「ボタン」（色で塗ったボタン）か「枠線」（枠線だけのボタン）を選ぶと、その項目がボタンの形になります。メニューの右端に置いた「お問い合わせ」などに使うと、目に留まりやすくなります。スマートフォンのメニューでは、画面の幅いっぱいのボタンになります。
ブログの一覧
ブログの一覧は、最初から次の形で表示されます。見出しの下には、カテゴリーの一覧がボタンのように並び、読者がほかのカテゴリーへ移りやすくなっています。
- ブログのトップ：最新の記事を大きく、残りをカードで並べます
- カテゴリーごとの一覧と検索結果：写真を左、題名と要約を右に置いて、1 件ずつ並べます
並べ方を変える
- 「外観」→「エディター」→「テンプレート」を開き、変えたい一覧を選びます。ブログのトップは「インデックス」、カテゴリーごとの一覧は「アーカイブ」、検索結果は「検索結果」です
- 記事が並んでいる部分をクリックし、画面下の道すじで「投稿テンプレート」を押します
- 右側の「スタイル」で並べ方を選び、「保存」ボタンを押します
| スタイル | 見た目 | 向いている使い方 |
|---|---|---|
| カード | 写真付きのカードを格子状に並べる | 写真の多いブログ |
| カード（1件目を大きく） | 最新の 1 件を大きく、残りはカード | ブログのトップ |
| リスト | 写真を左、文章を右に 1 件ずつ | 記事の多いカテゴリー、検索結果 |
| 行 | 日付・カテゴリー・題名を 1 行に | お知らせ、新着情報 |
一覧をもっと見やすくする
- ブログのトップに説明文を出す：「設定」→「表示設定」で「投稿ページ」に選んだ固定ページを開き、右側の「抜粋」に紹介文を書くと、ブログのトップの見出しの横に表示されます
- おすすめの記事に印を付ける：記事の編集画面の右側で「ブログのトップに固定」をオンにすると、その記事が一覧の先頭に来て、写真の左上に「PICKUP」と表示されます
- 写真を設定する：一覧のカードには、記事の「アイキャッチ画像」が使われます。記事ごとに設定しておくと、一覧が華やかになります
パターン
「パターン」は、見出し・文章・写真・ボタンを組み合わせた、できあがりのデザインです。貼り付けてから文字と写真を差し替えるだけで、ページが作れます。
- 固定ページの編集画面で、左上の青い「＋」ボタンを押します
- 「パターン」タブを開き、一覧から「shitate」を選びます
- 使いたいデザインをクリックすると、ページに追加されます
- 文字をクリックして書き換えます。写真は写真をクリックし、ツールバーの「置換」から差し替えます
トップページの大きな見出し（ヒーロー）、会社紹介、サービスの一覧、料金表、よくある質問、お客様の声、スタッフ紹介、お問い合わせへの案内、最新の記事、お知らせの一覧など、会社やお店のサイトでよく使う 17 種類が入っています。管理画面の「外観」→「パターン」からも一覧を見られます。
細かな見た目の調整
ブロックの上下の余白
ブロックをクリックすると、ブロックの上に小さな道具の列（ツールバー）が出ます。その中の十字の矢印のアイコン「余白」を押すと、上マージン（上の余白）、下マージン（下の余白）、上下・左右のパディング（内側の余白）を、XXS から XXXL までの段階で選べます。数値を入力しなくても、サイト全体でそろった余白になります。元に戻すときは「余白クラスをクリア」を押します。
ブロックの「スタイル」
次のブロックは、クリックして右側の「スタイル」を選ぶだけで見た目が変わります。
- パンくずリスト「1行（横スクロール）」：「ホーム / カテゴリー / 記事名」の道すじを折り返さずに 1 行で表示します。スマートフォンで長くなっても、横にずらして読めます
- カテゴリーやタグ・段落の「チップ」：リンクを、小さなボタンのような形で並べます
- 投稿タイトルや抜粋の「2行で省略」：長い題名や要約を 2 行で切り、続きを「…」にします。カードの高さがそろって、一覧が整って見えます
注意点
- 「カスタマイズ」の設定は「公開」を、「エディター」の設定は「保存」を押すまで、訪問者が見るサイトには反映されません
- shitate 1.0.6 からは、サーバーの PHP のバージョンが 8.3 以上である必要があります。8.3 より古いと、カスタマイズの画面で「公開」ボタンが「有効化できません」になり、設定を保存できません。サーバーの管理画面で PHP のバージョンを確認してください
- 「エディター」で一度保存したテンプレートやヘッダーは、テーマを更新しても保存した内容のまま残ります。テーマの新しいデザインに戻したいときは、エディターのテンプレートの「︙」メニューから「リセット」を選びます
まずはこの 3 つから
設定の数は多くありません。迷ったら、次の 3 つだけ決めれば、サイト全体が整います。あとは、パターンを貼り付けて文字と写真を差し替えるだけです。見出しや余白の大きさは、shitate がそろえます。
- 「カスタマイズ」で比率を選ぶ（迷ったら 1.25 のまま）
- 「日本語組版の最適化」にチェックを入れる
- 「エディター」の「スタイル」で、色の組み合わせを選ぶ