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

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

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

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

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

サイト上部のライン

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

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

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

ヘッダーの背景色

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

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

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

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

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

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

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

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

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

mainエリア（記事）の色設定方法

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

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

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

サイドバーの色設定方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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