デザイン/カスタマイズ

【アフィンガー5】見出しデザインのカスタマイズ方法

2020年9月13日

アフィンガー5 見出し カスタマイズ
この記事は4分で読めます

 

サラリーマン
・アフィンガー5の見出しデザインをカスタマイズしたい

・どんなカスタマイズができるか知りたい

 

このような疑問やお悩みにお応えします。

 

アフィンガー5では、見出しのデザインが豊富で自分の好きなようにカスタマイズができます。

 

ねこたろす
見出しはH2~H5までありますが、アフィンガー5ならそれぞれにカスタマイズが可能。

 

本記事では見出しデザインのカスタマイズ方法を、画像付きで分かりやすく解説していきます。

 

見出しのデザインは、自分のブログを印象づけるものなのでこだわりたいですよね。

 

4分ほどで読めますので、ぜひ参考にしてみて下さい!

 

本記事の内容

  • アフィンガー5の見出しとは
  • アフィンガー5の見出しデザイン
  • 見出しデザインのカスタマイズ方法

 

本記事を書いた人

ねこたろす
アフィンガー5を使って約4カ月です。見出しにもこだわって今のデザインに行きつきました。

 

アフィンガー5では、デザインテンプレートが用意されていて簡単におしゃれなデザインを実装できます。

 

デザインテンプレートの種類や使い方を記事にしていますので参考にどうぞ。

 

見出しデザインのカスタマイズ方法を知りたい人はこちらから(該当部分にジャンプします)

 

見出しの重要性

 

ブログでは必ず見出しを設定するべきです。

 

理由は以下の通り。

  • 章構造を分かりやすく伝えるため
  • SEOの効果を上げるため

 

ブログの本文が文章の羅列だけだと、読者は離脱しやすくなりますよね。

 

そこで見出しを使うことによって、文章の構造を分かりやすく伝えることができます。

 

また、見出しを設定することでSEOでも効果が期待できます。

これはGoogleが検索順位を決める仕組みと大きく関係しています。

 

Googleが検索順位を決める仕組み

クローリング
→クローラーというロボットが巡回

インデックス
→ページの情報を集めて保存する

ランキング
→インデックスされた情報を基に検索順位を決める

 

参考記事検索エンジンの仕組み|サイトの検索順位が決まるまでの流れ(外部リンク)

 

見出しを設定しておくことで、自分のブログの情報をクローラーに正しく伝えることが可能。

 

ねこたろす
コツは見出しに狙っているキーワードを盛り込んでおくことです。

 

その結果、SEOでも良い効果が得られる可能性が高まります。

 

アフィンガー5では、H2、H3、H4、H5の4種類の見出しがありそれぞれのデザインをカスタマイズが可能。

 

次からは、カスタマイズ方法を解説していきますね!

 

アフィンガー5の見出しカスタマイズ方法

 

アフィンガー5の見出しデザインをカスタマイズする方法は以下の通りです。

外観→カスタマイズ
各テキストとhタグ(見出し)
H2~H5タグ

アフィンガー5 見出し カスタマイズ箇所

 

アフィンガー5では、H2~H5まで自分の好きなようにデザインを変更できます。

 

ねこたろす
詳しく解説していきますね!

 

アフィンガー5の見出しカスタマイズ方法
①H2とH3

 

H2、H3のカスタマイズできる項目は以下の通り。

 

色の項目

  • 文字色
  • 背景色
  • 背景色(グラデーション上部)
  • ボーダー色
  • ボーダー色(サブ)
  • ボーダー色を上下のみにする
  • ボーダー上を太くする

 

各項目は以下の画像の部分を意味しています。

アフィンガー5 見出し H2 デザインカスタマイズ

 

ポイント

カスタマイズするときは、見出しを画面に映しながらにしましょう。
変更箇所がすぐに反映されるので、イメージがしやすくなるためです。

 

見出しの色のカスタマイズ項目は上記のような感じです。

 

ここからは、見出しデザインのカスタマイズ項目を解説していきますね!

 

吹き出しデザインに変更(※要背景色)

アフィンガー5 見出し H2 カスタマイズ 吹き出しデザインに変更

 

ポイント

設定した背景色がそのまま反映

 

吹き出し下線デザインに変更

アフィンガー5 見出し H2 カスタマイズ 吹き出し下線デザイン

 

ポイント

設定した背景色・グラデーション上部・ボーダー色が反映

 

ねこたろす
吹き出し下線デザインはEX版のみです!

 

 

囲み&左ラインデザインに変更(※要ボーダー色)

アフィンガー5 見出し カスタマイズ 囲み&左ラインデザイン

 

ポイント

設定した背景色・グラデーション上部が反映
囲みにはボーダー色、左ラインにはボーダー色(サブ)が反映

 

2色アンダーラインに変更(※要ボーダー色)

アフィンガー5 見出し カスタマイズ 2色アンダーライン

 

ポイント

ボーダー色、ボーダー色(サブ)が反映

 

グラデーションアンダーラインに変更(※要ボーダー色)

アフィンガー5 見出し H2 カスタマイズ グラデーションアンダーライン

 

ポイント

ボーダー色、ボーダー色(サブ)がグラデーションとなって反映

 

センターラインに変更(※要ボーダー色)

アフィンガー5 見出し H2 センターライン

 

ポイント

ボーダー色がラインの色に反映

 

囲みドットデザインに変更(※要ボーダー色)

アフィンガー5 見出し H2 カスタマイズ 囲みドットデザイン

 

ポイント

設定した背景色・グラデーション上部が反映
囲みにはボーダー色、ドットにはボーダー色(サブ)が反映

 

