AFFINGER5カスタマイズ【見出し内に画像を挿入する方法】

AFFINGER5の見出しデザインのカスタマイズ方法の紹介です。

見出し内に画像を挿入する方法を、以下の2パターンで紹介します。

こんな人のお役に立てる記事です。

小豆

AFFINGER5で、見出し内に画像を入れるのってどうやるの？
自分だけのオリジナルデザインの見出しを作りたい。

【AFFINGER5】見出し内に画像を挿入するカスタマイズ

早速ですが、まずは見出しデザインの「ビフォー＆アフター」から。

AFFINGER5デフォルトの状態の見出しデザインです。

小豆

悪くはないんだけどなぁ。
ただ、ありきたり過ぎてちょっとつまんない。

続いて、見出し内に画像を挿入したカスタマイズ後のデザインです。

だいぶ見た目の印象が変わりますね。

ちなみに、各見出しごと（H2～H5)にデザインを変えることが可能です。

小豆

見出しの文字の色は変えれないの？

画像挿入以外の見出しカスタマイズ

こんな場合は、以下の記事を参考にしてください。

見出し内に画像を挿入する手順【画像の入手先も紹介】

以下の2パターンの手順をそれぞれ解説していきます。

step
1見出し設定を開く

WordPressメニュー　→　外観　→　カスタマイズ　→　各テキストとhタグ

画像を挿入したい見出しを選択します。

step
2画像を選択する

背景画像　→　画像を選択

見出しに使用したい画像を選択します。

50px × 50px程度のサイズの「背景が透明なPNG画像」を使用するとうまくいきます。

大福

見出しに使用する画像は、以下のサービスを利用すると便利だよ。

step
3位置を調整する

画像の位置を調整

ワンポイント画像の位置調整は、余白を調整してテキストと画像が被らないようにします。

大福

以上で見出し内に画像を入れる手順は完了！
次は、応用編の紹介だよ。

特定の見出しのみデザインを変更する方法

今回紹介した方法でカスタマイズを行った場合、ブログ内の全ての見出しにそのカスタマイズが反映されます。

小豆

うーん。
できれば画像入りの見出しは、ここぞ！という時だけに使いたい。

こんな場合は、【まとめ見出し】の利用が便利です。

【まとめ見出し】を利用することで、以下のような使い分けが可能になります。

【まとめ見出し】のカスタマイズと使い方

WordPressメニュー　→　外観　→　カスタマイズ　→　各テキストとhタグ　→　まとめタグ

テキストを選択　→　スタイル　→　見出し　→　まとめ

まとめ：見出しデザインで差をつけよう

AFFINGER5を使用しているブログはたくさんありますが、オリジナルデザインの見出しはあまり使われていません。

というわけで、多くのブログに差をつけるチャンスですね。

すごく簡単にできますので、ぜひやってみて下さい。

ちなみにオリジナルデザインの見出しを使用すると、より一層自分のブログに愛着が湧くのでおすすめです。

AFFINGER利用者向けオリジナル特典の販売

＼ AFFINGER6にも対応済み ／

AFFINGERをすでに利用しているユーザー向けの「カスタマイズ＆役立つテクニック」集です。

目的に合わせて、以下の2つを用意しました。

特典詳細ページへ移動する