PR AFFINGER6

【AFFINGER5】文字(フォント)の色やサイズを変更する方法

2021年4月16日

【AFFINGER5】文字(フォント)の色やサイズを変更する方法

こんな方におすすめ

  • AFFINGER5のデザインをカスタマイズしたい
  • フォントの色やサイズを変更したい

ブログサイトは、フォントだけでも記事全体の雰囲気が変わり、見にくくなることもあります。

なので、今回紹介する方法でテキストリンクや本文を見やすくカスタマイズしましょう。

ということで、今回はAFFINGER5の文字(フォント)のデザインをカスタマイズする方法について解説します。

是非参考にしてください。

AFFINGER5で文字(フォント)のデザインをカスタマイズする

今回解説するのはフォントのデザインについて以下の2つです。

  • 文字の色
  • 文字のサイズ&行間

それでは順番に解説します。

デザイン①:文字の色

一つ目は、本文の文字やテキストリンクの色をカスタマイズする方法です。

それではWordPress管理画面から『外観➡︎カスタマイズ➡︎各テキストとhタグ(見出し)➡︎テキスト色一括変更』を開いてください。

デザイン①:文字色

設定項目

  • 記事内テキストなどの色
  • 設定範囲を広げる
  • 記事内リンク色(テキストリンク)
  • マウスオーバー時(ホバー時)
  • 透明度を下げる

設定できるのはこの5つです。

試しにカスタマイズしてみましょう。

文字の色をカスタマイズする

「ff0000」に設定すると真っ赤になりましたね。

そして、『範囲を広げる』にチェックを入れると以下のように抜粋文やタイトルも色が変更されます。

文字色のカスタマイズの範囲を広げる

下の項目ではテキストリンクのデザインもカスタマイズできます。

青っぽい色にするとクリック率が上がるのでおすすめです。

カスタマイズしたら右上の『公開』をクリックすれば完了です。

デザイン②:文字のサイズ&行間

文字のサイズ&行間も、AFFINGER5の設定で簡単に変更できます。

それでは管理画面の『AFFINGER5 管理➡︎デザイン』を開いてください。

デザイン②:文字のサイズ&行間

下の方までスクロールするとフォントをカスタマイズする項目が表示されます。

設定できること

  • フォントのサイズ
  • フォントの種類

この二つが設定できます。

フォントのサイズ

記事コンテンツ内のフォントサイズや行間を画面の大きさ別(機種別)にカスタマイズできます。

フォントのサイズ

全て変更してもややこしくなるので、僕はPC閲覧時のフォントサイズだけ調節しました。

デフォルトだと以下のような設定になってます。

PC(960px以上)閲覧時サイズ(px)行間(px)
基本(Pタグ 他)1527
記事タイトル2740
H2タグ2232
H3タグ2030
H4タグ1626
記事一覧1626

フォントサイズの基本は15〜18px程度がおすすめですね。

フォントサイズの設定は以上です。

フォントの種類

続いて、一つ下の項目ではフォントの種類をカスタマイズできます。

フォントの種類

「全体のフォント」「記事タイトル・見出し(h2〜3)・ウィジェットボタンなど」の二つに分けて設定ができます。

設定できるフォントの種類

リンクをクリックすればデザインを確認できます。

他のフォントを使用したい場合は、『その他』にCSSを入力してください。

設定ができたら下にスクロールし、「save」をクリックしましょう。

まとめ

今回はAFFINGER5でフォント(文字)のデザインをカスタマイズする方法について以下の二つを解説しました。

まとめ

  • 文字の色
  • 文字のサイズ&行間

AFFINGER5を使うと簡単にカスタマイズができて便利ですね。

まだインストールしていない方は是非こちらからどうぞ。↓

\ 稼ぐに特化したWordPressテーマ 

今すぐAFFINGER5を購入!

【特典】「STINGERタグ管理プラグイン3」無料プレゼント中!

というわけで、今回はここまでです。
最後まで読んでいただきありがとうございました。

【AFFINGER5】検索フォームのデザインをカスタマイズする方法
【AFFINGER5】検索フォームのデザインをカスタマイズする方法

続きを見る

※無料ニュースレターを発信中:僕は持病を抱えつつも、13歳でブログで月収5万円を達成しました。その状況で得た「健康×ビジネス」の知識をニュースレターで共有していきます。無料登録はこちら。いつでも解約できます。

-AFFINGER6
-