2020/02/14SHAREツイートシェアはてブGoogle+PocketLINEヘッダーやフッターは色を変更することで、サイトのイメージを変えることができます。コードに慣れていないと、なかなか変更の仕方が難しいです。そこでこの記事では、ワードプレスのテーマ「STINGER8」のヘッダーとフッターの色を変更するカスタマイズ方法を解説していきます。編集場所の確認デザインを編集する場合は、基本CSSファイルを編集していきます。下記の手順でスタイルシートを開いて下さい。1管理画面の「外観」>「テーマの編集」を選択。2テーマファイルの中の「スタイルシート(style.css)」を選択。これでスタイルシートが表示されました。Child)となるので、ここだけ間違えないようにして下さい。※カスタマイズ前は必ずバックアップを取るようにして下さい。ヘッダーの色のカスタマイズヘッダーの色の変更を行います。ここでは下の画像のように、ヘッダーの色を変更していきます。先ほど開いたスタイルシートの最下部に下記のコードを追記します。#13acca;}これでヘッダーの色が変更されました。オレンジの部分のカラーコードを変更することで、好きな色を設定できます。フッターの色のカスタマイズ次にフッターの色のカスタマイズです。フッターは色を変更する部分が4つあるため、各部分ごとに画像を添えて変更していきます。フッターの背景色まずはフッターの背景色のカスタマイズです。先ほどヘッダーを編集したスタイルシートの下に下記のコードを追記します。*/}これでフッターの色が変更できました。オレンジの部分のカラーコードを変更することで、好きな色を設定できます。次にメニューの文字色の変更です。ここはメニューを設置している場合のみ変更が必要となる部分となります。*/}これでメニューの文字色が変更できました。オレンジの部分のカラーコードを変更することで、好きな色を設定できます。フッタータイトルの色フッタータイトルの文字色の変更です。*/}これでタイトルの色が変更できました。オレンジの部分のカラーコードを変更することで、好きな色を設定できます。最後にコピーライトの文字色の変更です。*/}これでコピーライトの色が変更できました。オレンジの部分のカラーコードを変更することで、好きな色を設定できます。以上でヘッダーとフッターの色のカスタマイズは完了となります。ベースとなるCSSはコピペでできますので、カラーコードを変更しながらご自身のサイトイメージにあった色への変更を試してみて下さい。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。