AFFINGER

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

AFFINGER5お知らせ

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

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

  • 見出しの背景を画像に変更
  • 見出し内にワンポイントの画像を挿入

 

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

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

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

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

ビフォー(デフォルトの見出し)

デフォルトの状態の見出しデザイン

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

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

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

アフター(カスマイズ後の見出し)

見出しに画像サンプル

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

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

 

小豆
見出しの文字の色は変えれないの?
 

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

  • 見出しの色を変えたい
  • 見出し内の文字の色を変えたい
  • 見出しの形(アンダーライン型や囲み枠型など)を変えたい

 

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

見出し
AFFINGER5の見出しデザイン色々【設定方法&サンプル紹介】

続きを見る

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

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

  • 見出しの背景を画像に変更
  • 見出し内にワンポイントの画像を挿入

 

手順

  1. 見出し設定を開く
  2. 画像を選択する
  3. 位置を調整する

 

step
1
見出し設定を開く

見出しの設定

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

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

 

step
2
画像を選択する

背景画像を挿入

背景画像 → 画像を選択

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

WordPress内に保存済みの画像を使用することも可能ですし、新たに画像をアップロードして使用することも可能です。

 

見出し内にワンポイントの画像を使用したい場合

ワンポイント用のロゴ画像

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

 

大福
見出しに使用する画像は、以下のサービスを利用すると便利だよ。
  • 背景画像の無料ダウンロードにおすすめ
  • 写真AC:画像検索窓に「テクスチャ」と入力

 

  • ワンポイント画像のダウンロードにおすすめ

 

step
3
位置を調整する

見出し画像位置の調整

画像の位置を調整

 

ワンポイント画像の位置を調整

ワンポイント画像の位置調整

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

 

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

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

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

小豆
うーん。
できれば画像入りの見出しは、ここぞ!という時だけに使いたい。
  • 全ての見出しにデザインが反映されるのは嫌
  • 画像入りの見出しは、通常の見出しと分けて使いたい

 

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

見出しの違い

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

  • 通常の見出しはカスタマイズせずにそのまま使用
  • まとめ出しのみカスタマイズし、ここぞ!という時だけ使用

 

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

  • カスタマイズ

まとめ見出しのカスタマイズ

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

 

  • 使用方法

まとめ見出しの使い方

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

 

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

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

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

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

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

 

AFFINGER5検討中の人におすすめの記事

 

こちらの記事もよく読まれています

  • この記事を書いた人

大福

人間関係に嫌気がさして10年間務めた会社を退職。その後3年間のニート生活を送る。自宅にいながらパソコン1台で稼げることを知り、現在はストレスフリーな毎日を送っています。このサイトではブログやアフィリエイトで稼ぐ方法を発信しています。自宅にいながら稼げるって素晴らしい♪

-AFFINGER

© 2020 大福日記