あずきです🐥
このブログでも愛用中のWordPressテーマ「WING（AFFINGER5）」における…
「色設定」の基本的なカスタマイズ手順
について、ブログ初心者さん向けに1から解説していきます
具体的には、ブログデザインにおいて「1番のベース」となる…
- ヘッダーエリア
- フッターエリア
- 背景エリア
この3ヶ所です
さっそく見ていきましょー🐥
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020
Contents
【ヘッダー／フッター／背景編】WING AFFINGER5における「色設定」のカスタマイズ手順
まずはカスタマイズ画面を開きましょう
↑ WordPress管理画面 ＞ 外観 ＞ カスタマイズ をクリックします
↑ カスタマイズ画面が開きました
ここから、本題である「ヘッダー」「フッター」「背景」それぞれの色設定をしていきます🐥
ヘッダー色【基本エリア設定 → ヘッダーエリア】
WordPress管理画面 ＞ 外観 ＞ カスタマイズ で、カスタマイズ画面を開けたら…
↑ 画面左側のメニュー一覧から、「基本エリア設定」をクリックします
↑ つづいて「ヘッダーエリア」をクリックすると、ヘッダー色などの設定画面に進めます
ちなみにプレビュー画面で見るとわかる通り、初期設定だとヘッダー色は…
↑ ブルーのグラデーションに設定されています
で、このヘッダー色は「ヘッダーエリア設定」内の…
- 背景色
- 背景色（グラデーション上部）
という2つの項目で、カスタマイズできます
↑ ここです🐥 今回はこの2項目とも…
↑ 真っ白にあたる「#ffffff」に設定してみます
右側のプレビュー画面を見てみると…
↑ 画面の1番上側エリア（青いバーよりさらに上！）が、真っ白になりました
ただこのままだと、左上に表示されていたブログタイトル（白い文字）と同化して、そのブログタイトルが隠れてしまっている状態です
ということで、次は「ブログタイトルのテキスト色」を変更しましょう
↑ 左側のメニュー一覧から、「サイトタイトルとキャッチフレーズの文字色」という項目で変更できます
ちなみに今回は、ブラック寄りなダークグレー色「#515151」に設定してみます
改めて右側のプレビューを見ると…
↑ 画面の最上部に、ブログタイトル「あずきの自由帳。」が無事戻ってきました
ヘッダーエリアの基本的な色設定は、これでOKです🐥
ここまでの設定を保存して、実際のブログに反映させたい場合は…
↑ 画面上部の 公開 をクリックしましょう
次の「フッター色設定」に進みたい場合は、同じく画面上部の ＜ をクリックして「基本エリア設定」画面に戻ります
フッター色【基本エリア設定 → フッターエリア】
フッター色も、基本的な流れは同じです
↑ さきほどの「基本エリア設定」から「フッターエリア」をクリックで、フッター設定の画面を開きましょう
↑ さきほどのヘッダー同様、このフッターエリアも初期設定では「青色」のグラデーションになってます
見るべき項目は…
- フッター文字色
- 背景色
- 背景色（グラデーション上部）
この3つです
実際の画面上だと…
↑ ここ🐥 このフッターエリアも、さきほどのヘッダーと同じように…
↑ 背景色とグラデーションは、真っ白にあたる「#ffffff」
そしてテキスト色は、ダークグレーにあたる「#f515151」に今回は設定してみます
プレビューで確認すると…
↑ 画面下部が、指定したカラーに反映されています
こちらも、画面上部の 公開 をクリックで保存するのを忘れずに
そして今度は最後の3つ目、「背景色」を見ていきましょう🐥
背景色【基本エリア設定 → 背景色】
1つ前の、「基本エリア設定」画面にまた戻りましょう
↑ メニュー一覧のなかから「背景色」をクリックします
↑「背景色」の設定画面が開きました
プレビュー画面を見るとわかる通り、初期設定の背景カラーは「トップグレー」系の色味です
この背景色を…
↑「背景色」という項目で、好きなカラーに変更しましょう
↑ 試しに一度、「濃いグレー」に変更してみたいと思います
右側のプレビュー画面を見ると…
↑ ガラッと変わりましたね
ちなみに僕のお気に入りな背景カラーは…
↑（初期設定のトップグレーにかなり近いですが）「#f7f7f7」というカラーコードです
ということで好きな背景色を設定できたら、また忘れずに 公開 で保存しましょう
今回の記事はこちらの章に属しています
全9章のTOPです
＼ 当ブログで愛用しています ／
検証と改善を重ねた唯一無二のテーマ
✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性！
✔ 時間のかかる面倒なカスタマイズも、「クリック1つ」でさくさく実現！
✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能！
今ならプラグイン「すごいもくじLITE」を期間限定で配布中！
※新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます
公式：「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連：【1番の本質】ACTION AFFINGER6って実際どう？気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】
-
【2021年】WordPressのクラシックエディタとグーテンベルグとは？プラグイン「Classic Editor」の導入方法まで1から解説
続きを見る
About me
- 専業ブロガー・フリーランス -
あずき
独立4年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter（@azuki_rinrin）にわりといるので、覗いてもらえると嬉しいです^^