【ブックマーク必須】初心者ブロガーのチェックリスト

AFFINGER6で見出しデザインを変更・カスタマイズする方法

AFFINGER5で見出しデザインを変更・カスタマイズする方法

「AFFINGER6で見出しのデザインを変える方法がわからない・・・」

そんなお悩みを2017年からブログ運営しているタケが解決します。

毎月30万円〜40万円ほどの収入になっており、WordPressテーマもAFFINGER6、THE・THOR、STORKなどたくさん扱ってきました。

AFFINGER6の見出しデザインとデザインを変更する時の注意点を知っておけば、今後のブログ運営がかなり楽になります。

この記事を読んで、見出しを自由自在にデザインしていきましょう。

【運営者タケのプロフィール】

タケのプロフィール

2017年ブログ開始、現在フリーランス。
最初1年は成約0件も、その後収益化
一緒にブログで稼ぎましょう!

\初心者歓迎!操作方法から戦略まで全てをサポート/

※ このブログがよかったら、ブックマークお願いします!

たった52記事で月9万円を達成したゼミ生「ダイ」さんとの対談動画(クリックで開きます)
目次

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

WordPressテーマの選び方は操作の簡単さで選ぶべき

WordPress管理画面から、下記の操作で変更できます。

  1. 「外観」をクリック
  2. 「各テキストとhタグ(見出し)」をクリック
  3. H2タグ、H3タグなど各見出しを修正
  4. 「公開」をクリック
AFFINGER6見出し変更

デザイン変更できる箇所

変更できる箇所は下記の通りです。

  • 文字色
  • 背景色
  • ボーダー色
  • 各デザイン変更

各項目に(※要ボーダー色)などと書かれていますが、該当する色の設定が必要になります。

AFFINGER6見出し設定

文字色や背景色はどの設定にも反映されますので、必ず設定するようにしましょう。

H2タグの基本スタイルを先に決める

見出しの中で一番重要なのはH2タグ(見出し2)です。

この重要な見出し2のデザインが目立つものになっていないと、他のデザインは決まってきません。

全体のデザインを決める上でも、H2タグのデザインは重要です。

  • 見出し2のデザインを決める
  • 見出し3のデザインを決める
  • 他の装飾(ボタン)などを決める

ボタンや他の装飾と色がかぶってもいけないので、まずH2の基本スタイルを決めるようにしましょう。

AFFINGER6で見出しデザインをカスタマイズ例

AFFINGER6での見出しデザインカスタマイズ例を用意しました。

シンプルなデザインから彩豊かなデザインまで対応できますので、ぜひ参考にしてみてください。

吹き出しデザイン

下側に吹き出しのデザインが追加されるデザインです。

背景色と文字色を設定する必要があります。

※ どのデザインでも基本的には文字色と背景色の変更が必要です。【色の変更箇所】では文字色と背景色は省きます。

囲み&左デザイン

AFFINGER6見出し

枠の色と左側にラインがつけられるデザインです。

背景色と文字色の設定のほかに、下記の設定を加えることができます。

【色の変更箇所】

  • ボーダー色:囲い枠の色変更
  • ボーダー色(サブ):左ラインの色変更
  • 背景色(グラデーション上部):上半分の背景色変更

バリエーション豊かにできるので、いろんなデザインを試してみてください。

2色アンダーライン

見出しの下に2色のアンダーラインがあるデザインです。

【色の変更箇所】

  • ボーダー色:アンダーラインの左側の色変更
  • ボーダー色(サブ):アンダーラインの右側の色変更

グラデーションアンダーライン

グラデーションアンダーラインは上記のように、下線がグラデーションになるデザインです。

【色の変更箇所】

  • ボーダー色:グラデーションの左側
  • ボーダー色(サブ):グラデーションの右側

センターライン

センターラインは文字が中央になる見出しデザインです。

文字色とボーダー色で、色を変更できます。

囲みドット

