今回は、このブログでも愛用中のWordPressテーマ「WING（AFFINGER5）」における…
「色設定」の基本的なカスタマイズ手順
をご紹介していきたいと思います
具体的には、ブログデザインにおいて「1番のベース」となる…
- ヘッダーエリア
- フッターエリア
- 背景エリア
この3ヶ所です
ちなみに、「ヘッダーメニュー」の色設定については別途 ↓ にまとめてます♪
-
WING AFFINGER5で「ヘッダーメニューの色設定」をカスタマイズする手順【WordPressブログ】
続きを見る
それではさっそく見ていきましょー🐥
このブログのWordPress環境
- 使用中のテーマ：WING AFFINGER5
- 使用中のエディタ：クラシックエディタ
- 使用中のプラグイン：おすすめプラグイン17選 の記事で公開しています
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^
Contents
【ヘッダー／フッター／背景編】WING AFFINGER5における「色設定」のカスタマイズ手順
まずはカスタマイズ画面を開きましょう
↑ WordPress管理画面 ＞ 外観 ＞ カスタマイズ をクリックします
↑ カスタマイズ画面が開きました
ここから、本題である「ヘッダー」「フッター」「背景」それぞれの色設定をしていきます🐥
ヘッダー色【基本エリア設定 → ヘッダーエリア】
WordPress管理画面 ＞ 外観 ＞ カスタマイズ で、カスタマイズ画面を開けたら…
↑ 画面左側のメニュー一覧から、「基本エリア設定」をクリックします
↑ つづいて「ヘッダーエリア」をクリックすると、ヘッダー色などの設定画面に進めます
ちなみにプレビュー画面で見るとわかる通り、初期設定だとヘッダー色は…
↑ ブルーのグラデーションに設定されています
で、このヘッダー色は「ヘッダーエリア設定」内の…
- 背景色
- 背景色（グラデーション上部）
という2つの項目で、カスタマイズできます
↑ ここです🐥 今回はこの2項目とも…
↑ 真っ白にあたる「#ffffff」に設定してみます。 右側のプレビュー画面を見てみると…
↑ 画面の1番上側エリア（青いバーよりさらに上！）が、真っ白になりました
ただこのままだと、左上に表示されていたブログタイトル（白い文字）と同化して、そのブログタイトルが隠れてしまっている状態です
ということで、次は「ブログタイトルのテキスト色」を変更しましょう
↑ 左側のメニュー一覧から、「サイトタイトルとキャッチフレーズの文字色」という項目で変更できます
ちなみに今回は、ブラック寄りなダークグレー色「#515151」に設定してみます。 改めて右側のプレビューを見ると…
↑ 画面の最上部に、ブログタイトル「あずきの自由帳。」が無事戻ってきました
ヘッダーエリアの基本的な色設定は、これでOKです🐥
ここまでの設定を保存して、実際のブログに反映させたい場合は…
↑ 画面上部の 公開 をクリックしましょう
次の「フッター色設定」に進みたい場合は、同じく画面上部の ＜ をクリックして「基本エリア設定」画面に戻ります
フッター色【基本エリア設定 → フッターエリア】
フッター色も、基本的な流れは同じです
↑ さきほどの「基本エリア設定」から「フッターエリア」をクリックで、フッター設定の画面を開きましょう
↑ さきほどのヘッダー同様、このフッターエリアも初期設定では「青色」のグラデーションになってます
見るべき項目は…
- フッター文字色
- 背景色
- 背景色（グラデーション上部）
この3つです。 実際の画面上だと…
↑ ここ🐥 このフッターエリアも、さきほどのヘッダーと同じように…
↑ 背景色とグラデーションは、真っ白にあたる「#ffffff」
そしてテキスト色は、ダークグレーにあたる「#f515151」に今回は設定してみます
プレビューで確認すると…
↑ 画面下部が、指定したカラーに反映されてます
こちらも、画面上部の 公開 をクリックで保存するのを忘れずに
そして今度は最後の3つ目、「背景色」を見ていきましょう🐥
背景色【基本エリア設定 → 背景色】
1つ前の、「基本エリア設定」画面にまた戻りましょう
↑ メニュー一覧のなかから「背景色」をクリックします
↑「背景色」の設定画面が開きました
プレビュー画面を見るとわかる通り、初期設定の背景カラーは「トップグレー」系の色味です
この背景色を…
↑「背景色」という項目で、好きなカラーに変更しましょう
↑ 試しに一度、「濃いグレー」に変更してみたいと思います
右側のプレビュー画面を見ると…
↑ ガラッと変わりましたね
ちなみに僕のお気に入りな背景カラーは…
↑（初期設定のトップグレーにかなり近いですが）「#f7f7f7」というカラーコードです
ということで好きな背景色を設定できたら、また忘れずに 公開 で保存しましょう
今回の「ヘッダー・フッター・背景の色設定」の解説は、これで以上です
大変お疲れさまでした♪
あずき🐥
関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ
著者
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^