色と書体でサイト全体を整える

サイト全体で使う色と書体を「スタイル」から整えます。共通設定が使われる見出し、本文、リンク、ボタンの印象をまとめて調整し、個別指定や部品固有の色は別に確認します。

目次
  1. 共通デザインを変更する
  2. パターンの配色・余白を変更する
  3. ボタンのホバーを変更する
  4. 募集一覧の区分表示を変更する
  5. 完了を確認する
  6. つまずいたとき

作業にはサイトを編集できる権限が必要です。使用するロゴ、ブランドカラー、本文と見出しの書体を先に決めてください。

共通デザインを変更する

  1. WordPress管理画面で「外観」>「エディター」を開き、「スタイル」を選びます。
  2. 全体の組み合わせから選ぶ場合は、現在のスタイル、「ナチュラル」「スタイリッシュ」を切り替え、プレビューで方向を決めます。
  3. 「タイポグラフィ」を開き、本文と見出しを確認します。2GUテーマでは「サンセリフ」「エディトリアル」「セリフ」を選べます。
  4. 「色」を開き、「ベース」「サーフェス」「文字」「補助文字」「プライマリー」「アクセント」「境界」「プライマリー上」の役割を確認して調整します。
  5. プレビューで本文、見出し、リンク、ボタン、ヘッダーを確認します。デモ固有の部品や固定色が変わらない場合は、その箇所を記録して個別に確認します。問題がなければ「保存」を選びます。

パターンの配色・余白を変更する

  1. 変更したいパターンを選び、右側の「ブロック」設定で「パターンを編集」を押します。表示されない場合は通常のブロック編集状態です。
  2. リストビューから対象を選びます。全体の背景と外側余白は一番外側のグループ、文字色は見出し・段落、カードの背景・枠線は各カードのグループを選びます。
  3. 右側の設定で色・背景・サイズ・枠線などを調整します。表示される項目や「スタイル」タブの有無は、ブロックとWordPressの版で異なります。濃い背景にする場合は文字色も合わせて確認します。
  4. 「パターンを終了」で簡易編集へ戻り、ページを保存します。再読込とPC/SPプレビューで確認してください。

余白に「セクション標準(可変40〜80px)」を設定すると、画面幅に応じた値を使います。固定値に変更した後は同じプリセットを選び直すことで可変余白へ戻せます。外側余白と内側余白、上下と左右を取り違えないよう、変更対象を確認してください。

ボタンのホバーを変更する

2.1.0以降では「外観」>「ボタンのホバー」で、塗り・アウトラインの共通設定を変更できます。文字・背景・枠線の色を設定し、保存します。空欄の項目は既存のスタイルを使います。

個別に変える場合は、ページ内の「ボタン」ブロックを選び、「ボタンのホバー」で「このボタンで指定」を選択します。「ホバー状態をプレビュー」で編集画面上の見え方を確認できます。プレビュー状態は保存されません。

「共通設定に戻す」で個別指定を解除できます。共通設定を変更した後は、編集中のページを保存・再読込して反映を確認してください。専用ブロック内のリンクや、独自CSSを指定したリンクまで一律に変える設定ではありません。

募集一覧の区分表示を変更する

募集一覧ブロックを選び、表示形式に応じた区分表示の設定で、表示する内容、文字のみ・枠線付き・背景付きのスタイルと配色を調整します。表示形式により選べる項目は異なります。

「写真・勤務地・給与」の写真は、求人側のアイキャッチ画像です。求人を編集して画像を設定・変更し、保存後に一覧への反映を確認します。幅を分割した募集案内では「情報比較」を新たに選べません。保存済みの形式は保持されます。

完了を確認する

  • 本文と背景、ボタンと文字の組み合わせが読みやすい
  • 見出しと本文の書体を主要ページで確認し、部品固有の書体との差が意図どおりである
  • リンク、ボタン、入力欄のフォーカス位置を見分けられる
  • PCとスマートフォンで、長い見出しやボタンが崩れていない
  • 求人一覧、求人詳細、応募先で、共通設定が反映される部分と個別の色指定が残る部分を確認した

つまずいたとき

  • 「スタイル」の変更は共通設定を使う部分へ反映されます。デモ固有CSSや部品に直接指定された色まで一律に変わるとは限りません。
  • 個別のブロックに色や書体を指定している場合は、共通設定より個別設定が優先されることがあります。そこだけ変わらないときは対象ブロックの設定を確認します。
  • 変更後に読みにくくなった場合は、スタイルの変更履歴から直前の状態を確認し、追加の個別調整を重ねる前に戻します。