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

2019年1月20日HTML・CSS

  • 2019年1月26日
    『文字を入れる』と『こんなこともできる』を追記しました。

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

きらり

きらり

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

結耶

確かにただCSSを使わくてもできるけど…CSSを使うと文字の前だけじゃなくいろんなところで使えるんだよ!

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

 

 
[toc]

 

擬似用度を使う

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

 

擬似要素とは

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

 

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

MDN「擬似要素(Pseudo-Element)」より引用

 

 

スタイルシートは以下のように書かれます。

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

h1セレクタです。

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

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

 

擬似要素 beforeとafter

擬似要素でよく使われるのはbeforeafterです。

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

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

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

きらり

きらり

うーん(^^;)
結耶

結耶

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

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

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

 

書き方

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

 
セレクタはHTMLタグの他にもクラス名、ID名でもつけることができます。

 

スポンサーリンク

 

 

アイコンや画像のつけ方

今回は見出しにアイコンをつける方法を解説します。

 

画像をつける

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

サンプル 見出しに画像

見出し h2 としています。お好みによってh3、h4などに変更してください。

上記のように指定するとサンプルのようにできます。
h2すべてに適用されますので HTMLは <h2>~</h2> です。

使う画像サイズは小さいものをお使いください。

 

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

 
※サンプルはすぐ上の見出しです。
※FontAwesome 5 をお使いの場合

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

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

※上記はFontAwesome 5 の場合です。

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

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

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

詳しくは こちら をご覧ください。
ここを指定しないとRegularのアイコンが表示されます。(表示されないこともあります。)

 

FontAwesome 4 をお使いの場合

FontAwesome 4 の場合は、10行目の font-familyを font-family:FontAwesome; にして12行目の『font-weight』を削除してください。

※11行目の文字コードは、 FontAwesome 4でみてください。
(FontAwesome 4 と 5 では使えるアイコンが違います。)

 

きらり

きらり

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

結耶

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

 
2018年1月26日 追記

文字を入れる

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

 

引用枠・囲み枠

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

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

参考

 

箇条書きで使う

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

  • ここに文章が入ります。
  • これはサンプルです。

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

 
2018年1月26日

こんなこともできる

before、after以外にも要素はあります。

1文字目を大きく

これはサンプルです

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

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

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

 

 

最後に

今回はCSSを使って見出しなどに画像やアイコンをつける方法について書いてみました。
私のつたない説明でおわかりになったでしょうか?(^^;)

ちょっとHTMLやCSS(スタイルシート)の知識が必要です。
ですが、擬似要素はテーマのカスタマイズにも使うものです。

今回は画像やアイコンのつけ方についてですが、擬似要素は画像やアイコンだけでなく、さまざまなものに使われます。
覚えておくと便利ですのでこの記事をきっかけに気にしていただけると嬉しいです(o^▽^o)

 

きらり

きらり

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

結耶

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

 

スポンサーリンク

 

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトをはじめた駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。