【WordPress】Xeory Baseの見出しをカスタマイズする方法

「XeoryBaseのテーマを使っているけど、見出しのデザインを変えたい。初心者だから簡単にできる方法を知りたいな。」

こういった方向けの内容です。

XeoryBaseは全体的にシンプルなデザインになっていて、かなり洗練されたテーマです。
とはいえ「見出しだけはもう少し目立たせたい」と考える方も多いでしょう。

そこでこの記事では、XeoryBaseの見出しのカスタマイズ方法について、実際に僕が行った流れを元にお伝えしていきます。

初心者でも簡単に作業できるように、コピペも可能な内容ですので、安心して進めていってください。

Xeory Baseの見出しをカスタマイズする方法
- カスタマイズしたい見出しのコードを探す
- コードを編集して見出しをカスタマイズする
カスタマイズ内容の確認【色を変えたい場合の補足あり】
- CSSをカスタマイズしても反映されない場合は
- 補足：カスタマイズした色合いがそうじゃない感がある人へ

Xeory Baseの見出しをカスタマイズする方法

早速ですが、見出しのカスタマイズを行なっていきます。

ここで行うのは以下の２点だけ。

見出しのコードを探す
見出しのコードの編集

今回行うカスタマイズはデザインのお話なので、「CSS」というコードの編集を行なっていきます。

編集がCSSファイルなのでほぼ問題ないとは思いますが、作業前には念のためバックアップを取っておくようにしましょう。

»参考：【WordPress】バックアップが取れるプラグイン「BackWPup」の設定方法と使い方

というわけで上記内容について、順に解説していきます。

カスタマイズしたい見出しのコードを探す

まずは見出しのコードを探していきます。手順としては以下の２ステップでOKです。

STEP.1
CSSの編集画面へ移動

ワードプレスの管理画面から「外観」→「テーマ編集」を選択し、画面右側のテーマファイルの中にある「スタイルシート（style.css）」を選択します。
STEP.2
見出しのコードを探す

スタイルシートのコードの中から「.post-content h2」というコードを探します。

※XeoryBaseでは４５０行目付近にあります。

style.cssの中で１度クリックし『command』+『f』を押すことで検索もできます。
（画像は検索して探したものを使用しています。）

この部分が見出しのコードとなっていて、対応する見出しは「.post-content h2＝見出し２」「.post content h3＝見出し３」といった感じです。

編集したい見出しのコードの数字を間違えないように注意しましょう。

というわけでここから、「見出しの２と３」を例に実際にカスタマイズを行なっていきます。

コードを編集して見出しをカスタマイズする

ここからコードを置き換える形で、見出しのカスタマイズを行います。

今回はサンプルとして「見出し２・見出し３」の編集を行うので、置き換える部分は以下ですね。

この「.post-content h2{ 」からh3の最後の「padding: 0 13px;}」までを丸ごと以下のコードに置き換えましょう。

.post-content h2 {
  padding: 5px;
  padding-left: 0.6em;
  clear: both;
  background-color: #3e3e3e;/*背景色*/
  color: #ffffff;/*文字色*/
}
.post-content h3 {
  clear: both;
  border-left: 3px solid #3e3e3e;/*ボーダーカラー*/
  padding: 0 13px;
}

これで「ファイルを更新」をクリックすればカスタマイズは完了です。