稼ぐブロガーは全員やっている「記事を書かない」作業工程大全

パスワード付限定コンテンツが見れる2大サポート

ゼミ

ZOOMでブログ相談ができる!ブログ個別サポートWEBインカム構築ゼミ

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

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

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

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

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

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

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

【運営者タケ(@takeuchigoro)のプロフィール】

プロフィール

※ わからないところはTwitter(@takeuchigoro)にDMとかで聞いてね!
記事をわかりやすく変えたりできるので、タケにもメリットありです。

 

2020以降ブログ・ライター・投資で生活中

2017年ブログ開始
収益1万円突破まで1年以上掛かるも、現在ブログ収入で生活中。

あなただけの戦略を提案するブログサポート実施中!

【絶対に損しない】初心者向けが素早く稼げるブログ運営術はこちら

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年目ブロガーがブログ運営のお手伝い】

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

一度はチェック!3つの収益化加速コンテンツ

① あなただけの戦略を提案!個別ブログサポート

ゼミ

ネット上のノウハウを見ても、ブログが進まない原因は
「あなたに合ったやり方じゃないから」

今のあなたに必要なことを2017年からのブログ経験からご提案します。

無料おためしあり!ブログのオンラインサポート「WEBインカム構築ゼミ」

② 3ヶ月で在宅初報酬!超速ライターラボ

【返金保証あり】3ヶ月でガッツリ稼ぐWebライター講座「超速ライター養成ラボ」

3ヶ月間毎週ZOOMでサポートして、稼ぐライターを目指します。
1万円稼げなかった場合は全額返金保証!

【返金保証あり】3ヶ月でガッツリ稼ぐWebライター講座「超速ライター養成ラボ」

③ 稼ぐブロガーはやっている!記事を書かない作業工程大全

記事を書かない作業工程大全

稼げる記事かどうかは記事を書く前に決まっています。
稼げないブロガーはとりあえず記事を書く、稼ぐブロガーはそうじゃない。

その違いをこのコンテンツから掴みませんか?

【即実行可能】稼ぐブロガーが最初の1ヶ月でやる「記事を書かない」作業工程大全




関連記事 - Related Posts -

最新記事 - New Posts -

- Comments -

メールアドレスが公開されることはありません。

CAPTCHA


Copyright© タケのブログゼミ , 2021 All Rights Reserved.