AFFINGER5

【AFFINGER5】フォントサイズの変更とおすすめサイズ

アフィンガー5フォントサイズの変更方法を解説します。

hiro
初心者でも簡単に出来るので、ご安心ください。

「フォントサイズ」の設定場所

アフィンガー5のフォントサイズ設定は、「AFFINGER5管理」>「デザイン」から行います。

 

フォントサイズが変更できるのは3つ。

  1. スマートフォン(~599px)
  2. タブレット(959px~600px)
  3. PC(960px以上)

自分が見やすいと思う大きさに調整してください。

フォントの種類によって大きさも微妙に違います。

hiro
サイズ変更後は、各デバイスでご確認ください。

 

おすすめのフォントサイズ

画像が当サイトで設定しているフォントサイズです。

hiro
僕がいじるのはスマホとPCのみ。

 

スマホのフォントサイズ

  • 基本(Pタグ 他):15
  • 記事タイトル:18
  • H2タグ:17

 

PCのフォントサイズ

  • 基本(Pタグ 他):15
  • 記事タイトル:変更なし
  • H2タグ:変更なし

 

あくまで目安の数字です。

自分が見やすいと思うフォントサイズで設定してください。

 

フォントの種類を設定

フォントの種類はAFFINGER5管理」>「デザインで設定。

サイトのイメージに合わせて頂ければと思います。

 

ちなみに、当サイトのフォント設定は↓↓

  • 全体:Noto Sans(400)
  • 記事タイトル他:Noto Sans(700)

個人的に一番見やすいと思うフォントを使ってます。

hiro
簡単に変更できるので、いろいろ試してみてください。

 

※追記

現在、「全体:デフォルト」「記事タイトル他:使用しない」に変更しました。

hiro
サイトの表示スピードを重視したため。

 

Googleフォントにも対応

アフィンガー5はGoogleフォントにも対応してます。

使用したい場合は「AFFINGER5管理」>「デザイン」。

 

Googleフォントの紹介(日本語対応)

日本語対応のGoogleフォントです。

設定方法は下記の記事が参考になります。

フォントの種類・変更(Googleフォント含む)

 

フォントカラーの設定

設定はカスタマイズの「各テキストとhタグ」>「テキスト色一括変更」

hiro
各テキストのカラーが変更可能です。

 

テキストカラーが変更できる箇所↓↓

  • 記事内テキスト
  • 記事タイトル
  • 抜粋
  • 記事内リンク色
  • マウスオーバー色 etc…

お好みで設定してください。

 

テキストの色変えるとこんな感じになります↓↓

文字色「青」、リンク「赤」。

文字色は変更しても問題ないと思いますが、リンクは「青」のままをおすすめします。

 

他サイトの配色を調べる方法

ColorZilla

他のサイトの配色を調べたい方は「ColorZilla」がおすすめ。

hiro
chromeの拡張機能なので無料です。

 

Webカラーの配色サイト

Webカラーの一覧がチェックできるサイトです。

カラーコード一覧も記載されてるので、コピペして使ってください。

-AFFINGER5
-

© 2020 アフィ基地