WORDPRESS

【2023年】AFFINGER6「ヘッダー&フッター、全体の背景色」カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.1】

AFFINGER6「ヘッダー&フッター、全体の背景色」カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.1】
 

専業ブロガー6年目のあずき猫です

 

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…

ヘッダー&フッター、全体の背景色

のカスタマイズ設定方法について、ブログ初心者さん向けに1からわかりやすく解説していきます

「ヘッダー」はブログの最上部、「フッター」は最下部エリアのことだよ!
 



 

実際の画面で見ると、まず「ヘッダー背景色」が…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 top-01-a

↓(設定後の一例)

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 top-01-b
 

つづいて「フッター背景色」が…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 top-02-a

↓(設定後の一例)

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 top-02-b
 

そして「全体の背景色」が…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 top-03-a

↓(設定後の一例)

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 top-03-b
 

上記のエリアをそれぞれ指します🐥

 
 
ということで、さっそく見ていこー!
 

▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼

【2023年3月】AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ完全初心者ガイド】

AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ完全初心者ガイド】
【2023年3月】AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ完全初心者ガイド】

続きを見る

  • 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
    画像付きでまるっと解説しています
  • 作業そのものは、正味【15分程度】でおわります(子テーマまで含めて)

インフォトップ ワードプレステーマ売上

公式:ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

※2021年発表Infotop Affidemy

 

【2023年】AFFINGER6「ヘッダー&フッター、全体の背景色」カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.1】

 

注意

当ブログガイドは、WordPressの編集エディタが「グーテンベルグ」ではなく…

クラシックエディタ

の前提で解説しています(圧倒的に使いやすく、またユーザー数も膨大であることから「情報もググりやすい」ので断然おすすめです)

 

そのため、お手元のWordPress環境が…

  • 無料プラグイン「Classic Editor」を有効化していない!
  • 代わりに、AFFINGERに付属の「Gutenbergプラグイン2」を有効化している!

という状態だと、画面のデザインや設定方法が(当ページの内容と)異なる可能性がありますのでご注意ください

 

▼ 「Classic Editor」を有効化する手順 ▼

  1. WordPress管理画面の左側一覧から、 プラグイン > 新規追加 をクリック
  2. 右上の検索フォームに Classic Editor と入力し、表示された「Classic Editor」の インストール > 有効化 を順にクリック 

▼ 「Gutenbergプラグイン2」を停止する手順 ▼

  1. WordPress管理画面の左側一覧から、 プラグイン > インストール済みプラグイン をクリック
  2. 表示された一覧のなかから、「Gutenbergプラグイン2」の「無効化」をクリック
 

関連

「クラシックエディタとグーテンベルグってなに…?」という場合は、こちらで1から解説しています ↓ ※重要です

WordPressクラシックエディタとグーテンベルグとは?Classic Editorの導入方法まで【ワードプレスブログ完全初心者ガイド/第4章/No.6】
WordPressクラシックエディタとグーテンベルグとは?Classic Editorの導入方法まで【ワードプレスブログ完全初心者ガイド/第4章/No.6】

続きを見る

 

まずは、WordPress管理画面の左側一覧から…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 1-top-01

↑ 外観 > カスタマイズ をクリックして…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 1-top-02

↑ こちらの「カスタマイズ」設定画面を開きます

ここから、「ヘッダー・フッター・全体」の順に背景色をカスタマイズしていくよ!
 

ACTION AFFINGER6における「ヘッダー背景色設定」のカスタマイズ方法

WordPress ヘッダー b-01

WordPressの「カスタマイズ」設定画面を開いたら、そのなかの左側一覧から…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 1-1-01-a

↑「基本エリア設定」というタブをクリックして、さらに…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 1-1-01-b

↑「ヘッダーエリア」というタブをクリックしましょう

「headerエリア」ではなく「ヘッダーエリア」の方なので気をつけよう!
 

ACTION AFFINGER6では、初期状態で「ヘッダー背景色」が…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 1-1-02

↑ このようなブルー系に設定されています(赤枠で囲ったエリアです)

 

で、このヘッダー背景色については…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 1-1-03-a

↑ こちらの…

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

という2項目で設定することができます

 

今回は例として…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 1-1-03-b

