CSSを使って見出しなどに画像やアイコンをつける方法

2019年1月20日2022年6月26日HTML・CSS

UUPDATE

2022年6月26日「6.1 複数行のときのテキストの行揃えや画像やアイコンの位置lを追記しました。
2021年7月12日内容を買えたわけではありませんが、ちょっと見直して書き直ししました。
2019年10月19日「リンクの後ろにアイコンをつける」を追記しました。

今回は『CSSを使って見出しなどに画像やアイコンつける方法』についてご紹介します。

きらり

CSSを使わなくても見出しとかにアイコンフォントや画像はつけられるよね？どうしてわざわざCSSを使ってつけるの？

結耶

確かにCSSを使わくてもできるけど毎回アイコンや画像を入れるのは面倒だよね。CSSを使えば「ここにはこのアイコンを付けてね」って指定できるから毎回入れる必要がなくて楽なんだよ！
それに『擬似要素』は色んなところで使うから覚えておくといいかも！

CSSで設定しておけば見出しやボックスなどにつけることはできます。

※こちらの記事でCSSの基本的な書き方などを説明していますので参考にしてください。

CSSを書く場所と基本的な書き方

2019年7月21日『CSSを書く場所』のそれぞれにCSSを使う場合のメリット・デメリットを追記しました。 ...

https://kirari-yums.net/post-8221//

Contents

1. 擬似要素度を使う
2. 画像をつける
3. アイコンをつける
4. 文字を入れる
5. こんなこともできる
- 5.1. 1文字目を大きく
6. 最後に
- 6.1. 複数行のときのテキストの行揃えやアイコンの位置

擬似要素度を使う

文字などの頭に画像やアイコンフォントを表示させるためには擬似要素を使います。

擬似要素とは

「擬似要素ってなに?」という人も多いと思います。

CSS の疑似要素Pseudo-elementsはセレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。
MDN「擬似要素(Pseudo-Element)」より引用

CSSは以下のように書かれます。

例：見出し h1
h1 { clolor: (色) ; }

h1がセレクタです。

CSS基本
セレクタ { プロパティ: 値 ; }

擬似要素はセレクタにつけるキーワード(位置)のことです。

結耶

擬似要素の他に「擬似クラス」というものもあります。詳しくは以下の記事を参考にどうぞ。

【CSS】擬似要素と擬似クラスの違い

結耶きらりは擬似要素と擬似クラスの違いって知ってる？きらり擬似要素と擬似クラスの違い？知らな ...

https://kirari-yums.net/post-11112/

擬似要素 beforeとafter

擬似要素でよく使われるのはbeforeとafterです。

beforeはセレクタで指定したタグの前、afterはセレクタの後ろ(終わり)に挿入されるものです。

before <タグ名> (内容)</タグ名> after
イメージです。書式ではありません。

イメージ的にはこんな感じです。

きらり

うーん(^^;)

結耶

イメージ湧かない？じゃあ、上で使ってる引用枠を見た方がわかりやすいかも～

beforeとafterを使ってボックスの先頭と最後に引用符を表示させています。

before、afterの擬似要素を使えば上のようなボックスや見出しなどに画像やアイコンフォントをつけたりでき、ブログのカスタマイズにも使えます。

書き方

セレクタ : before(またはafter) { プロパティ: 値 ; }

セレクタはHTMLタグの他にもクラス名、ID名でもつけることができます。
擬似要素はセレクタの後に「：(半角コロン)」を付けて描きます。

画像をつける

擬似要素とプロパティ content を使えば見出しに画像を表示させることができます。

CSS

/*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;」を使い「top」「left」「right」「bottom」を使って調整してください。

 h2:before {
    content: url("画像のURL");  /*画像のURL*/
    margin-right:20px;  /*画像右の余白*/
    position:relative;
    top:5px;      /*上からの位置*/
    left:0;       /*左からの位置*/</div>
}

アイコンをつける

擬似要素(before、after)を使って見出しなどにアイコンをつけてみます。

ひこ

アイコンはFontAwesome(フォントオーサム)を使います。
アイコンを使うにはFontAwesomeの導入が必要です。導入方法や使い方については以下の記事を参考にしてください。

Webアイコン(FontAwesome)を使ってみよう！

Font Awesome6が公開されましたが、Font Awesome6は有料のみの利用となり、Free(無料版)はありません。 ...

https://kirari-yums.net/post-3228/

見出しにアイコンをつける

見出しサンプル

CSS

/*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:10px;  /*アイコン右の余白*/
}

※HTMLは<h3>～</h3> です。

※4行目の『border-left: transparent;』は私が使っているテーマのデフォルトで設定されている左線が表示されてしまうので入れているものです。必要なければ削除してください。

※11行目のアイコンのコードはFontAwesomeのアイコンのページのアイコン名の下あたりにあります。

※12行目のアイコンの種類はアイコンによってRegularやSolidが指定されているものがあります。

【font-weightの設定】
Solid：900
Regular：400 (font-weight指定なしでもOK)

結耶

以下の記事でもFont AwesomeのアイコンをCSSで指定する方法を紹介していますので参考にしてください。

Webアイコン(FontAwesome)を使ってみよう！

Font Awesome6が公開されましたが、Font Awesome6は有料のみの利用となり、Free(無料版)はありません。 ...

https://kirari-yums.net/post-3228/

リンクの後ろにアイコンをつける

リンクの後ろにアイコンをアイコンをつける方法です。

きらり☆彡トップページへ

CSS

