あずきです🐥
このブログでも愛用中のWordPressテーマ「WING（AFFINGER5）」における…
「色設定」の基本的なカスタマイズ手順
について、ブログ初心者さん向けに1から解説していきます
具体的には、ブログデザインにおいて「1番のベース」となる…
- ヘッダーエリア
- フッターエリア
- 背景エリア
この3ヶ所です
さっそく見ていきましょー🐥
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました！
・わかりやすかったです！みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020
目次
【ヘッダー／フッター／背景編】WING AFFINGER5における「色設定」のカスタマイズ手順
まずはカスタマイズ画面を開きましょう
↑ WordPress管理画面 ＞ 外観 ＞ カスタマイズ をクリックします
↑ カスタマイズ画面が開きました
ここから、本題である「ヘッダー」「フッター」「背景」それぞれの色設定をしていきます🐥
ヘッダー色【基本エリア設定 → ヘッダーエリア】
WordPress管理画面 ＞ 外観 ＞ カスタマイズ で、カスタマイズ画面を開けたら…
↑ 画面左側のメニュー一覧から、「基本エリア設定」をクリックします
↑ つづいて「ヘッダーエリア」をクリックすると、ヘッダー色などの設定画面に進めます
ちなみにプレビュー画面で見るとわかる通り、初期設定だとヘッダー色は…
↑ ブルーのグラデーションに設定されています
で、このヘッダー色は「ヘッダーエリア設定」内の…
- 背景色
- 背景色（グラデーション上部）
という2つの項目で、カスタマイズできます
↑ ここです🐥 今回はこの2項目とも…
↑ 真っ白にあたる「#ffffff」に設定してみます
右側のプレビュー画面を見てみると…
↑ 画面の1番上側エリア（青いバーよりさらに上！）が、真っ白になりました
ただこのままだと、左上に表示されていたブログタイトル（白い文字）と同化して、そのブログタイトルが隠れてしまっている状態です
ということで、次は「ブログタイトルのテキスト色」を変更しましょう
↑ 左側のメニュー一覧から、「サイトタイトルとキャッチフレーズの文字色」という項目で変更できます
ちなみに今回は、ブラック寄りなダークグレー色「#515151」に設定してみます
改めて右側のプレビューを見ると…
↑ 画面の最上部に、ブログタイトル「あずきの自由帳。」が無事戻ってきました
ヘッダーエリアの基本的な色設定は、これでOKです🐥
ここまでの設定を保存して、実際のブログに反映させたい場合は…
↑ 画面上部の 公開 をクリックしましょう
次の「フッター色設定」に進みたい場合は、同じく画面上部の ＜ をクリックして「基本エリア設定」画面に戻ります
フッター色【基本エリア設定 → フッターエリア】
フッター色も、基本的な流れは同じです
↑ さきほどの「基本エリア設定」から「フッターエリア」をクリックで、フッター設定の画面を開きましょう
↑ さきほどのヘッダー同様、このフッターエリアも初期設定では「青色」のグラデーションになってます
見るべき項目は…
- フッター文字色
- 背景色
- 背景色（グラデーション上部）
この3つです
実際の画面上だと…
↑ ここ🐥 このフッターエリアも、さきほどのヘッダーと同じように…
↑ 背景色とグラデーションは、真っ白にあたる「#ffffff」
そしてテキスト色は、ダークグレーにあたる「#f515151」に今回は設定してみます
プレビューで確認すると…
↑ 画面下部が、指定したカラーに反映されています
こちらも、画面上部の 公開 をクリックで保存するのを忘れずに
そして今度は最後の3つ目、「背景色」を見ていきましょう🐥
背景色【基本エリア設定 → 背景色】
1つ前の、「基本エリア設定」画面にまた戻りましょう
↑ メニュー一覧のなかから「背景色」をクリックします
↑「背景色」の設定画面が開きました
プレビュー画面を見るとわかる通り、初期設定の背景カラーは「トップグレー」系の色味です
この背景色を…
↑「背景色」という項目で、好きなカラーに変更しましょう
↑ 試しに一度、「濃いグレー」に変更してみたいと思います
右側のプレビュー画面を見ると…
↑ ガラッと変わりましたね
ちなみに僕のお気に入りな背景カラーは…
↑（初期設定のトップグレーにかなり近いですが）「#f7f7f7」というカラーコードです
ということで好きな背景色を設定できたら、また忘れずに 公開 で保存しましょう
今回の記事はこちらの章に属しています
＼ 本気で成果にこだわるなら ／
―― 効果のある広告やリンクを徹底解析 ――
「AFFINGERタグ管理マネージャー3 + PVモニター」
プラグインセット
✔ 広告やリンクの「表示回数・クリック数・クリックされたページ・日時」などを自動計測！
✔ アフィリエイトコードやよく使う文章などを、テンプレート（ショートコード）化できる！
✔ 元データの修正だけで全ての挿入箇所に「一括反映」されるため、広告の差し替えも一瞬！
「WING AFFINGER5」及び「WING STINGER PRO2」専用プラグイン
※「STINGERタグ管理プラグイン3」のデータはそのまま使用できます
About me
- 専業ブロガー・フリーランス -
あずき
独立4年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter（@azuki_rinrin）にわりといるので、覗いてもらえると嬉しいです^^