AFFINGER6

簡単、AFFINGER6の見出しデザインを変更する方法

2021-11-09

装飾画像

こんにちは、Naokiです(@naoki_blogger)

ともる
「AFFINGERで見出しのデザインってどう変える?」 「オススメの配色とデザインはある?」 「適切な見出しと行間幅を教えてほしい」

記事を読むことで、AFFINGERの見出しデザインの変更方法と適切なフォントサイズが分かりますよ。

この記事の内容

  • AFFINGERの見出しデザインの変更方法
  • オススメの配色&オススメ見出し
  • 適切なフォントサイズの設定表
ともる
AFFINGERの見出しを変更する意味は?

当たり前のように見出しの変更をどんなブロガーでもしています。

見出しを変更するメリットはなんでしょうか?

  • メリットその1、他サイトとの差別化ができる
  • メリットその2、自分のブログに愛着が湧く
  • メリットその3、読者にサイトの特徴を掴んでもらいやすい

といったメリットがあるからです。

AFFINGERには、標準で見出しが設定されています。しかし、この見出しだとダサいのです。標準の見出しでは、グレーを使っているため読者の印象にも残りにくいんですよね。

なので見出しを変更して、読者の印象に残りやすくする必要があります。今回は見出しのデザインを、変更する方法とフォントサイズの変更方法を解説します。

»AFFINGER6の購入

AFFINGERの見出しデザインの変更方法

見出しのデザイン&配色を変更する方法は次の通り。

メモ

WordPress管理画面から外観→カスタマイズ→見出しタグ(hx) / テキストで変更可能です。

見出しデザインの変更方法は、上記の通り簡単です。

具体的な見出しの設定方法を解説していきます。
なおき

WordPress管理画面から外観→カスタマイズ→見出しタグ(hx) / テキストを選択した後、いくつか選択画面が出てくると思います。

見出しタグの設定画面

AFFINGERの見出しは、記事タイトル、H2〜H6が設定可能です。今回は記事タイトルとH2、H3のカスタマイズ方法のみ説明しますよ。

というのもH4以降は、基本的に使いません。よほど細かい分類をしない限り使わないので安心してください。

記事タイトルのデザイン変更方法

記事タイトルは基本的にいじらなくてOKですが、文字色とテキストの位置のみ変更します。細かなところの変更も割と大切ですよ!

というのもプロブロガーのマナブさんのサイト、manablogでは記事タイトルにもこだわりがあるからです。

記事タイトルのデザインを変える方法は、見出しタグ(hx) / テキスト→記事タイトルを選択します。

画像の後に、手順まとめを説明していきます。

記事タイトルの設定(0)

記事タイトルの設定(1)

変更する設定項目は以下のとおり。
なおき

メモ

見出しタグ(hx) / テキスト→記事タイトルを選択

  • 文字色:#7B7B7B(マナブログ風)
  • 背景色:なし
  • 背景色(グラデーション上部):なし
  • ボーダー色:なし
  • ボーダー色(サブ):なし
  • タイトルの基本スタイル:なし
  • テキストを中央寄せにチェックを入れる

「なし」というのは、空欄のままでOKということです。基本的にAFFINGERのカスタマイズでは、空欄にしておくと標準の色が反映されます。最後に公開を押すと設定が反映されますよ!

H2タグのデザイン変更方法

H2タグのデザインを変える方法は、見出しタグ(hx) / テキスト→H2タグを選択します。

見出し2の設定(0)

変更する設定項目は以下のとおりです。

メモ

見出しタグ(hx) / テキスト→H2タグを選択。

  • 文字色:#333333(マナブログ風)
  • 背景色:#F7F7F7
  • 背景色(グラデーション上部):なし
  • ボーダー色 :#4865B2(マナブログ風)、#1e73be(僕のサイト)
  • ボーダー色(サブ):なし
  • H2タグの基本スタイル:左ラインデザインに変更
ぶっちゃけ、H2タグの基本タイトルとボーダー色はお好みで大丈夫です。一番下の左右の余白、上下の余白もいじっちゃいましょう。
なおき
  • 左右の余白:40を入力
  • 上下の余白:0を入力

