Xeory Baseの『見出しサイズ』『見出しボーダー』『行間』などのカスタマイズ

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

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

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

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

それぞれ解説していく。

[cc id=3506]

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

まず、テーマ編集 > base.css へと移行する。

記事タイトルのタグは「post-title」の部分だ。この箇所を探しだし、数字を変更すればカスタマイズできる。なお、数字が大きいほど文字は大きくなる。

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

次は見出しのh2のカスタマイズだ。

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

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

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

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

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

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

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

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

Xeoryでは、見出しh2にボーダー(下線)がひかれている。無料テーマの場合はグレーのような色で目立たないようになっているが、バズ部のサイトでは青色でしかも線が太い。この部分も近づけたいと思う。

カスタマイズするならまず、テーマ編集 > スタイルシート(style.css)へと移行する。そして「h2」の「border-bottom」を探しだす。線を太くしたければ数字を大きくするし、線の色を変えたければ「#」の部分を変更する。

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

以上で完成だ。

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

まぁ、今回の記事は備忘録として記録しているので誰かにむけて書いたものでもない。しかし、誰かの役に立ってくれれば嬉しく思う。

SPONSORED LINK

SNSでもご購読できます。