ストライプデザインに変更(※要背景色)

アフィンガー5 見出し H2 カスタマイズ  ストライプデザイン-min

 

ポイント

ストライプは、背景色・背景色(グラデーション上部)が反映
囲みはボーダー色が反映

 

破線アンダーラインに変更(※要ボーダー色)

アフィンガー5 見出し カスタマイズ 破線アンダーライン-min

 

ポイント

設定した背景色・グラデーション上部が反映
破線アンダーラインは、ボーダー色が反映

 

左ラインデザインに変更(※要ボーダー色)

アフィンガー5 見出し カスタマイズ 左ラインデザイン

 

ポイント

設定した背景色・グラデーション上部が反映
左ラインは、ボーダー色・ボーダー色(サブ)がグラデーションで反映

 

チェック(ボックスタイプ)デザインに変更

アフィンガー5 見出し カスタマイズ チェックボックス

 

ポイント

設定した背景色・グラデーション上部が反映
チェックボックスは、ボーダー色が反映

 

なし

アフィンガー5 見出し カスタマイズ なし

 

ポイント

設定した背景色・グラデーション上部が反映
囲みは、ボーダー色が反映

 

テキストを中央寄せ

アフィンガー5 見出し カスタマイズ テキスト中央揃え

 

テキストを左から中央寄せに設定できます。

 

デザイン幅を一杯に

アフィンガー5 見出し カスタマイズ デザイン幅を一杯に

 

見出しの幅を画面一杯に設定できます。

 

背景や吹き出しの角を丸くする

アフィンガー5 見出し カスタマイズ 背景や吹き出しの角を丸くする

 

ねこたろす
背景や吹き出しの角を丸くして柔らかい印象に!

 

グラデーションを横向きにする

 




アフィンガー5 見出し カスタマイズ なし

アフィンガー5 見出し カスタマイズ グラデーション横


 

横だと、ボーダー色→ボーダー色(サブ)という並びになります。

 

その他にも、背景画像や余白の設定も可能ですので自分好みにカスタマイズしてくださいね!

 

ちなみに本ブログの見出しカスタマイズは以下の通りです。

 

H2のカスタマイズ

  • 文字色:#333333
  • 背景色・背景色(グラデーション上部)・ボーダー色・ボーダー色(サブ):#c8e4ff
  • h2タグの基本スタイル:なし
  • 余白:左30px、上下15px

 

H3のカスタマイズ

  • 文字色:#333333
  • 背景色・背景色(グラデーション上部):#ffffff
  • ボーダー色・ボーダー色(サブ):#1e73be
  • ボーダー上を太くする
  • h3タグの基本スタイル:囲みドットデザインに変更
  • 余白:左20px、上下0px

 

アフィンガー5の見出しカスタマイズ方法
②H4/H5

H4・H5でカスタマイズできる項目は以下の通りです。

 

ねこたろす
H2/H3よりも項目は少なくなる!

 

色の項目

  • 文字色
  • ボーダー色
  • 背景色

 

ボーダー位置の項目

 





アフィンガー5 見出し カスタマイズ ボーダー左

アフィンガー5 見出し カスタマイズ ボーダー上

アフィンガー5 見出し カスタマイズ ボーダー下


 

ねこたろす
左ボーダーが1番目立ちますね!

 

左/上/下を同時に設定することも可能!

 

以下からは、見出しデザインのカスタマイズ項目になります。

 

吹き出しデザインに変更(※要背景色)

アフィンガー5 見出し カスタマイズ 吹き出しデザイン

 

耳折れデザインに変更(要背景色)

アフィンガー5 見出し カスタマイズ 耳折れ

 

ねこたろす
右上が耳折れになります!

 

なし

アフィンガー5 見出し カスタマイズ H4 なし

 

H2/H3と同じく「背景や吹き出しの角を丸くする」、背景画像や余白も設定可能です。

 

H4/H5だけのデザインとしては、ふせん風の影をつけることができます。

 




アフィンガー5 見出し カスタマイズ H4 付箋風影あり

アフィンガー5 見出し カスタマイズ H4 付箋風影なし


 

ちなみに本ブログの見出しカスタマイズは以下の通りです。

 

H4のカスタマイズ

  • 文字色:#ffffff
  • ボーダー色・背景色:#1e73be
  • h4タグのスタイル指定:なし
  • ふせん風の影をつける(※要背景色)
  • 余白:左20px、上下10px

 

H5のカスタマイズ

  • 文字色:#000000
  • ボーダー色:#ffffff
  • 背景色:#99d8f7
  • h5タグのスタイル指定:なし
  • ふせん風の影をつける(※要背景色)
  • 余白:左20px、上下10px

 

さすがにH5は使ったことないですが笑

 

まとめ:見出しデザインをカスタマイズして独自性を!

 

本記事の内容をまとめます。

 

見出しの重要性

  • 文章構造を分かりやすく伝えるため
  • SEOの効果を上げるため

アフィンガー5の見出しカスタマイズ方法

  • 外観→カスタマイズ
  • 各テキストとhタグ(見出し)

 

見出しのデザインひとつでも、自分のオリジナリティをだすことができます。

 

例えば、マナブログの見出しのデザインは、マナブログをマナブログたらしめる代名詞と言ってもいいと思います。

 

本記事を参考に、気に入ったカスタマイズを探してみて下さいね!

 

それでは!

 

アフィンガー5のデザインカスタマイズ参考記事

 

ブログランキング参加中!クリックお願いします!

ブログランキング・にほんブログ村へ 

-デザイン/カスタマイズ