基本カラー設定

基本カラーの設定方法をご案内します。

ここでは、背景色などの主要な配色、文字色などを設定できます。

基本となるカラーを設定する

テーマカスタマイザーを開く

WordPressダッシュボードにて「テーマ」→「カスタマイズ」と進みます。

「基本カラー設定」へ進む

「基本カラー設定」をクリックすると、以下の設定項目が表示されます。

基本の文字色

基本となる文字色です。記事エリアなどに適用されます。可読性を損なわないよう、記事の背景色(＝背景色01)とのバランスに気をつけましょう。

基本のリンク色

基本となるリンク色です。記事内のリンクなどに適用されます。ユーザーがリンクだと認識できるよう、基本の文字色とは違う色を指定することをおすすめします。

基本のリンクホバー色

基本のリンクホバー色です。記事内リンクなどがマウスホバーされたときなどの色です。

背景色01

ヘッダーや記事エリアなどの背景色です。文字が読みづらくならないよう、できるだけ彩度の低い色を設定することをおすすめします。

背景色02

コンテンツエリアの背景色です。サイドバーエリアの可読性に影響しますので、こちらも彩度に気をつけつつメインカラー・サブカラーとのバランスを見ながら配色を決めてください。

メインカラー01

ヘッダー最上部のバー、フッターのコピーライト部分の背景色です。全体に占める領域は小さいですが、ブログ全体の印象を決めるカラーとなります。文字が潰れないよう気をつけつつもサブカラーに比べて「強め」の色を設定するといいでしょう。

サブカラー01

フッターSNSアイコンが並ぶエリアの背景色です。メインカラーよりも一段明度を上げるなど、メインカラーに比べ淡い色合いにするとよいでしょう。SNSアイコンが見づらくならないようバランスに気をつけましょう。

サブカラー02

フッターコンテンツ部分の背景色です。サブカラー01よりももう一段弱めのカラーを設定すると収まりがいいと思います。フッターコンテンツが読みづらくならないようにコントラストに気を付けつつ設定しましょう。

柴田竹思

WordPress案件を得意とするWebクリエイター。ベトナム在住。大手企業や教育機関などの大規模制作案件、フリーランス・個人事業主のスタートアップから売上を伸ばしていくお手伝いなど、わりと幅広くWeb関連の仕事をしています。

ヘッダーエリア設定

ロゴ画像の設定