CSSを使って見出しなどに画像やアイコンをつける方法
- 2019年10月19日
「リンクの後ろにアイコンをつける」を追記しました。
今回は『CSSを使って見出しなどに画像やアイコンつける方法』についてご紹介します。
CSSを使わなくても見出しとかにアイコンフォントや画像はつけられるよね?どうしてわざわざCSSを使ってつけるの?
確かにCSSを使わくてもできるけど毎回アイコンや画像を入れるのは面倒だよね。CSSを使えば「ここにはこのアイコンを付けてね」って指定できるから毎回入れる必要がなくて楽なんだよ!
それに『擬似要素』は色んなところで使うから覚えておくといいかも!
CSSで設定しておけば見出しやボックスなどにつけることはできます。
※こちらの記事でCSSの基本的な書き方などを説明していますので参考にしてください。

擬似用度を使う
文字などの頭に画像やアイコンフォントを表示させるためには擬似要素を使います。
擬似要素とは
「擬似要素ってなに?」という人も多いと思います。
CSS の 疑似要素Pseudo-elementsはセレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。
スタイルシートは以下のように書かれます。
h1がセレクタです。
擬似要素はセレクタにつけるキーワード(位置)のことです。
擬似要素 beforeとafter
擬似要素でよく使われるのはbeforeとafterです。
beforeはセレクタで指定したタグの前、afterはセレクタの後ろ(終わり)に挿入されるものです。
イメージ的にはこんな感じです。

beforeとafterを使ってボックスの先頭と最後に引用符を表示させています。
before、afterの擬似要素を使えば上のようなボックスや見出しなどに画像やアイコンフォントをつけたりでき、ブログのカスタマイズにも使えます。
書き方
セレクタはHTMLタグの他にもクラス名、ID名でもつけることができます。
擬似要素はセレクタの後に「:(半角コロン)」を付けて描きます。
アイコンや画像のつけ方
見出しに画像やアイコン(アイコンフォント)をつける方法を紹介します。
画像をつける
擬似要素とプロパティ content を使えば見出しに画像を表示させることができます。

