こんにちは、Naokiです(@naoki_blogger)。
記事を読むことで、AFFINGERの見出しデザインの変更方法と適切なフォントサイズが分かりますよ。
この記事の内容
- AFFINGERの見出しデザインの変更方法
- オススメの配色＆オススメ見出し
- 適切なフォントサイズの設定表
当たり前のように見出しの変更をどんなブロガーでもしています。
見出しを変更するメリットはなんでしょうか？
- メリットその１、他サイトとの差別化ができる
- メリットその２、自分のブログに愛着が湧く
- メリットその３、読者にサイトの特徴を掴んでもらいやすい
といったメリットがあるからです。
AFFINGERには、標準で見出しが設定されています。しかし、この見出しだとダサいのです。標準の見出しでは、グレーを使っているため読者の印象にも残りにくいんですよね。
なので見出しを変更して、読者の印象に残りやすくする必要があります。今回は見出しのデザインを、変更する方法とフォントサイズの変更方法を解説します。
AFFINGERの見出しデザインの変更方法
見出しのデザイン＆配色を変更する方法は次の通り。
メモ
WordPress管理画面から外観→カスタマイズ→見出しタグ(hx) / テキストで変更可能です。
見出しデザインの変更方法は、上記の通り簡単です。
WordPress管理画面から外観→カスタマイズ→見出しタグ(hx) / テキストを選択した後、いくつか選択画面が出てくると思います。
AFFINGERの見出しは、記事タイトル、H2〜H6が設定可能です。今回は記事タイトルとH2、H3のカスタマイズ方法のみ説明しますよ。
というのもH4以降は、基本的に使いません。よほど細かい分類をしない限り使わないので安心してください。
記事タイトルのデザイン変更方法
記事タイトルは基本的にいじらなくてOKですが、文字色とテキストの位置のみ変更します。細かなところの変更も割と大切ですよ！
というのもプロブロガーのマナブさんのサイト、manablogでは記事タイトルにもこだわりがあるからです。
記事タイトルのデザインを変える方法は、見出しタグ(hx) / テキスト→記事タイトルを選択します。
画像の後に、手順まとめを説明していきます。
メモ
見出しタグ(hx) / テキスト→記事タイトルを選択
- 文字色：#7B7B7B(マナブログ風)
- 背景色：なし
- 背景色(グラデーション上部)：なし
- ボーダー色：なし
- ボーダー色(サブ)：なし
- タイトルの基本スタイル：なし
- テキストを中央寄せにチェックを入れる
「なし」というのは、空欄のままでOKということです。基本的にAFFINGERのカスタマイズでは、空欄にしておくと標準の色が反映されます。最後に公開を押すと設定が反映されますよ！
H2タグのデザイン変更方法
H2タグのデザインを変える方法は、見出しタグ(hx) / テキスト→H2タグを選択します。
変更する設定項目は以下のとおりです。
メモ
見出しタグ(hx) / テキスト→H2タグを選択。
- 文字色：#333333(マナブログ風)
- 背景色：#F7F7F7
- 背景色(グラデーション上部)：なし
- ボーダー色 ：#4865B2(マナブログ風)、#1e73be(僕のサイト)
- ボーダー色(サブ)：なし
- H2タグの基本スタイル：左ラインデザインに変更
- 左右の余白：40を入力
- 上下の余白：0を入力
そこまで細かく設定する必要があるのか？と思うかもです。
しかし余白を適度に空けるだけでも記事の見出しが読みやすくなります。自分の記事を読んでみて、自然に見出しが視界に入れば適切だと言えます。
H3タグのデザイン変更方法
この上の見出しですね↑
設定項目は以下のとおりです。
メモ
見出しタグ(hx) / テキスト→H3タグを選択。
- 文字色：#444444(僕のサイト風)
- 背景色：#F7F7F7(僕のサイト風)、#FFFFFF(マナブログ風)←Fは6文字。
- 背景色(グラデーション上部)：なし
- ボーダー色 ：#4865B2(マナブログ風)、#1e73be(僕のサイト)
- ボーダー色(サブ)：なし
- H3タグの基本スタイル：左ラインデザインに変更
余白の設定も行っていきましょう。
- 左の余白：30を入力
- 上下の余白：0を入力
設定はこれで終了です。H2タグとH3タグのデザインは統一感が合ったほうが自然ですよ。
見出しの設定は些細なことかもしれませんが、読者がいちばん目にする場所です。見出しに違和感があるとサイト自体が気に入られません。ぜひ自然な見出しデザインを手に入れてくださいね。
適切なフォントサイズの設定方法
さて次は、フォントサイズを変更していきますよ！
フォントサイズの設定方法は、AFFINGER管理→全体設定のフォントのサイズから変更できます。
フォントのサイズ表
フォントサイズもビミョーに大切な要素です。フォントサイズをいじると、文章の行間幅だったり、見出しのサイズを変更できます。
注意ポイント
訂正：どうやらフォントサイズを変更すると見出しの余白設定も変わるみたいです。フォントのサイズ設定画面から、H2タグを40、H3タグ30を入力してください。
上記の訂正を入力する場所は、フォントのサイズから各見出しのサイズを変更してくれれば、OKです。
フォントのサイズは、スマホからの表記、パソコンからの表記を確認しながら調整してください。
以上ですべての設定が終わりです。お疲れさまでした！！
最後に：見出しのデザインとサイズは記事の読みやすさに繋がる
今回は、見出しのデザインを変更する方法とフォントサイズの設定をしました。以下の悩みや疑問を解決しました。
- 「AFFINGERで見出しのデザインってどう変える？」
- 「オススメの配色とデザインはある？」
- 「適切な見出しと行間幅のサイズを教えてほしい」
【AFFINGER6】見出し変更のまとめ
メモ
- H2タグとH3タグのデザインは、左ラインデザイン
- 記事タイトルはテキストを中央寄せ
- 見出しのデザイン・色は記事の読みやすさに繋がる
- 自然な見出しデザインになるよう工夫しよう
もっとデザインを学習したい方へ
デザインの本でオススメの書籍がありますよ。『なるほどデザイン』です。ある程度デザインって何だろう？ということが『なるほどデザイン』で分かります。
ブログだと余白を意識する場合はよくあります。余白に特化した書籍だと、『けっきょく、よはく。』がおすすめですね。
AFFINGERの関連記事はコチラもオススメ
»AFFINGER6のカスタマイズ大全
»AFFINGERに入れておくべきプラグインは7個でOK
。 読者 「AFFINGERで見出しのデザインってどう変える？」 「オススメの配色とデザインはある？」 「適切な見出しと行間幅を教えてほしい」){kind=link}