こんにちは。
Aoirolife運営者のあおいろです。
Twitterはこちらから→@ao_bloger
今回はAFFINGER６を導入したての方向けに、見出しデザインのカスタマイズ方法を画像付きでわかりやすく解説します。
AFFINGER６は最初から入ってる機能で十分自分好みにカスタマイズできますのでぜひやってみてください。
AFFINGER６見出しデザインのカスタマイズ方法
さっそく見ていきましょう。
見出しデザインのカスタマイズ手順
AFFINGER６の見出しデザインは下記の手順でカスタマイズすることができます。
【 外観 】→【 カスタマイズ 】→【 見出しタグ 】→【 各見出しの色とデザインを決定 】
１．ワードプレス管理画面の外観→カスタマイズの順にクリック
２．見出しタグ ( hx ) / テキストをクリック
３．カスタマイズしたい見出しを選択
各見出しの説明
- H２タグ‥見出し２
- H３タグ‥見出し３
- H４タグ‥見出し４
- H５タグ‥見出し５
ここでは見出し２のカスタマイズをしていきますので、「H２タグ 」をクリックします。
※ｈ２タグ ( 見出し２ ) は記事内の章の内容を要約した大きな見出しになります。
目次でみると画像の赤枠部分がｈ２タグ ( 見出し２) になります。
例：Twitter感謝企画とは？やるべき理由と３つの注意点 目次
４．見出しタグ ( hx ) /テキストでＨ２タグをクリックしたらデザインと文字色、背景色を決める。
赤枠のボックス内でデザインと色をカスタマイズできます。
記事をひらいてデザインを見ながらカスタマイズするとわかりやすいです。
↓↓↓
見出しデザインのカスタマイズ手順は以上です。
次の章でAFFINGER６の見出しの基本デザインの種類を一気にみていきましょう。
見出しデザイン一覧
１：吹き出しデザイン ( 当ブログ採用 )
２：囲み左ラインデザイン
３：２色アンダーライン
４：グラデーションアンダーライン
２色アンダーラインに似ていますが、こちらは色がグラデーションになっています。
５：センターライン
６：囲みドットデザイン
７：ストライプデザイン
８：破線アンダーライン
９：左ラインデザイン
１０：チェック ( ボックスタイプ )
１１：なし
以上がAFFINGER６見出しの基本デザインです。
あとは基本デザインのボックスの角を丸くしたり、テキストを中央によせたりもできます。
※青枠部分にチェックを入れて補足でカスタマイズできる
補足のカスタマイズ一覧
- ボーダーを上下のみにする
- ボーダーを太くする ( 下をサブカラーに )
- テキストを中央寄せ
- デザインを幅一杯に
- 背景や吹き出しの角を丸くする
- グラデーションを横向きにする
最後に：AFFINGER６見出しデザインはブログの雰囲気にあわせてカスタマイズしよう
以上AFFINGER６での見出しデザインのカスタマイズをご紹介しました。
AFFINGER６の見出しは最初から入っている機能でかなり多くのパターンをつくることができます。
自分のブログの雰囲気に合わせて好みにカスタマイズしていきましょう。
見出しデザインを変えたかった方の参考になれば幸いです。
今回は以上です。
