AFFINGER headline customize

AFFINGER6 ブログ

【画像付き解説】アフィンガー6見出しデザインのカスタマイズ方法

こんにちは。

Aoirolife運営者のあおいろです。

Twitterはこちらから→@ao_bloger

今回はAFFINGER6を導入したての方向けに、見出しデザインのカスタマイズ方法を画像付きでわかりやすく解説します。

AFFINGER6は最初から入ってる機能で十分自分好みにカスタマイズできますのでぜひやってみてください。

AFFINGER6見出しデザインのカスタマイズ方法

AFFINGER headline customize

さっそく見ていきましょう。

見出しデザインのカスタマイズ手順

AFFINGER6の見出しデザインは下記の手順でカスタマイズすることができます。

【 外観 】→【 カスタマイズ 】→【 見出しタグ 】→【 各見出しの色とデザインを決定 】

1.ワードプレス管理画面の外観カスタマイズの順にクリック

AFFINGER customize

2.見出しタグ ( hx ) / テキストをクリック

AFFINGER caption customize

3.カスタマイズしたい見出しを選択

AFFINGER caption customize

各見出しの説明

  • H2タグ‥見出し2
  • H3タグ‥見出し3
  • H4タグ‥見出し4
  • H5タグ‥見出し5

ここでは見出し2のカスタマイズをしていきますので、「H2タグ 」をクリックします。

あおいろ

※h2タグ ( 見出し2 ) は記事内の章の内容を要約した大きな見出しになります。

目次でみると画像の赤枠部分がh2タグ ( 見出し2) になります。

例:Twitter感謝企画とは?やるべき理由と3つの注意点 目次

AFFINGER headline2
※目次はプラグイン「Table of Contents Plus 」使用

4.見出しタグ ( hx ) /テキストH2タグをクリックしたらデザインと文字色、背景色を決める。

赤枠のボックス内でデザインをカスタマイズできます。

記事をひらいてデザインを見ながらカスタマイズするとわかりやすいです。

↓↓↓

見出しデザインのカスタマイズ手順は以上です。

次の章でAFFINGER6の見出しの基本デザインの種類を一気にみていきましょう。

見出しデザイン一覧

1:吹き出しデザイン ( 当ブログ採用 )

AFFINGER headline customize
吹き出しデザイン

2:囲み左ラインデザイン

AFFINGER headline customize
囲み左ラインデザイン

3:2色アンダーライン

AFFINGER headline customize
2色アンダーライン

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

2色アンダーラインに似ていますが、こちらは色がグラデーションになっています。

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

5:センターライン

センターライン

6:囲みドットデザイン

囲みドットデザイン

7:ストライプデザイン

ストライプデザイン

8:破線アンダーライン

破線アンダーライン

9:左ラインデザイン

左ラインデザイン

10:チェック ( ボックスタイプ )

チェック ( ボックスタイプ )

11:なし

なし

以上がAFFINGER6見出しの基本デザインです。

あとは基本デザインのボックスの角を丸くしたり、テキストを中央によせたりもできます。

あおいろ

青枠部分にチェックを入れて補足でカスタマイズできる

補足のカスタマイズ一覧

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

最後に:AFFINGER6見出しデザインはブログの雰囲気にあわせてカスタマイズしよう

以上AFFINGER6での見出しデザインのカスタマイズをご紹介しました。

AFFINGER6の見出しは最初から入っている機能でかなり多くのパターンをつくることができます。

自分のブログの雰囲気に合わせて好みにカスタマイズしていきましょう。

あおいろ

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

今回は以上です。

-AFFINGER6, ブログ