a:after {
    font-family:"Font Awesome 5 Free";
    content:"f35d";
    font-weight:900;
    margin-left:7px;
}

きらり

これWordPressで作ったサイトで見かけるよね。リンクの後ろにアイコンをつけるから『after』を使うんだね！

結耶

そうそう。WordPressのテーマによってリンクにアイコンがつくのあるね。

きらり

へぇー。CSSで指定しておけばHTMLの方で指定しなくても表示されるんだね。

結耶

そうそう！見出しとかは常に使うものだからね。
逐一アイコンを挿入させることもなく表示されるから楽だよ(^-^)

引用枠・囲み枠

引用符のアイコンフォントを擬似要素で指定すれば、引用符付きの囲み枠を作ることができます。

以下のサイトで引用符のアイコンフォントを使った囲み枠のデザインがありますので参考にしてください。

CSSで作る！魅力的な引用デザインのサンプル30（blockquote）

画像を使わずにHTMLとCSSだけで実装できる「引用ボックス」のデザインを30個紹介します。シンプルなも ...

https://saruwakakun.com/html-css/reference/blockquote

箇条書きで使う

擬似要素を使えば箇条書きリスト(ul、li)の黒ポチをアイコンフォントや画像にすることができます。

これはサンプルです
これはサンプルです
これはサンプルです

/*箇条書きの黒ポチをアイコンに変える*/
ul {
    list-style: none ;  /*黒ポチを消す*/
}

li:before {
    font-family:"Font Awesome 5 Free";
    content:"f14a";  /*アイコンのコード*/
}

サンプルには他にもいろいろ指定されていますが、ひとつひとつ説明すると『ul、li』の説明をしなくてはならなくなるため、とりあえず『黒ポチを消してアイコンに変える』コードのみ載せておきます。

結耶

以下の記事でアイコンを使ったリストのデザインもしてみましたのでこちらも参考にしてください。

CSSを使ってリスト(箇条書き)をデザインしてみた！

自分の勉強も兼ねて箇条書きリスト(ul、ol)のリストデザインをやってみようと思います。シンプルなリ ...

https://kirari-yums.net/post-13870/

【マラソンクーポン配布！】モバイルバッテリー大容量軽量小型薄型 10000mAh スマホ充電器アンドロイド充電器アイフォン充電バッテリー携帯充電器持ち運び充電器 iPhone 13 Android pse認証大容量モバイルバッテリースマホバッテリー防災停電【楽天1位】

Arjan楽天市場店

¥2,780 （2023/03/21 22:21時点 | 楽天市場調べ）

Amazon

楽天市場

Yahooショッピング

ポチップ

文字を入れる

擬似要素を使えば画像やアイコンのように文字もつけることができます。

これはサンプルです

a:before {
    content:"関連記事";   /*表示する文字*/
    padding:0 7px;
    margin-right:1em;
    background:deeppink;
    color:#fff;
    font-size:14px;
}

こんなこともできる

before、after以外にも要素はあります。また擬似クラスと呼ばれる水樹ものもあります。擬似要素と擬似クラスを使えば他にもいろいろなことができます。

【CSS】擬似要素と擬似クラスの違い

結耶きらりは擬似要素と擬似クラスの違いって知ってる？きらり擬似要素と擬似クラスの違い？知らな ...

https://kirari-yums.net/post-11112/

1文字目を大きく

これはサンプルです

 h5:first-letter {
    font-size: 2em;  /*文字の大きさ*/
    color: #ff6893;  /*文字の色*/
}

first-letterを使って1文字目を大きくしています。

サンプルではh5を使用していますが、pタグにすると<p>～</p>の先頭の文字が大きくなります。

これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。

 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)

きらり

ふーん。擬似要素っていろんなところで使えるんだね！

結耶

そうだよ～。ちなみにこの吹き出しの三角の部分も擬似要素が使われているんだよ♪
私も新しいテーマのカスタマイズでめちゃ使ってるよ！www意味が解ると面白い♪

2022年6月26日追記

複数行のときのテキストの行揃えやアイコンの位置

上記では見出しなどに画像やアイコンを付ける方法を説明していますが、上記の方法だと複数行になった場合以下のようになります。

「テキストの行を揃えたい」「画像やアイコンの位置を真ん中にしたい」という方もいると思います。以下のページではテキストの行揃えやアイコンを真ん中に表示する方法を解説していますので参考にしてください。

画像やアイコンつきの見出しで複数行のときの行頭揃えや画像・アイコンの位置

以前「CSSを使って見出しなどに画像やアイコンをつける方法」という記事を描きました。この記事では擬 ...

https://kirari-yums.net/post-15425/

応援よろしくお願いします。

お問い合わせはこちら

この記事を書いた人

フォロー

結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター

きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

ディスカッション

コメント一覧

さちりんより:
2019年1月28日 4:20 PM
こんにちは
ブログランキングからの訪問です。
見出しって大事ですね。
参考にさせて頂きます。
返信
- 結耶より:
  2019年2月3日 1:36 AM
  こんばんは。
  コメントありがとうございます。
  そうですね。見出しをつけた方が記事にメリハリがつきますからね。
  返信
やすらぎより:
2019年1月22日 7:48 PM
ランキングから来ました。
これから、ブログの勉強をします。
まだまだですね。
ありがとうございました。
返信
- 結耶より:
  2019年1月25日 5:41 PM
  こんにちは。
  CSSはちょっと難しいですが、覚えるといろいろなことができます。
  私もまだまだですが少しずつ勉強してます。
  返信