囲み線とドット線を組み合わせた見出しデザインです。

【色の変更箇所】

  • ボーダー色:外枠の色変更
  • ボーダー色(サブ):ドット部分の色変更
  • 背景色(グラデーション上部):背景色グラデーション上部分

ストライプデザイン

ストライプの見出しです。

色をかなりうまくマッチングさせないと、文字が見えにくくなるのが弱点なデザインとなっています。

【色の変更箇所】

  • 背景色(グラデーション上部)

破線アンダーライン

アンダーラインが点線になる見出しデザインです。

【色の変更箇所】

  • 背景色(グラデーション上部):背景色グラデーション部分、アンダーラインドット部分の色変更
  • ボーダー色:アンダーラインドット部分の色変更

左ラインデザイン

左にラインが入った見出しデザインです。

【色の変更箇所】

  • 背景色(グラデーション上部):背景色上部の色変更
  • ボーダー色:左ラインの色変更

その他のデザイン変更箇所

AFFINGER6ではデザイン箇所を変更することができます。

  • テキストの中央寄せと左寄せ
  • デザインを幅一杯にする
  • 角を丸くするデザイン
  • グラデーションの向き変更
  • 見出しの背景画像設定

細かく変えることができるので、一度設定画面で操作してみてください。

AFFINGER6で見出しデザインを変更・カスタマイズする時に知っておきたいこと

操作とデザインを兼ね備えるWordPressテーマを紹介

AFFINGER6の見出しカスタマイズのポイントは下記です。

  • H2(見出し2)を見出しの中で一番目立たせる
  • H4タグ,H5タグは目立たなくていい(ほぼ使わないようにする)
  • まとめタグは必要ない

これらのポイントを詳しく説明します。

H2(見出し2)を見出しの中で一番目立たせる

AFFINGER6で設定できる見出しタグは下記です。

  • H2タグ
  • H3タグ
  • H4タグ
  • H5タグ
  • まとめタグ

この中で最も使うのがH2タグとH3タグですが、H2タグの方が重要度が大きいので、H2タグを目立たせてください。

当ブログではH2タグを背景色で囲って、H3タグをアンダーラインのみにしています。

H4タグ,H5タグは目立たなくていい(ほぼ使わないようにする)

H4タグやH5タグのデザインは最も目立たないデザインにしておきましょう。

H2タグに比べて、重要度が落ちるので、目立たせると文章の中の重要度がわかりにくくなっています。

そして、そもそもですが、H4タグとH5タグは記事でほとんど使いません。

当ブログでH4タグを使っている記事は数記事で、H5タグを使っている記事はゼロ。

H4タグやH5タグを目立たせすぎて、H2タグの存在感が薄くならないようにしましょう。

まとめタグはほぼ使わない

いろんな機能があると、全部使いたくなってしまいますが、実際はほどんど使う必要がありません。

まとめタグもその1つで、基本的には見出し2と見出し3を使えばOKです。

何が重要で何が重要じゃないかはとても重要です。

まとめタグのデザインにこだわるぐらいなら、記事執筆を優先しましょう!

【見出しの使い方や記事の書き方参考記事】

ブログ初心者が意地でも知っておきたい記事の書き方10選

まとめ:AFFINGER6の見出し・デザインのカスタマイズはすぐできる!いつでも変更可能

まとめ:アドセンスNGワードは迷ったらやめる!リスクを負いすぎる必要なし!

AFFINGER6の見出しやカスタマイズを変更するのは簡単です。

ポイントを最後にまとめました。

  • H2タグのデザインを最も目立たせる
  • H2タグから順番にデザインを決める(H4,H5はほどんど使わない)
  • こだわりすぎはよくない(時間のかけ過ぎはよくない)

見出しのデザインを改善して、いい記事を書いていきましょう!

【AFFINGER6公式サイトはこちら】

【5年目ブロガーがブログ運営のお手伝い】

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次