WordPress

WING(AFFINGER5)で「ヘッダー・フッター・背景」の色設定をカスタマイズする方法

Webサイトを制作していると、自分好みにカスタマイズをしたくなってきます。

今回は色の設定をカスタマイズする方法を紹介していきます。

ヘッダーエリアの色設定方法

外観 > カスタマイズ > 基本エリア設定 > ヘッダーエリア

サイト上部のライン


サイト上部のラインを赤色にして、【ラインの横幅を100%にする】のチェックを外します。

すると、下図のようになります。

サイト上部のラインが赤色に変わって、ラインの横幅がサイトの幅と同じになります。
『ラインの高さ(px)』はラインの太さが変わります。

ヘッダーの背景色


ヘッダー背景色を赤色、グラデーション上部を青色
【ヘッダー背景の横幅を100%にする】のチェックを外し、【グラデーションを横向きにする】にチェックを入れます。

すると下図のようになります。

ヘッダーの背景の幅がサイトの幅と同じになります。
そして、赤から青に横グラデーションが入ります。

ヘッダーカードエリアの色設定方法

外観 > カスタマイズ > 基本エリア設定 > ヘッダーカードエリア


ここの色を変更して『ヘッダーカードエリア』の色を変更します。

header以下のエリアの色設定方法

外観 > カスタマイズ > 基本エリア設定 > header以下のエリア


ここの色を変更して『header以下のエリア』の色を変更します。

mainエリア(記事)の色設定方法

外観 > カスタマイズ > 基本エリア設定 > mainエリア(記事)

mainエリアの枠線が【周りのボーダー】です。


ここの色を変更して『mainエリア(記事)』の色を変更します。

サイドバーの色設定方法

外観 > カスタマイズ > 基本エリア設定 > サイドバー

サイドバーの背景色と文字の色の設定です。


ここの色を変更して『サイドバー』の色を変更します。

フッターエリアの色設定方法

外観 > カスタマイズ > 基本エリア設定 > フッターエリア


フッター文字色を赤色、背景色を緑色、背景色(グラデーション上部)を青色
【フッターの背景色を100%にする】のチェックを外し、【グラデーションを横向きにする】にチェックを入れます。

すると下図のようになります。

フッターの背景の幅がサイトの幅と同じになります。
そして、緑から青に横グラデーションが入り、文字が赤色になります。

記事一覧の区切りボーダーの色設定方法

外観 > カスタマイズ > 基本エリア設定 > 記事一覧の区切りボーダー


ボーダーカラーを青色
【破線にする】のチェックを外します。

すると下図のようになります。

記事一覧の区切りボーダーの色が変わり、破線から実践に変わります。

ページャーとPREV NEXTリンクの色設定方法

外観 > カスタマイズ > 基本エリア設定 > ページャーとPREV NEXTリンク


ここの色を変更して『ページャーとPREV NEXTリンク』の色を変更します。


地道に色々試せばわかるんですが、専門用語もあり解りにくいです。

今回は自分への備忘録も兼ねて紹介しました。

-WordPress
-

© 2023 Junction Powered by AFFINGER5