「サイトタイトルの文字が背景と同化して読みにくい」
「ヘッダー全体をかっこよく整えたい」
そんな方に向けて、この記事では AFFINGER6でサイトタイトルの色を変更する方法 を、初心者にも分かりやすく解説しています。
こちらの赤枠の部分です。
AFFINGER6でサイトタイトルの色を変更する手順
手順① 「外観」→「カスタマイズ」を選択
WordPressのメニューから「外観」→「カスタマイズ」を選択します。
手順② 「ヘッダーナビゲーション」を選択
メニュー項目から「ヘッダーナビゲーション」を選択します。
手順③ 「パソコン」or「スマホ」を選択
「パソコン」もしくは「スマホ」の変更したい方を選択します。
この記事では「パソコン」の方で説明していきますが、変更方法は同じです。
※ 「パソコン」と「スマホ」の両方で色を反映したい場合は両方で設定する必要があります。
手順④ サイトタイトルの色を変更
「サイトのタイトルとキャッチフレーズ」でタイトルの色を変更することができます。
色を変更するとこんな感じです。
サイトタイトル色の「正しい選び方」のコツ
タイトルの色を変更する際には、“見やすさ × デザイン統一 × 読者の負担軽減” を考えながら設定しましょう。
1. 背景色とのコントラストを意識する
背景色によって見やすい色を設定しましょう。
- 白背景 → 黒・濃紺・濃グレーなど
- 黒背景 → 白・淡いグレー・明るいカラー
「読みにくい色」は離脱率を上げる原因になります。
2. ブランドカラーに合わせる
サイトカラーが
- 青系なら → タイトルもネイビー〜ブルー
- 赤系なら → ダークレッド〜ブラウン
- モノトーンなら → 黒・白・グレー
というように“統一感”を意識しましょう。
3. ロゴ画像を使っている場合は色かぶりに注意
ロゴとタイトル色が同じトーンだと、視認性が落ちる／全体がぼやけるという問題が発生します。
ロゴとタイトルの色バランスも確認してください。
4. スマホ表示の視認性も必ず確認
スマホ版はPCと見え方が大きく変わります。
「PCで見えた色がスマホでは見えない」というケースも多いです。
AFFINGER6では「スマホヘッダーのタイトル色」をPCと別で設定できます。
その他、ヘッダー関係のカスタマイズに関しての別記事も参考にしてみてください。
サイトタイトルを変更した後にチェックすべきポイント
- PC／スマホで十分に読めるコントラストになっているか
- 背景と被っていないかをチェック。
- ロゴ画像と色がケンカしていないか
- 特に白ロゴ × 白文字は最悪の組み合わせ。
- ヘッダーメニューの色とズレていないか
- ナビゲーションとの一体感を確認。
- 全体のデザイン統一感が出ているか
- タイトルだけ浮いてしまっていないかを確認。
AFFINGER6はヘッダー周辺も細かくカスタマイズすることができます。
使い方やカスタマイズに関する関連記事も参考にしてみてください。