ヘッダーやフッターは色を変更することで、サイトのイメージを変えることができます。
しかしコードに慣れていないと、なかなか変更の仕方が難しいです。
そこでこの記事では、ワードプレスのテーマ「STINGER8」のヘッダーとフッターの色を変更するカスタマイズ方法を解説していきます。
スポンサーリンク
編集場所の確認
デザインを編集する場合は、基本CSSファイルを編集していきます。
下記の手順でスタイルシートを開いて下さい。
②テーマファイルの中の「スタイルシート（style.css）」を選択。
これでスタイルシートが表示されました。
編集するテーマは子テーマ（STINGER8 Child）となるので、ここだけ間違えないようにして下さい。
※カスタマイズ前は必ずバックアップを取るようにして下さい。
ヘッダーの色のカスタマイズ
ヘッダーの色の変更を行います。
ここでは下の画像のように、ヘッダーの色を変更していきます。
先ほど開いたスタイルシートの最下部に下記のコードを追記します。
#headbox-bg {
background: #13acca;
}
これでヘッダーの色が変更されました。
オレンジの部分のカラーコードを変更することで、好きな色を設定できます。
フッターの色のカスタマイズ
次にフッターの色のカスタマイズです。
フッターは色を変更する部分が４つあるため、各部分ごとに画像を添えて変更していきます。
フッターの背景色
まずはフッターの背景色のカスタマイズです。
先ほどヘッダーを編集したスタイルシートの下に下記のコードを追記します。
footer {
background: #878C94; /* フッターの背景色 */
}
これでフッターの色が変更できました。
オレンジの部分のカラーコードを変更することで、好きな色を設定できます。
メニューの文字色
次にメニューの文字色の変更です。
ここはメニューを設置している場合のみ変更が必要となる部分となります。
color: #fff !important; /* メニューの文字色 */
}
これでメニューの文字色が変更できました。
オレンジの部分のカラーコードを変更することで、好きな色を設定できます。
フッタータイトルの色
フッタータイトルの文字色の変更です。
color: #fff; /* フッタータイトルの色 */
}
これでタイトルの色が変更できました。
オレンジの部分のカラーコードを変更することで、好きな色を設定できます。
コピーライトの文字色
最後にコピーライトの文字色の変更です。
color:#fff !important; /* コピーライトの色 */
}
これでコピーライトの色が変更できました。
オレンジの部分のカラーコードを変更することで、好きな色を設定できます。
以上でヘッダーとフッターの色のカスタマイズは完了となります。
ベースとなるCSSはコピペでできますので、カラーコードを変更しながらご自身のサイトイメージにあった色への変更を試してみて下さい。
コメントを残す