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

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

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

スポンサーリンク

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

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

style.cssへの移動

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

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

背景色のカスタマイズ

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

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

ヘッダーのカスタマイズ

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

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

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

#header {
  background: #383838;
  padding: 36px 0 32px;
  border-bottom: 1px solid #efefef;
}
#header #logo {
  float: left;
  font-size: 24px;
}
#header #logo a {
  color: #ffffff;
}

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

ボディのカスタマイズ

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

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

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

body {
  background: #ffffff;
  color: #383838;
}

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

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

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

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

コードが間違っている

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

履歴の影響

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

オススメ【初心者向け】WordPress学習におすすめしたい３冊の本

オススメ【収益化】おすすめのアフィリエイトASP５選【すべて登録でOK】