↑ このように、2つとも真っ白(#ffffff)の背景色に設定してみますね

#●●●●●●は、色ごとの「カラーコード」だよ!
 

中央のプレビュー画面を改めて見てみると…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 1-1-04

↑ ヘッダー(最上部)エリアの背景色が、真っ白に変更されました

 

ちなみに、このヘッダーエリアのすぐ下にある…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 1-1-05

↑ こちらの【横長型のバー】は、ヘッダーではなく「ヘッダーメニュー」というエリアになります

おすすめ記事とかをピックアップしておける場所だね
 
 

注意

上の例のようにヘッダー背景色を「白」などにする場合、左上の「サイトタイトル」が同化して隠れてしまうので…

サイトタイトル&キャッチフレーズの文字色

も、あわせて変更する必要があります(PC用・スマホ用で、それぞれ設定します!)

 

左上の < ボタンから、2つ前の「カスタマイズ」TOPページまで一旦戻り…

ロゴ画像 / サイトのタイトル

というタブを開いたなかの…

  • PC画面用 → 「サイトタイトルとキャッチフレーズの文字色」
  • スマホ画面用 → 「スマホヘッダーのタイトル色」

という項目で、それぞれ設定できます(画像つきの解説は、下記の記事をどうぞ)

AFFINGER6「サイトタイトルの文字色」カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.2】
【2023年】AFFINGER6「サイトタイトルの文字色」カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.2】

続きを見る

 

上記の注意点をふまえて「サイトタイトル」の文字色も変更してみた結果、今回の例では…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 1-1-06

↑ このようなヘッダー配色になりました(カラーコードは下記の通り)

  • 背景色 → #ffffff
  • ブログタイトルの文字色 → #515151
あんまり色をたくさん使うとガチャガチャして見えるから、個人的にはこのくらいシンプルな配色がおすすめ!
 

ということで、最後に「公開」ボタンをクリックしたら「ヘッダー背景色設定」のカスタマイズはこれで完了です🐥

 

このまま作業を続けられる場合は、左上の < ボタンで1つ前の「基本エリア設定」という画面に戻っておくと、このあとの手順がスムーズです

 
 

ACTION AFFINGER6における「フッター背景色設定」のカスタマイズ方法

WordPress ヘッダー b-02

「フッター背景色設定」のカスタマイズ方法も、要領自体は一緒なので簡単です

 

「カスタマイズ」設定画面から「基本エリア設定」を開いたら…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 1-2-01

↑ 今度は「フッターエリア」というタブをクリックし、フッター設定の画面を開きましょう

 

ACTION AFFINGER6では、初期状態で「フッター背景色」が…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 1-2-02

↑ さきほどのヘッダーエリアと同じ、ブルー系に設定されています

画面の一番下側のとこだね!
 

ここで見るべき項目は…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 1-2-03-a

↑ こちらの…

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

という3点です

 

今回は例として、それぞれ…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 1-2-03-b

↑ こちらの配色に設定してみます(カラーコードは下記の通りです)

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

中央のプレビューで見てみると…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 1-2-04

↑ このように反映されました

 

ということで、また左上の「公開」ボタンをクリックしたら「フッター背景色設定」のカスタマイズもOKです🐥

最後に「全体の背景色設定」をカスタマイズしていくよ!
 

ACTION AFFINGER6における「全体の背景色設定」のカスタマイズ方法

WordPress ヘッダー b-03

同じく「カスタマイズ」設定画面から「基本エリア設定」をクリックして…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 1-3-01

↑ 今度は「背景色」というタブをクリックしましょう

 

ACTION AFFINGER6では、初期状態で「全体の背景色」が…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 1-3-02

↑ このような薄いグレー系に設定されています(白い部分を除いたエリアです)

 

で、この「全体の背景色」は…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 1-3-03

↑ こちらの「背景色」という項目で、任意のカラーに変更可能です

背景を柄デザインにしたい場合は、その下の「サブ背景色」「背景のスタイル」も使うよ!
 

ここではあえて「極端な例」として、一旦…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 1-3-04

↑ このような黒の色味にしてみました

 

一度こうして色味をガラッと変えてみることで、【実際に反映されるエリア】が一発で把握できますね

 

補足

画面中央の「白いままになっているエリア」については、「カスタマイズ」TOPから…

基本エリア設定 > mainエリア(記事)

にある、「背景色」という項目で設定できます

 

ちなみに、この「全体の背景色」で個人的におすすめなカラーは…

  • #ffffff(真っ白)
  • #f7f7f7(薄いグレー)

あたりで、今回は実際に自分もよく使っている…

AFFINGER6「ヘッダー・フッター・全体の背景色設定」のカスタマイズ方法 1-3-05

↑ 真っ白(#ffffff)に設定してみました

 

ということで、最後にまた「公開」ボタンを忘れずにクリックしたら、「全体の背景色設定」のカスタマイズも完了となります🐥

お疲れさま!
 

人気記事

 

あずきのワードプレスブログ「完全初心者」ガイド!

「全8章」の総合TOPページです

あずきのワードプレスブログ「完全初心者」ガイド

 

あずき猫 - Azuki Cat

猫です / 独立6年目の専業ブロガー / アパレル歴10年 / Twitterでは、ブログに限らず「色々うまくいかへん…」「どないしよ…」というときのための、本質的な思考を発信しています。ミァー!!!

\ 当ブログで愛用してます /

ACTION AFFINGER6 バナー 01-300px

 

インフォトップ ワードプレステーマ売上

ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

 

公式:ACTION AFFINGER6

関連:WordPressテーマ選びのチェック項目5つ+超重要な「核心」1つ【失敗しない本当におすすめなテーマの選び方】

※2021年発表Infotop Affidemy

当サイトでは、このサイト経由で商品やサービスを購入・契約していただくことで当サイトに紹介料が入る【アフィリエイトリンク】を使用しております

これは私(あずき猫)にとってのサイト運営というものが「1つの事業」であり、必要経費はもちろんのこと、それ以上に「膨大な時間やエネルギー」を費やしているためですが、ただ惜しむらくは当該システムを使用していることによる読者様にとってのメリットは特段ないという点です

せめてもの思いとして、こうして得られた紹介料を糧に「読者様のお役に立てる記事作り」「価値のあるコンテンツ制作」に一層努めていく所存ですので、何卒ご理解のほどお願い申し上げます

当サイトでは可能な限り正確な情報を掲載するよう努めておりますが、必ずしもその正確性を保証するものではありません

読者様におかれましては、当サイトをあくまでも主観的な情報の1つとして捉えていただき、「客観的、俯瞰的な視点」をもって活用していただければ幸いです

少しでも参考になりましたら、
\ シェアしていただけると励みになります!! /

-WORDPRESS