【STINGER8】ヘッダーとフッターの色をカスタマイズする方法

ヘッダーやフッターは色を変更することで、サイトのイメージを変えることができます。
しかしコードに慣れていないと、なかなか変更の仕方が難しいです。
そこでこの記事では、ワードプレスのテーマ「STINGER8」のヘッダーとフッターの色を変更するカスタマイズ方法を解説していきます。




編集場所の確認

デザインを編集する場合は、基本CSSファイルを編集していきます。
下記の手順でスタイルシートを開いて下さい。

①管理画面の「外観」>「テーマの編集」を選択。
②テーマファイルの中の「スタイルシート(style.css)」を選択。

これでスタイルシートが表示されました。
編集するテーマは子テーマ(STINGER8 Child)となるので、ここだけ間違えないようにして下さい。
※カスタマイズ前は必ずバックアップを取るようにして下さい。

ヘッダーの色のカスタマイズ

ヘッダーの色の変更を行います。
ここでは下の画像のように、ヘッダーの色を変更していきます。

先ほど開いたスタイルシートの最下部に下記のコードを追記します。

/*– ヘッダー –*/

#headbox-bg {
background: #13acca;
}

これでヘッダーの色が変更されました。
オレンジの部分のカラーコードを変更することで、好きな色を設定できます。

フッターの色のカスタマイズ

次にフッターの色のカスタマイズです。
フッターは色を変更する部分が4つあるため、各部分ごとに画像を添えて変更していきます。

フッターの背景色

まずはフッターの背景色のカスタマイズです。
先ほどヘッダーを編集したスタイルシートの下に下記のコードを追記します。

/*– フッター –*/

footer {
background: #878C94; /* フッターの背景色 */
}

これでフッターの色が変更できました。
オレンジの部分のカラーコードを変更することで、好きな色を設定できます。

メニューの文字色

次にメニューの文字色の変更です。
ここはメニューを設置している場合のみ変更が必要となる部分となります。

#footer .footermenust a{
color: #fff  !important; /* メニューの文字色 */
}

これでメニューの文字色が変更できました。
オレンジの部分のカラーコードを変更することで、好きな色を設定できます。

フッタータイトルの色

フッタータイトルの文字色の変更です。

p.footerlogo{
color: #fff; /* フッタータイトルの色 */
}

これでタイトルの色が変更できました。
オレンジの部分のカラーコードを変更することで、好きな色を設定できます。

コピーライトの文字色

最後にコピーライトの文字色の変更です。

p.copy{
color:#fff !important; /* コピーライトの色 */
}

これでコピーライトの色が変更できました。
オレンジの部分のカラーコードを変更することで、好きな色を設定できます。

以上でヘッダーとフッターの色のカスタマイズは完了となります。
ベースとなるCSSはコピペでできますので、カラーコードを変更しながらご自身のサイトイメージにあった色への変更を試してみて下さい。

オススメ【簡単すぎる】アプリ紹介する場合にキレイにリンクを貼る方法【アプリーチが便利です】

オススメ【初心者向け】ゲームブログを収益化する方法+運営のコツを解説



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA