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

この記事は人気テーマ『XeoryBase』の見出しのカスタマイズについての解説です。

Xeoryのテーマは洗練されたシンプルなデザインとなっていますが、見出しを確認するともう少し目立たせたいと考える方も多いでしょう。
そこでこの記事ではXeoryBaseの見出しのカスタマイズを実際に行った作業の流れと共にご紹介します。




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

編集画面へ移動

まずは見出しをカスタマイズする場所へ移動します。
ワードプレス管理画面のサイドバーにある『外観』から『テーマの編集』を選択し、テーマファイルの編集へ移動します。

テーマファイルの中にある『スタイルシート(style.css)』を選択します。
これが見出しの外観をカスタマイズするための編集場所です。

style.cssの編集

〈編集場所を探す〉

まずはstyle.cssの中から編集すべき場所を探します。

450行目付近の『.post-content h2』という部分です。
style.cssの中で1度クリックし『command』+『f』を押すことで検索もできます。
(画像は検索して探したものを使用しています。)

〈見出しのカスタマイズ〉

この記事ではh2とh3をカスタマイズするため、『.post-content h2 {』からh3の最後の『}』までを丸ごと下のコードに置き換えます。

これだけでカスタマイズの作業は完了なので『ファイルを更新』ボタンを押して、変更内容を保存します。

カスタマイズ内容の確認

作業が完了したので実際に作業前と後で見出しが変化しているかを確認していきます。

〈カスタマイズ前〉

〈カスタマイズ後〉

見出しの印象が変わり、見出し2の方は目立つように変更できていることが確認できます。

この記事ではカスタマイズ後も比較的落ち着いた色合いにしていますが、コードの記述にある『色』の項目(#3e3e3e;など)を変更することで好きな色に変更することができますのでカラーコードを調べて変更してみて下さい。
※色を変更する場合はカラーコードの後ろにある『;』も忘れないように記述しておきましょう。

cssをカスタマイズしても反映されない場合

カスタマイズを行っているとリロードしても反映されないことがあります。

コードが間違えていないかの確認は大前提ですが、理由としては『履歴』などが影響していることも考えられます。
この記事でも1度『履歴』を削除してリロードすることで、見出しの変更を反映させました。

コードの確認とWebの履歴の削除は確認しやすいものではあるので、カスタマイズが反映されない場合は試してみて下さい。


2 Comments

天の川

こんにちは!ちょっと質問よろしいでしょうか?
WEBの履歴を消すのはどうやってやるのでしょうか?
コード入れ替えたのですが、反映されないようでして。。。
初心者ですみません。。。よろしくお願い致します。

返信する
AMY AMY

天の川 さん

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

履歴の削除方法はブラウザやバージョンによって多少は異なると思いますが、「Google Chrome」の場合だと…

【①ブラウザを開く→②左上の「Chrome」をクリック→③閲覧履歴を消去】

という手順で削除を行うことができます。
「Safari」などでも同じような操作で削除ができますので試してみて下さい^^

返信する

コメントを残す

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