【ワードプレス ルクセリタス】見出しの最初にアイコンを表示させる

ブログ

さて、今回はワードプレスの見出しの頭にアイコンを表示される方法を紹介します。

斉藤は見出しが殺風景で絵とか模様を表示したかったのですが、無料でアイコンを表示できる方法を知ってこれを採用。

アイコンがない時よりも見た目が良くなりました!

『Font Awesome』で表示したいアイコンを探す

「Font Awesome」というサイトが提供しているアイコンを使用します。

サイトリンク:https://fontawesome.com/icons?d=gallery&m=free

上記リンク先のサイトで好きなアイコンを選び、画像コードをメモします。
アイコン画像コード位置

画像コードは上記画像の赤い四角で囲った部分です。

CSSに見出しのコードを追加する

ワードプレス管理画面の『Luxeritas』→『子テーマの編集』→『style.CSS』

でh2(見出し2)やh3(見出し3)のコードを追加する。

.post h2{
Color:#0000ff;
border-bottom:2px solid #1e73be;
border-left:transparent
}
.post h2:before{
font-family:”Font Awesome 5 Free”;
content:”\f012″;
margin-right:15px;
font-weight:900;
color:#0000ff;
}

.post h2{
Color:#0000ff;
border-bottom:2px solid #1e73be;
border-left:transparent
}
ここまでは見出し自体のスタイルで、以下は見出し前のアイコンのコードです。これを追加すればアイコンが表示されるようになります。

.post h2:before{
font-family:”Font Awesome 5 Free”;
content:”\f012″;
margin-right:15px;
font-weight:900;
color:#0000ff;
}

『content:”\f012″;』の\以降の部分を『content:”\〇〇〇〇”;』のように先ほどメモした画像コードにします。

ここで、『font-weight:900;』というコードを入れないと表示されないアイコンがあるので注意してください。

以上で見出しの最初にアイコンが表示されるようになります。

見出しに絵を表示していなくて、まだアイコンを使用していない方は是非試してみてください。

一度やっておけばあとは自動で毎回挿入されるので、楽ですし見栄えしますよ!