Webサイトを制作していると、自分好みにカスタマイズをしたくなってきます。
今回は色の設定をカスタマイズする方法を紹介していきます。
ヘッダーエリアの色設定方法
外観 > カスタマイズ > 基本エリア設定 > ヘッダーエリア
サイト上部のライン
サイト上部のラインを赤色にして、【ラインの横幅を100%にする】のチェックを外します。
すると、下図のようになります。
サイト上部のラインが赤色に変わって、ラインの横幅がサイトの幅と同じになります。
『ラインの高さ(px)』はラインの太さが変わります。
ヘッダーの背景色
ヘッダー背景色を赤色、グラデーション上部を青色
【ヘッダー背景の横幅を100%にする】のチェックを外し、【グラデーションを横向きにする】にチェックを入れます。
すると下図のようになります。
ヘッダーの背景の幅がサイトの幅と同じになります。
そして、赤から青に横グラデーションが入ります。
ヘッダーカードエリアの色設定方法
外観 > カスタマイズ > 基本エリア設定 > ヘッダーカードエリア
ここの色を変更して『ヘッダーカードエリア』の色を変更します。
header以下のエリアの色設定方法
外観 > カスタマイズ > 基本エリア設定 > header以下のエリア
ここの色を変更して『header以下のエリア』の色を変更します。
mainエリア(記事)の色設定方法
外観 > カスタマイズ > 基本エリア設定 > mainエリア(記事)
mainエリアの枠線が【周りのボーダー】です。
ここの色を変更して『mainエリア(記事)』の色を変更します。
サイドバーの色設定方法
外観 > カスタマイズ > 基本エリア設定 > サイドバー
サイドバーの背景色と文字の色の設定です。
ここの色を変更して『サイドバー』の色を変更します。
フッターエリアの色設定方法
外観 > カスタマイズ > 基本エリア設定 > フッターエリア
フッター文字色を赤色、背景色を緑色、背景色(グラデーション上部)を青色
【フッターの背景色を100%にする】のチェックを外し、【グラデーションを横向きにする】にチェックを入れます。
すると下図のようになります。
フッターの背景の幅がサイトの幅と同じになります。
そして、緑から青に横グラデーションが入り、文字が赤色になります。
記事一覧の区切りボーダーの色設定方法
外観 > カスタマイズ > 基本エリア設定 > 記事一覧の区切りボーダー
ボーダーカラーを青色
【破線にする】のチェックを外します。
すると下図のようになります。
記事一覧の区切りボーダーの色が変わり、破線から実践に変わります。
ページャーとPREV NEXTリンクの色設定方法
外観 > カスタマイズ > 基本エリア設定 > ページャーとPREV NEXTリンク
ここの色を変更して『ページャーとPREV NEXTリンク』の色を変更します。
地道に色々試せばわかるんですが、専門用語もあり解りにくいです。
今回は自分への備忘録も兼ねて紹介しました。