記事の見出しやサイドバーの見出しにアイコンをつけたいわ。
季節ごとにアイコンを変えたいから、簡単な方法がいいな。
アイコンをつける方法はプラグインを使う方法や特殊文字を使う方法があります。今回はCSSで見出しの前にアイコンをつけたいと思います。CSSは更新や変更を楽にしたいときは便利です。
ただ、これが正解の記述では無いことをお断りしておきます。
この記事では、見出しタイトル前にアイコンをつけるCSSの書き方に至った経緯を併せながら解説したいと思います。
アイコンの設置希望条件
- WordPressの本文の見出しとサイドバーの見出し前にアイコンを設けたい
- 同じ画像を使い回したい
- できるだけ簡単に更新や変更をしたい
最後までお付き合いくださいませ。
画像1つで見出しの前にアイコンをつける方法
さっそくアイコンを表示する方法です。
失敗例1にも書きましたが、プラグインではなく無料アイコンの画像を使います。
アイコンの画像を用意する
まずは、アイコンの素材を用意します。
無料のアイコンの品揃えが多い「ICOOON MONO」（https://icooon-mono.com/）からお気に入りのアイコンを探します。
今回アイコンはH2につけます。
H2は32ピクセルくらの大きさがあうと思ったので、32ピクセルを選びました。これはカンです。
テーマのスタイルシートに指定されているかもしれませんが、確認していません。
画像をアップロードしURLをメモしておく
次は、画像をアップロードします。
アップロードしたら、URLをコピーしてメモ帳アプリなどにメモしておきます。
CSSに記述する
次は、CSSに記述します。
記述するCSSは「外観/追加CSS」がいいと思いますよ。テーマのCSSに書き込む方法がありますが、余分に削除してしまったりなど万が一を考えて追加CSSにしましょう。
セレクタは自分で任意でつけるか、またｈデベロッパーツールで調べ、コピーしてメモ帳アプリなどにメモしておきます。
/* H2見出しの前にアイコンを設置したい */
.top-h2::before{
content: url(sample.png);
vertical-align: middle;
}アイコン画像を32ピクセルのまま貼り付けるシンプルな方法です。
「vertical-align: middle;」はあった方が見出しの中央辺りに来ます。
ただ画像の形によっては「vertival-align」がなくてもバランスがいい場合がありますので、画面を確認しながら指定するかどうかを決めてくださいね。
次はサイドバーの見出しにアイコンをつけます。
/* サイドバーのタイトルの前にアイコンを設置したい */
.widget-title.subSection-title{
padding-left: 0px;
}
.widget-title.subSection-title::before{
content: url(sample.png);
display: inline-block;
transform: scale(0.6);
position: relative;
top: 10px;
margin-right: 5px;
}失敗例2ではrelativeとabsoluteを使って、位置を調整しました。そのため、余白をどちらにつけるか指定が異なります。
なぜこうなったか理由は、試行錯誤した末といいようがありません。
試行錯誤した感じでいうと、親要素にrelative指定してパディングの余白をつけて、疑似要素を調整しながら突っ込む感じよりも、疑似要素自身が親の前に割り込んだ方が親要素が素直に後ろに並んでくれた感じで調整しやすかったんです。
また、失敗例2ではdisplayの指示をしなくてもrelativeとabsoluteがあれば縮小されました。
このCSSであれば、URLを書き換えるだけで変更が楽です。お試しくださいね。
失敗例1：プラグインは面倒だった
まずは、失敗した例です。
私はホームページをWordPressで運用しています。そのため、アイコンはプラグインでつけられないかトライしました。
アイコンのプラグイン「Font Awesome」をインストールします。英語ですが、割と簡単に設定ができます。
プラグインはブロックエディタから呼び出すことが出来きます。でも欠点がありました。
つまり、面倒くさかったんです。
失敗例2：PCとスマホではズレていた
次の失敗例は「あるある」だと思います。
CSSの記述自体は間違っていないと思います。
/* CSSでこのように書きました */
.widget-title.subSection-title{
position: relative;
padding-left: 30px;
}
.widget-title.subSection-title::before{
content: url(exsampel.com);
transform: scale(0.6);
position: absolute;
left: -7px; /* この数値は任意です */
top: -9px; /* この数値は任意です */
}F12キーで表示されるデベロッパーツールでもパソコンのブラウザでは表示はずれることはありませんでした。
でも、実際に自分のスマホで確認すると、上にずれています。左がパソコンで右がスマホです。
デベロッパーツールを過信しちゃいけないなと思います。
でも、これは私のスマホだけかもしれません。実際のもので確認する大切さを学びましたよ。
アイコンをつけるのに便利な疑似要素
疑似要素とは特定の文字や行、要素の前後に対してスタイルを適用したいときに使うセレクタです。
たとえば、今回の「::before」や「::after」「::first-line」「::first-letter」があります。
「::before」「::after」を使えば、「★ぽてさら★」の見出しを作ることができます。
別に★をテキスト入力するばいいじゃないの？
CSSにいちいち記述するのはメンドーくさいわ。
「★」と入力すれば済むところを、いちいちCSSで記述するのは面倒ですよね。
でも、それには理由があるのですよ。
HTMLは文章の構造や内容を記すもので、★は装飾だから本来ならば不要です。なるべくスッキリとしたHTMLにしたいので、★はCSSで指定するのが妥当なのです。
私がよくする失敗ですが「::before」などの前にはスペースはいりません。
指定するセレクタのすぐ後に空白を入れないで「::before」を書きましょう。そうしないと何も反応がありませんよ。
最後までお付き合い頂き、ありがとうございました。