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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

  • STEP.2
    見出しのコードを探す

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

    ※XeoryBaseでは450行目付近にあります。

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

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

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

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

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

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

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

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

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

カスタマイズ内容の確認【色を変えたい場合の補足あり】

作業が完了したらカスタマイズ内容が反映されているか、実際に自分のサイトを確認しておきましょう。

以下のように見出しが変化していればOKです。

これでサイトの印象も変わり、見出しもしっかり目立つようになりました。

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

実際にサイトを確認してみると「えっ?何も変わってないんだけど…。」と、初心者の頃だと焦ることが結構あります。

でも安心して下さい。これは「履歴」が影響しているだけです。

なのでWEBの履歴を1度削除して、もう1度サイトを開いてあげればOK。

こうすることでカスタマイズ前のCSSがリセットされて、置き換えたコードのデザインに切り替わります。

これでも反映されないという場合は、そもそもコードの記述が間違っている可能性があるので、「;」や「}」など細かい部分まで確認するようにしましょう。

補足:カスタマイズした色合いがそうじゃない感がある人へ

今回の内容ではサンプルとして落ち着いた配色のカスタマイズを行いました。

とはいえ、「欲しいのはその色じゃない」という方のために、コードの編集について少し補足をしておきます。

置き換えたコードを見てもらうと「/*〜〜*/」と最後についている場所があり、この前にある「#〇〇〇〇〇〇;」という部分が色を指定しているコードになっています。

この〇〇にあたる部分はカラーコードと呼ばれ、これを変更することで以下の場所の色を好きに変えることが可能です。

  • /*背景色*/:見出し2の背景色を変更できる
  • /*文字色*/:見出し2の文字色を変更できる
  • /*ボーダーカラー*/:見出し3の左のラインの色を変更できる

色の文字列が分からないというかたも[カラーコード]でググれば、色とコードがすぐ出てきますので、この辺は自分で確認しつつやってみてください。

というわけで、今回の内容は以上となります。



2 Comments

アバター 天の川

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

返信する
AMY AMY

天の川 さん

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

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

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

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

返信する

コメントを残す

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

CAPTCHA