Xeory Base はとても良いワードプレスのテーマだと思います。無料だし、使い勝手もいいからです。ただ、バズ部のサイトと比較してみると、無料のものと少し違う事がわかります。例えば、見出しの大きさや行間の違いなどがそうですね。

今回はその部分をバズ部のサイトに近づけてみたいと思います(バズ部の現在はまた違うデザインに変更されている)。

まず、今回行ったことは以下の3つです。

  1. 「記事タイトル(h1タグ)」と「見出しh2タグ」を大きくした
  2. 文字の行間のカスタマイズ
  3. 見出しh2のボーダーの色と大きさを変更

それぞれ解説していきます。

記事タイトル(h1タグ)と 見出しh2タグ を大きくした

まず、記事タイトルの大きさを変更するには、

テーマ編集 > base.css

へと移行し、「post-title」のタグを探します。この箇所の数字を変更すればカスタマイズできます。なお、数字が大きいほど文字は大きくなるので調整して下さい。

Xeory Baseのタイトルをカスタマイズ

次は見出しのh2のカスタマイズです。こちらはタグ「h2」の数値を変更すれば、カスタマイズできます。

まず「post」タグを探し、その中の「h2」を探します。そして、数値を変更すればカスタマイズできます。以下の画像を参照してください。なお、ここも数字が大きいほど文字は大きくなります。

Xeory Baseのタイトルをカスタマイズ2

文字の行間のカスタマイズ

次に、行間と文字サイズのカスタマイズです。

ここのカスタマイズも数字の変更だけOKです。

カスタマイズする箇所は「.post-content p,」の付近にある「line-height」で行います。この部分を探し、数字を調整すればいいです。以下の画像を参照してください。

Xeory Baseのタイトルをカスタマイズ3

こちらの記事にも詳しく書いているので良かったらご確認を「「Xeory Base」の文字サイズと行間をカスタマイズ」。

見出しh2のボーダーの色と大きさを変更

Xeoryでは、見出しh2にボーダー(下線)がひかれています。

無料テーマの場合はグレーのような色で目立たないようになっていますが、バズ部のサイトでは青色でしかも線が太い。この部分も少し近づけたいと思います。

カスタマイズするならまず、

テーマ編集 > スタイルシート(style.css)

へと移行します。

そして「h2」の「border-bottom」を探します。線を太くしたければ数字を大きくするし、線の色を変えたければ「#」の部分にカラータグを入力します。

Xeory Baseのタイトルをカスタマイズ4

これで完成です。

今回はちょっと細かいカスタマイズでしたが、「美は細部に宿る」というし、ちょっとした拘りは大事だと思います。派手なカスタマイズよりもこうした少しの違いで、全体の雰囲気がガラリとかわるのは個人的に好きな方です。

まぁ、今回の記事は備忘録として記録しているので誰かにむけて書いたものではりません。しかし、誰かの役に立ってくれれば幸いです。

SPONSORED LINK