【Xeory Base】ヘッダーの背景色とボディ(記事周りの背景)をカスタマイズする方法

ワードプレスで人気のテーマ『Xeory Base』ですが、使っている人が多い分オリジナル性に欠けてしまう部分があります。
それならせめて記事の周囲の色だったり、ヘッダーの文字や背景の色を変えたいと考えた方も多いと思います。

そこで今回の記事は背景色のカスタマイズです。
初心者の方でもコピペでカスタマイズができるように解説していきます。




編集するファイルはstyle.css

この記事で焦点を当てている『ヘッダー(header)』と『ボディ(body)』ですが、色を変更するだけなので『style.css』というファイルの編集のみでカスタマイズすることができます。

style.cssへの移動

まずは編集を行うためにスタイルシートへ移動します。

style.cssへの移動
管理画面から『外観』の『テーマの編集』へ移動。
テーマファイルから『スタイルシート』を選択。

これでカスタマイズの準備は整いました。
※カスタマイズは念のためバックアップを取ってから作業をすることをオススメします。

背景色のカスタマイズ

ここから実際にカスタマイズに入ります。
まずはイメージが湧きやすいように、カスタマイズ後の状態もお見せしておきます。

左が変更前のXeory Baseの標準の配色、右が変更後のカスタマイズした配色です。
それではこのカスタマイズを、2箇所に分けて行っていきます。

ヘッダーのカスタマイズ

まずはヘッダーのカスタマイズです。
ヘッダーはタイトルが表示されているサイトの上の部分です。

初期状態では背景色が『白』、文字色が『濃いグレー』となっています。
ここの色を変更して保存することで、ヘッダーの色をカスタマイズすることができます。

今回は先ほどのイメージの通りに変更するので、上の画像の『置き換える部分』をそのまま下のコードに置き換えてみて下さい。

置き換えた後で『ファイルを更新』ボタンをクリックすることで、ヘッダーのカスタマイズが完了します。

ボディのカスタマイズ

次はボディのカスタマイズです。
ボディの背景色を変更することで、記事の周囲全体の色を変えることができます。

初期状態では背景色が『薄いグレー』となっています。
この部分の色を変更することでカスタマイズができます。

こちらもイメージの通りに変更するので、上の画像の『置き換える部分』をそのまま下のコードに置き換えてみて下さい。

置き換えた後で『ファイルを更新』ボタンをクリックすることで、ボディのカスタマイズが完了します。

これでヘッダーとボディの2箇所の背景色のカスタマイズは完成です。

ファイルを更新しても反映されていない場合

今回のカスタマイズにおいて反映されない場合、主な原因は2つです。

コードが間違っている
単純にコードの記述ミスによるものです。
入力した『#~~~~~~』の後に『;』を付いているかも確認しましょう。

履歴の影響
Webの閲覧履歴の影響で、前に読み込んだcssのまま表示されてしまう時があります。
この場合は履歴を1度削除して確認してみると反映されます。


2 Comments

れおいち

お世話になります。
いつも助けていただき、ありがとうございマス!
下記のコードですが、ヘッダーの色が変わりません。
どうしたら良いでしょうか??
あと、横についているビックリマークは何でしょうか?
body.color04 #header{
background: #fc8a8c;
padding: 36px 0 32px;
border-bottom: 1px solid #efefef;
}
#header #logo {
float: left;
font-size: 24px;
}
#header #logo a {
 color: #383838;
}

返信する
AMY AMY

れおいち さん

コメントありがとうございます!

「body.color04」のカラースキームを変更されているようなのでこちらでも試してみましたが、確かに私の方もヘッダーの色は変わりませんでした。
背景の色を変更したいのであれば記事内の「ヘッダーのカスタマイズ」にあるように、スタイルシートの190行目付近にある

#header {
background: #fff;
padding: 36px 0 32px;
border-bottom: 1px solid #efefef;
}

の「background: #fff;」という部分のカラーコードを編集してみて下さい。
これでヘッダーの背景色を変更することができますよ^^

ちなみにビックリマークについてですが、これはワードプレスのエラーチェック機能の影響です。
「×」は問題ですが「!」であれば特に気にする必要はないようです♪

返信する

コメントを残す

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