1 2 3 4 5 6 7 8 9 10 |
/*H2見出し*/ h2 { padding:5px 10px; /*内側の余白*/ border-bottom:2px dashed #a61919; /*下線の太さ 種類 色*/ } h2:before { content: url("画像のURL"); /*画像のURL*/ margin-right:20px; /*画像右の余白*/ } |
見出し h2 としています。お好みによってh3、h4などに変更してください。
上記のように指定するとサンプルのようにできます。
h2すべてに適用されますので HTMLは<h2>~</h2> です。
使う画像サイズは小さいものをお使いください。
画像の位置を調整する場合はposition:relative;を使って調整してください。
1 2 3 4 5 6 7 |
h2:before { content: url("画像のURL"); /*画像のURL*/ margin-right:20px; /*画像右の余白*/ position:relative; top:5px; /*上からの位置*/ left:0; /*左からの位置*/</div> } |
見出しにアイコンをつける
アイコンを使うにはFontAwesomeの導入が必要です。導入方法についてはこちらを参考にしてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/*H3見出し*/ h3{ border-bottom: 2px solid #a61919; /*下線太さ 種類 色*/ border-left: transparent; /*左線を透明*/ color: #a61919; /*文字色*/ } h3:before{ color: #a61919; /*アイコンの色*/ font-family:"Font Awesome 5 Free"; content:"\f058"; /*アイコンのコード*/ font-weight:900; /*アイコンの種類*/ margin-right:15px; /*アイコン右の余白*/ } |
※HTMLは<h3>~</h3> です。
※4行目の『border-left: transparent;』は私が使っているテーマのデフォルトで設定されている左線が表示されてしまうので入れているものです。必要なければ削除してください。
※上記はFontAwesome 5 の場合です。
※11行目のアイコンのコードはFontAwesomeのアイコンのページのアイコン名の下あたりにあります。
※12行目のアイコンの種類はアイコンによってRegularやSolidが指定されているものがあります。
詳しくは こちら をご覧ください。
ここを指定しないとRegularのアイコンが表示されます。(表示されないこともあります。)
リンクの後ろにアイコンをつける
リンクの後ろにアイコンをアイコンをつけることもできます。
1 2 3 4 5 6 |
a:after { font-family:"Font Awesome 5 Free"; content:"\f35d"; font-weight:900; margin-left:7px; } |
これWordPressで作ったサイトで見かけるよね。リンクの後ろにアイコンをつけるから『after』を使うんだね!
そうそう。WordPressのテーマによってリンクにアイコンがつくのあるね。
FontAwesome 4 をお使いの場合
FontAwesome 4 の場合は、10行目の font-familyを font-family:FontAwesome; にして12行目の『font-weight』を削除してください。
※11行目の文字コードは、 FontAwesome 4でみてください。
(FontAwesome 4 と 5 では使えるアイコンが違います。)
文字を入れる
擬似要素を使えば画像やアイコンのように文字もつけることができます。
1 2 3 |
p:before { content:"入れる文字"; /*つける文字*/ } |
引用枠・囲み枠
引用符のアイコンフォントを擬似要素で指定すれば、引用符付きの囲み枠を作ることができます。
以下のサイトで引用符のアイコンフォントを使った囲み枠のデザインがありますので参考にしてください。
箇条書きで使う
擬似要素を使えば箇条書きリスト(ul、li)の黒ポチをアイコンフォントや画像にすることができます。
- ここに文章が入ります。
- これはサンプルです。
1 2 3 4 5 6 7 8 9 |
/*箇条書きの黒ポチをアイコンに変える*/ ul { list-style: none ; /*黒ポチを消す*/ } li:before { font-family:"Font Awesome 5 Free"; content:"\f14a"; /*アイコンのコード*/ } |
サンプルには他にもいろいろ指定されていますが、ひとつひとつ説明すると『ul、li』の説明をしなくてはならなくなるため、とりあえず『黒ポチを消してアイコンに変える』コードのみ載せておきます。
こんなこともできる
before、after以外にも要素はあります。
1文字目を大きく
これはサンプルです
1 2 3 4 |
h5:first-letter { font-size: 2em; /*文字の大きさ*/ color: #ff6893; /*文字の色*/ } |
first-letterを使って1文字目を大きくしています。
サンプルではh5を使用していますが、pタグにすると<p>~</p>の先頭の文字が大きくなります。
これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。
1 2 3 4 5 6 7 8 |
p:first-letter { font-size: 3em; /*先頭の文字の大きさ*/ color:#ff6893; /*文字の色*/ line-height: 1; /*行間*/ float: left; margin: 0 .2em 0 0; padding: .1em 0; } |
最後に
今回はCSSを使って見出しなどに画像やアイコンをつける方法について書いてみました。
私のつたない説明でおわかりになったでしょうか?(^^;)
ちょっとHTMLやCSS(スタイルシート)の知識が必要です。
ですが、擬似要素はテーマのカスタマイズにも使うものです。
今回は画像やアイコンのつけ方についてですが、擬似要素は画像やアイコンだけでなく、さまざまなものに使われます。
覚えておくと便利ですのでこの記事をきっかけに気にしていただけると嬉しいです(o^▽^o)
ディスカッション
コメント一覧
ランキングから来ました。
これから、ブログの勉強をします。
まだまだですね。
ありがとうございました。
こんにちは。
CSSはちょっと難しいですが、覚えるといろいろなことができます。
私もまだまだですが少しずつ勉強してます。
こんにちは
ブログランキングからの訪問です。
見出しって大事ですね。
参考にさせて頂きます。
こんばんは。
コメントありがとうございます。
そうですね。見出しをつけた方が記事にメリハリがつきますからね。
ピンバック & トラックバック一覧
[…] https://kirari-yums.net/2019/01/20/post-6388/#toc_id_2_2https://kirari-yums.net/2018/09/14/post-3228/#toc_id_1_1 […]