【Xeory Base】文字サイズ・行間・見出し・改行幅のカスタマイズ

         
  • このエントリーをはてなブックマークに追加
  • LINEで送る

本記事ではワードプレスのXeory Base の文字や行間、見出し、改行幅のカスタマイズに関して書いていきます。

文字サイズのカスタマイズ

まずは文字サイズのカスタマイズについてお話します。文字サイズを変更するには、ワードプレスを開いて『外観⇒テーマエディタ⇒base.css』と移動し、base.cssを編集します。

base.cssを開いたら『ctrl+Fキー』を押して、『body』というワードを検索します。そして以下の箇所を探します。

そして以上の『font-size:16px;』という箇所の数字を上げたり下げたりすれば文字サイズは変更可能です。

行間のカスタマイズ

続いて行間のカスタマイズ方法について紹介します。 文字サイズのカスタマイズ時と同様に、ワードプレスを開いて『外観⇒テーマエディタ⇒base.css』と移動し、base.cssを編集します。

base.cssを開いたら『ctrl+Fキー』を押して、『.post-content p,』というワードを検索します。そして以下の箇所を探します。

そして以上の『line-height:1.7;』という箇所の数字を上げたり下げたりすれば行間は変更可能です。

見出しのカスタマイズ

続いて見出しのカスタマイズの方法についてお話します。文字サイズのカスタマイズ時と同様に、ワードプレスを開いて『外観⇒テーマエディタ⇒base.css』と移動し、base.cssを編集します。

h1タグ(記事タイトル)のカスタマイズ

base.cssを開いたら『ctrl+Fキー』を押して、『post-title』というワードを検索します。そして以下の箇所を探します。

そして以上の『font-size:29px;』という箇所の数字を上げたり下げたりすればh1タグの大きさは変更可能です。他にも、『font-weight』という記述もありますが、これは文字の太さを表現しています。これもお好みに変更しましょう。

h2タグのカスタマイズ

base.cssを開いたら『ctrl+Fキー』を押して、『.post-content h2』というワードを検索します。そして以下の箇所を探します。

そして以上の『font-size:22px;』という箇所の数字を上げたり下げたりすればh2タグの大きさは変更可能です。

改行幅のカスタマイズ

記事を編集しているときに、もちろん改行します。そして記事を実際にブラウザで見てみると、「なんか改行幅狭いな」「もっと改行幅狭くしたいな」など思いませんか?

そのためにその改行幅を変更する方法についてお話します。base.cssを開いたら『ctrl+Fキー』を押して、『.post-content p,』というワードを検索します。そして以下の箇所を探します。

そして以上の『margin:0 0 2.7em;』という箇所の『2.7』という数字を上げたり下げたりすれば改行幅の大きさを変更可能です。

まとめ

本記事ではXeory Baseで文字サイズや行間、見出し、改行幅のカスタマイズ方法を紹介しました。

  • このエントリーをはてなブックマークに追加
  • LINEで送る
     

SNSで発信もしてます!