そこまで細かく設定する必要があるのか?と思うかもです。

しかし余白を適度に空けるだけでも記事の見出しが読みやすくなります。自分の記事を読んでみて、自然に見出しが視界に入れば適切だと言えます。

H3タグのデザイン変更方法

この上の見出しですね↑

設定項目は以下のとおりです。

メモ

見出しタグ(hx) / テキスト→H3タグを選択。

  • 文字色:#444444(僕のサイト風)
  • 背景色:#F7F7F7(僕のサイト風)、#FFFFFF(マナブログ風)←Fは6文字。
  • 背景色(グラデーション上部):なし
  • ボーダー色 :#4865B2(マナブログ風)、#1e73be(僕のサイト)
  • ボーダー色(サブ):なし
  • H3タグの基本スタイル:左ラインデザインに変更

余白の設定も行っていきましょう。

見出し3の設定(0)

  • 左の余白:30を入力
  • 上下の余白:0を入力

設定はこれで終了です。H2タグとH3タグのデザインは統一感が合ったほうが自然ですよ。

もしデザイナーでなければ、僕の見出し2と見出し3を真似して大丈夫です。
なおき

見出しの設定は些細なことかもしれませんが、読者がいちばん目にする場所です。見出しに違和感があるとサイト自体が気に入られません。ぜひ自然な見出しデザインを手に入れてくださいね。

適切なフォントサイズの設定方法

さて次は、フォントサイズを変更していきますよ!

フォントサイズの設定方法は、AFFINGER管理→全体設定のフォントのサイズから変更できます。

フォントのサイズ表

フォントサイズもビミョーに大切な要素です。フォントサイズをいじると、文章の行間幅だったり、見出しのサイズを変更できます。

注意ポイント

訂正:どうやらフォントサイズを変更すると見出しの余白設定も変わるみたいです。フォントのサイズ設定画面から、H2タグを40、H3タグ30を入力してください。

上記の訂正を入力する場所は、フォントのサイズから各見出しのサイズを変更してくれれば、OKです。

カスタマイズから見出しの余白をいじると、フォントのサイズ設定にも適用されるみたいです。
なおき

フォントのサイズは、スマホからの表記、パソコンからの表記を確認しながら調整してください。

以上ですべての設定が終わりです。お疲れさまでした!!

最後に:見出しのデザインとサイズは記事の読みやすさに繋がる

今回は、見出しのデザインを変更する方法とフォントサイズの設定をしました。以下の悩みや疑問を解決しました。

ともる

  • 「AFFINGERで見出しのデザインってどう変える?」
  • 「オススメの配色とデザインはある?」
  • 「適切な見出しと行間幅のサイズを教えてほしい」

【AFFINGER6】見出し変更のまとめ

メモ

  • H2タグとH3タグのデザインは、左ラインデザイン
  • 記事タイトルはテキストを中央寄せ
  • 見出しのデザイン・色は記事の読みやすさに繋がる
  • 自然な見出しデザインになるよう工夫しよう

もっとデザインを学習したい方へ

デザインの本でオススメの書籍がありますよ。『なるほどデザイン』です。ある程度デザインって何だろう?ということが『なるほどデザイン』で分かります。

ブログだと余白を意識する場合はよくあります。余白に特化した書籍だと、『けっきょく、よはく。』がおすすめですね。

AFFINGERの関連記事はコチラもオススメ

»AFFINGER6のカスタマイズ大全

»AFFINGERに入れておくべきプラグインは7個でOK

  • この記事を書いた人
  • 最新記事

なおき|Z世代ブロガー

副業フェスティバルでは、スキルを習得するためのお手伝いをしています。プログラミング学習、Webデザイン学習、ブログ運営など、これからのWeb時代を生き残れるような発信を心がけてます。

18歳のブロガー|シドニーに留学中。16歳の時にNoteを始める→900本近くの記事を投稿。趣味は新しい知識を習得すること。

-AFFINGER6
-, ,

/* LazyLoad for google adsense */