【無料記事添削特典あり】LINEで学べるちょっと厳しいブログ収益化講座

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

 
AFFINGER5で見出しデザインを変更・カスタマイズする方法
この記事を書いている人 - WRITER -
ブログとライターで生活しています。2017年からブログ開始。28歳まで月収10万円のフリーターでした。趣味は野球観戦。

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

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

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

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

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

【記事執筆者タケのブログ実績】

トレンド系ブログで27万PV(Googleアドセンス13万円)が最初の大きな収益。

2020年ブログ年収275万円
最高月収51万円

副収入サイトや投資ブログ、野球ブログ(趣味系ブログ)も運営

TwitterDM・タケへの質問フォームで質問OK!
全額返金保証あり!ブログ×ライター3ヶ月収入構築プログラム開始

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

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

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

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

AFFINGER5見出し変更

デザイン変更できる箇所

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

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

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

AFFINGER5見出し設定

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

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

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

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

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

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

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

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

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

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

吹き出しデザイン

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

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

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

囲み&左デザイン

AFFINGER5見出し

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

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

【色の変更箇所】

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

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

2色アンダーライン

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

【色の変更箇所】

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

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

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

【色の変更箇所】

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

センターライン

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

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

囲みドット

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

【色の変更箇所】

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

ストライプデザイン

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

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

【色の変更箇所】

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

破線アンダーライン

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

【色の変更箇所】

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

左ラインデザイン

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

【色の変更箇所】

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

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

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

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

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

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

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

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

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

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

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

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

  • 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選

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

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

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

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

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

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

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

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

この記事を書いている人 - WRITER -
ブログとライターで生活しています。2017年からブログ開始。28歳まで月収10万円のフリーターでした。趣味は野球観戦。

★5年のブログ経験をあなたに。★

あなたのブログの相談に乗る個別サポート実施中。

1人1人に合った戦略を提案し、ブログを改善します。

ブログ開設前の方でもOKです。

★絶対損しない3ヶ月収入構築プログラム★

全額返金保証ありのブログ×ライター収入構築プログラムです。

たった3ヶ月の作業で、在宅収入を作ります。

本気で人生変えたい人向けの本気プログラムです。

Twitterでブログ情報を発信中

関連記事 - Related Posts -

最新記事 - New Posts -

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA