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

2019年1月20日

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

きらり

きらり

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

結耶

結耶

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

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

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

スポンサーリンク




擬似用度を使う

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

擬似要素とは

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

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 を使えば見出しに画像を表示させることができます。

CSS

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

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

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

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

 注意!アイコンはFontAwesomeを使います。
アイコンを使うにはFontAwesomeの導入が必要です。導入方法についてはこちらを参考にしてください。

※サンプルはすぐ上の見出しです。

CSS

※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の方で指定しなくても表示されるんだね。
結耶

結耶

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

文字を入れる

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

引用枠・囲み枠

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

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

箇条書きで使う

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

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

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

こんなこともできる

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

1文字目を大きく

これはサンプルです

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

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

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

最後に

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

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

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

きらり

きらり

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

結耶

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

スポンサーリンク




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

結耶(ゆうや)

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