ワードプレス

WING AFFINGER5で「ヘッダー・フッター・背景」の色設定をカスタマイズする手順【WordPressブログ】

affinger-color-setting-base-202002_ec



今回は、このブログでも愛用中のWordPressテーマ「WING(AFFINGER5)」における…

「色設定」の基本的なカスタマイズ手順

をご紹介していきたいと思います

具体的には、ブログデザインにおいて「1番のベース」となる…

  • ヘッダーエリア
  • フッターエリア
  • 背景エリア

この3ヶ所です

ちなみに、「ヘッダーメニュー」の色設定については別途 ↓ にまとめてます♪

affinger-color-setting-header-menu-202002-ec
WING AFFINGER5で「ヘッダーメニューの色設定」をカスタマイズする手順【WordPressブログ】

続きを見る

3分でおわるよ

それではさっそく見ていきましょー🐥

このブログのWordPress環境

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

【ヘッダー/フッター/背景編】WING AFFINGER5における「色設定」のカスタマイズ手順

まずはカスタマイズ画面を開きましょう

affinger-color-setting-base-202002_top-01

↑ WordPress管理画面 > 外観 > カスタマイズ をクリックします

affinger-color-setting-base-202002_top-02

↑ カスタマイズ画面が開きました

左側が「メニュー一覧」で、その右側が「プレビュー画面」だよ

ここから、本題である「ヘッダー」「フッター」「背景」それぞれの色設定をしていきます🐥

ヘッダー色【基本エリア設定 → ヘッダーエリア】

pc-work-202001_01

WordPress管理画面 > 外観 > カスタマイズ で、カスタマイズ画面を開けたら…

affinger-color-setting-base-202002_1-01

↑ 画面左側のメニュー一覧から、「基本エリア設定」をクリックします

affinger-color-setting-base-202002_1-02

↑ つづいて「ヘッダーエリア」をクリックすると、ヘッダー色などの設定画面に進めます

「headerエリア」の方ではないよ!(ややこしい)

ちなみにプレビュー画面で見るとわかる通り、初期設定だとヘッダー色は…

affinger-color-setting-base-202002_1-03

↑ ブルーのグラデーションに設定されています

↑ 1番上側の、「あずきの自由帳。」って表示されてる場所がヘッダーエリア!

で、このヘッダー色は「ヘッダーエリア設定」内の…

  • 背景色
  • 背景色(グラデーション上部)

という2つの項目で、カスタマイズできます

affinger-color-setting-base-202002_1-04

↑ ここです🐥 今回はこの2項目とも…

affinger-color-setting-base-202002_1-05

↑ 真っ白にあたる「#ffffff」に設定してみます。 右側のプレビュー画面を見てみると…

affinger-color-setting-base-202002_1-06

↑ 画面の1番上側エリア(青いバーよりさらに上!)が、真っ白になりました

ただこのままだと、左上に表示されていたブログタイトル(白い文字)と同化して、そのブログタイトルが隠れてしまっている状態です

ということで、次は「ブログタイトルのテキスト色」を変更しましょう

affinger-color-setting-base-202002_1-07

↑ 左側のメニュー一覧から、「サイトタイトルとキャッチフレーズの文字色」という項目で変更できます

ちなみに今回は、ブラック寄りなダークグレー色「#515151」に設定してみます。 改めて右側のプレビューを見ると…

affinger-color-setting-base-202002_1-08

↑ 画面の最上部に、ブログタイトル「あずきの自由帳。」が無事戻ってきました

ヘッダーエリアの基本的な色設定は、これでOKです🐥

ここまでの設定を保存して、実際のブログに反映させたい場合は…

affinger-color-setting-base-202002_1-09

↑ 画面上部の 公開 をクリックしましょう

次の「フッター色設定」に進みたい場合は、同じく画面上部の  をクリックして「基本エリア設定」画面に戻ります

つづいて、フッター色も同じように見ていくよ

フッター色【基本エリア設定 → フッターエリア】

pc-work-202001_02

フッター色も、基本的な流れは同じです

affinger-color-setting-base-202002_2-01

↑ さきほどの「基本エリア設定」から「フッターエリア」をクリックで、フッター設定の画面を開きましょう

affinger-color-setting-base-202002_2-02

↑ さきほどのヘッダー同様、このフッターエリアも初期設定では「青色」のグラデーションになってます

↑ 画面一番下の、青いところ全体がフッターエリア!

見るべき項目は…

  • フッター文字色
  • 背景色
  • 背景色(グラデーション上部)

この3つです。 実際の画面上だと…

affinger-color-setting-base-202002_2-03

↑ ここ🐥 このフッターエリアも、さきほどのヘッダーと同じように…

affinger-color-setting-base-202002_2-04

↑ 背景色とグラデーションは、真っ白にあたる「#ffffff」

そしてテキスト色は、ダークグレーにあたる「#f515151」に今回は設定してみます

プレビューで確認すると…

affinger-color-setting-base-202002_2-05

↑ 画面下部が、指定したカラーに反映されてます

こちらも、画面上部の 公開 をクリックで保存するのを忘れずに

そして今度は最後の3つ目、「背景色」を見ていきましょう🐥

背景色【基本エリア設定 → 背景色】

pc-work-202001_03

1つ前の、「基本エリア設定」画面にまた戻りましょう

affinger-color-setting-base-202002_3-01

↑ メニュー一覧のなかから「背景色」をクリックします

affinger-color-setting-base-202002_3-02

↑「背景色」の設定画面が開きました

プレビュー画面を見るとわかる通り、初期設定の背景カラーは「トップグレー」系の色味です

この背景色を…

affinger-color-setting-base-202002_3-03

↑「背景色」という項目で、好きなカラーに変更しましょう

affinger-color-setting-base-202002_3-04

↑ 試しに一度、「濃いグレー」に変更してみたいと思います

右側のプレビュー画面を見ると…

affinger-color-setting-base-202002_3-05

↑ ガラッと変わりましたね

一度こうやって濃い色味にしてみると、具体的な背景エリアが把握できるよ

ちなみに僕のお気に入りな背景カラーは…

affinger-color-setting-base-202002_3-06

↑(初期設定のトップグレーにかなり近いですが)「#f7f7f7」というカラーコードです

ということで好きな背景色を設定できたら、また忘れずに 公開 で保存しましょう

カスタマイズ画面を閉じるときは、左上の × をクリック!

今回の「ヘッダー・フッター・背景の色設定」の解説は、これで以上です

大変お疲れさまでした♪

あずき🐥

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-ワードプレス

© 2020 あずきのぶろぐ。