【AFFINGER6】見出しのデザインのおすすめは？カスタマイズ方法をご紹介！【アフィンガー6】

AFFINGERではどんな見出しにすればいいの？
AFFINGERでの見出しの設定方法を教えてほしい

見出しデザインの選択肢が多くて迷ってしまいます。
おすすめの見出しデザインを教えてほしい。

今回はこういった疑問にお答えして、AFFINGERで制作できる『見出しの設定方法』『カスタマイズ方法』『おすすめのデザイン』をご紹介いたします。

「デザインに迷ってしまう」という方向けに、一例として当ブログと同じデザインになるカスタマイズもご紹介しておりますのでよければ参考にしてみてください。

この記事ので分かること

ちなみにこの記事は、ブログの配色はもう決まっている！という方に向けた記事になります。

前の記事で、初心者が失敗しないブログの配色の決め方をご紹介しておりますので『まだブログ全体で使う色が決まっていない』という方は、良ければこちらの記事からご覧ください。

関連記事：【失敗しない】初心者向けブログ配色パターン３色の決め方！【カラーコードもご紹介！】

ブログ全体の配色を決める前に見出しデザインを作ってしまうと、統一感のないブログになってしまいがちですので、まずはブログで使う色を先に決めておくのがおすすめです。

おすすめの見出しデザイン・設定方法

AFFINGERでは見出し1～5まで設定できますが
ブログを書く上ではほとんど『見出し２』と『見出し３』しか使わないので
まずは『見出し2』『見出し3』のデザインを決めて、設定していきましょう！

見出し2のおすすめのデザイン

見出し２は、各章のタイトルのにあたります。

記事内での、区切りとなる箇所になりますので、
一番大きなハッキリしたデザインにしましょう。

見出し２のおすすめのデザインはしっかり背景色を設定できる『吹き出しデザイン』もしくは『左ラインデザイン』のどちらががおすすめです。

理由としては、前述の通り見出し２が各章の区切りにもなるので、はっきりとしたデザインの方がメリハリがついて読者にとって、より読みやすいためです。

『囲み＆左ラインデザイン』の左ラインを消したい場合は、ボーダー色（サブ）を背景色と同じ色にすることでボーダーが見えなくなります。

見出し2おすすめの設定方法

それでは、見出し2のデザインを設定していきましょう
ここでは一例として当ブログと同じデザインになるように設定を変更していきます。

step
1設定画面を開く

まずは以下より見出し2の設定箇所を開きます。

ワードプレス管理画面→外観→カスタマイズ→見出しタグ ( hx ) / テキスト　→H2タグ

step
2見出しの装飾

次に見出しの装飾をしていきます。

設定画面右側に表示されているご自身のブログ内から、テストページの記事を開いておくとデザインがすぐ反映、確認できるので作業しやすいですよ。

文字色下の『色を選択』をクリック

→文字色の真ん中の四角内の色コードを（#FFFFFF）に変更

背景色、背景色（グラデーション上部）、ボーダー色（サブ）の色コードを、ブログのメインカラーに決めた色に変更

h2タグの基本スタイルを変更する

step
3公開をクリック

見出し３おすすめのデザイン

見出し３のおすすめのデザインは、ある程度はハッキリと見出しだと分かるけど、そこまで目立ち過ぎない

のどれかがおすすめです。

見出し３おすすめの設定方法

それでは、続けて見出し3のデザインを設定していきましょう
こちらも一例として当ブログと同じデザインになるように設定に変更していきます。

step
1設定画面を開く

まずは以下より見出し2の設定箇所を開きます。

ワードプレス管理画面→外観→カスタマイズ→見出しタグ ( hx ) / テキスト　→H３タグ

step
2見出しの装飾

見出し３の装飾をしていきます。

文字色下の『色を選択』をクリック

→文字色の真ん中の四角内の色コードを（#0F0F0F）に変更

見出し3は他の記事内の文章と同じ文字色の黒系を使うのがおすすめです。

背景色（グラデーション上部）のコードを（#f9f9f9）に変更
ボーダー色とボーダー色（サブ）の色コードを、ブログのメインカラーに設定した色に変更。

見出し３はうっすらと背景を設定しておくことで、より見出しらしくなります

h３のタグの基本スタイルを変更する

step
3公開をクリック

以上で見出し２、見出し3の設定が完了しました！

その他、見出し設定では以下のようなカスタマイズができます。

・ボーダーを上下のみにする
・ボーダーを太くする ( 下をサブカラーに )
・見出しのテキストを中央寄せにする
・デザインを幅一杯に
・背景や吹き出しの角を丸くする
・グラデーションを横向きにする　etc,,,

この辺りの設定は後回しでOKです

見出し１の設定はしないくても良いのですか？

見出し１は記事のタイトルにあたるものなので基本的には設定を変更しなくても問題ありません。

まとめ

以上、今回はAFFINGER６での見出しデザインのカスタマイズ方法、おすすめのカスタマイズをご紹介しました。

見出しのおすすめのカスタマイズをまとめると以下の通りです。

AFFINGER6では様々なデザインに加えてかなり細部まで、デザインを調整できますので是非いろいろと試してみてください。

AFFINGER6を詳しく知りたい方は是非下記からチェックしてみて下さい。

AFFINGER6

見出しデザインを変えたかった方の参考になれば幸いです。

今回は以上です。