【シンプルおしゃれデザイン】見出しタイトルの上下に疑似要素で画像を表示する方法

2023-10-01 by スキマデザイン

ホームページ、WEBサイトにおいて、「見出し」はとても重要です。
昔々、見出しは目立たせるようにデザインされた「画像」で表示することが一般的だった時代もあります。
ただ、現在では、やはり画像ではSEO的に不利な面があるのと、できるだけシンプルで分かりやすい見出しデザインが好まれる傾向があるので、
今回は、テキストベースで記述して、CSSを使って、見出しタイトルの上下にアイコンなどの画像を表示してデザインする方法を解説いたします。

HTML記述

<h2>見出しタイトル</h2>

見出しの上下に表示させたい画像のアップロード

表示させたい画像をWordPressにアップロードし、URLをメモしておきます。

CSS記述

h2 {
position:relative;
}

/*上に配置する場合*/
h2::before {
content:url(); /*表示する画像のURL*/
position:absolute;
top:-40px; /*見出しから上40pxの位置に配置*/
left:0;
right:0;
transform: scale(0.5); /*高解像度ディスプレイ対応のサイズで作成した画像を半分の大きさで表示*/
}

/*下に配置する場合*/
h2::after {
content:url(); /*表示する画像のURL*/
position:absolute;
bottom:-40px; /*見出しから下40pxの位置に配置*/
left:0;
right:0;
transform: scale(0.5); /*高解像度ディスプレイ対応のサイズで作成した画像を半分の大きさで表示*/
}

見出しから画像の距離は、見出しのサイズや画像のサイズ、意図した空白のデザイン等により変わると思うので、適宜調整してください。
高解像度ディスプレイでもぼやけて見えないように、表示したいサイズの倍で画像を作成し、半分の大きさで表示するようにコードを追記しています。

以上になります。
簡単ですね。