AFFINGER7でサイトタイトルの文字色を変更したいけれど、どこで設定すればいいのか分からない…。
このようなお悩みはありませんか？
サイトタイトルは、訪問者が最初に目にする大切な部分です。
背景色とのバランスが悪いと文字が見えづらくなり、サイト全体の印象にも影響します。
AFFINGER7なら、CSSを編集しなくても管理画面から簡単にサイトタイトルの色を変更できます。
この記事では、
- サイトタイトルの色を変更する方法
- 色が変更できないときの対処法
- 見やすい配色のポイント
- おすすめの文字色
まで、初心者にも分かりやすく解説します。
※ この記事はAFFINGER6時代に作成した内容をAFFINGER7対応版として更新しています。
こちらの赤枠の部分です。
AFFINGER7でサイトタイトルの色を変更する手順
手順① 「外観」→「カスタマイズ」を選択
WordPressのメニューから「外観」→「カスタマイズ」を選択します。
手順② 「ヘッダーナビゲーション」を選択
メニュー項目から「ヘッダーナビゲーション」を選択します。
手順③ 「パソコン」or「スマホ」を選択
「パソコン」もしくは「スマホ」の変更したい方を選択します。
この記事では「パソコン」の方で説明していきますが、変更方法は同じです。
※ 「パソコン」と「スマホ」の両方で色を反映したい場合は両方で設定する必要があります。
手順④ サイトタイトルの色を変更
「サイトのタイトルとキャッチフレーズ」でタイトルの色を変更することができます。
色を変更するとこんな感じです。
サイトタイトルを見やすくするおすすめ配色
文字色は背景との組み合わせが重要です。
| ヘッダー背景 | おすすめ文字色 |
|---|---|
| 白 | 黒・濃いグレー |
| 黒 | 白 |
| ネイビー | 白 |
| 緑 | 白 |
| ブラウン | 白 |
| 淡いグレー | 黒 |
背景とのコントラストを大きくすると、読みやすくなります。
サイトジャンル別のおすすめカラー
テーマに合わせて色を選ぶと、サイト全体に統一感が生まれます。
| ジャンル | おすすめカラー |
|---|---|
| ブログ | ブルー |
| 企業サイト | ネイビー |
| 美容室・サロン | ピンク |
| カフェ | ブラウン |
| 農業 | グリーン |
| クリニック | ブルー |
無理に目立たせるよりも、落ち着いた色を選ぶ方が読みやすくなります。
サイトタイトルの色が変更できない原因
設定しても色が変わらない場合は、次のポイントを確認してみましょう。
キャッシュが残っている
ブラウザやキャッシュ系プラグインの影響で、変更が反映されないことがあります。
以下を試してください。
- スーパーリロード
- キャッシュ削除
- ブラウザを再読み込み
公開ボタンを押していない
カスタマイズ画面では、変更内容は「公開」を押すまで反映されません。
設定後は必ず公開ボタンをクリックしましょう。
よくある質問
AFFINGER7とAFFINGER6で設定方法は同じですか？
基本的な設定場所は同じです。
バージョンによって名称が多少異なる可能性があります。
スマホだけ色が違って見えます
カスタマイズでＰＣとスマホを別々に設定する必要があります。
また、ブラウザのキャッシュや表示設定が影響していることがあります。
キャッシュを削除して再確認してください。
CSSを使わなくても変更できますか？
はい。
AFFINGER7なら管理画面から簡単に変更できます。
元の色に戻せますか？
いつでもカスタマイズ画面から変更できます。
まとめ
AFFINGER7では、サイトタイトルの文字色を管理画面から簡単に変更できます。
見やすい配色にすることで、サイト全体の印象や読みやすさが向上します。
今回ご紹介したポイントを参考に、自分のサイトに合った色を設定してみてください。
\\ 収益化に強い圧倒的人気テーマ！//
AFFINGER7がついにリリース！
AFFINGER6から更に機能がパワーアップ！
※ AFFINGER6は現在、AFFINGER7へと移行となりました。