ルクセリタスで見出しにアイコンを設定してみた　～ワードプレス覚え書き～

覚え書き、そしてルクセリタスを利用されている初心者の方に向けての記事です！

今回はルクセリタスで見出しをちょっといい感じにアイコン設定する方法をご紹介いたします。

ぷぷんたは無料でお手軽にブログをかわいくしたかったので、今回はこちらを利用させていただきました。

標準の見出しよりも見栄えが良くなりますのでおすすめですよ！！

採用した方法について

「Font Awesome」 というサイトを利用させていただきました。

こちらのサイトで好きなアイコンを探して、CSSに設定するという流れになります。

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

こんな感じの画面なので、下半分に表示されているようなアイコンが下の方にもたくさんあります。

そこでまずは自分好みのアイコンを探しましょう。

お気に入りのアイコンを見つけたら

次は見つけたアイコンをクリックするとこんな画面が表示されます。

この画面の上部に表示されているUniCodeという文字列を使用して、CSSに設定します。

上記画像の赤枠内がUniCodeです。

こちらの文字列をメモしておきます。

CSSにコード文を追加する

特に難しいことはなく、以下の通りコピペしてもらえれば簡単に設定できます！

ワードプレス管理画面のメニューにある 『Luxeritas』⇒『子テーマの編集』⇒『style.CSS』

この順番でCSS編集画面を開きます。

そしてここの本文に以下の文字をコピペしてください。

.post h2{ Color:#59a0ba; border-bottom:5px solid #59a0ba; border-left:transparent } .post h2:before{ font-family:"Font Awesome 5 Free"; content:"\f77c"; margin-right:15px; font-weight:900; font-size: 35px ; color:#59a0ba; }

.post h2　という表記が２つでてきますが、これはH2の見出しの設定という意味なので、追加したコードの更にしたにH2ではなくH3と表記したコードを追加すれば、H3の見出しも変更できます。

ぼくは以下のような感じで設定してます。

このままコピペすればこのサイトと同じ仕様になります。笑

.post h2{ Color:#59a0ba; border-bottom:5px solid #59a0ba; border-left:transparent } .post h2:before{ font-family:"Font Awesome 5 Free"; content:"\f1b2"; margin-right:15px; font-weight:900; font-size: 35px ; color:#59a0ba; } .post h3{ Color:#59a0ba; border-bottom:3px solid #59a0ba; border-left:transparent } .post h3:before{ font-family:"Font Awesome 5 Free"; content:"\f6d1"; margin-right:15px; font-weight:900; font-size:25px; color:#59a0ba; }

簡単にコードの内容を説明すると以下のようになります。

.post h2{
 Color:#59a0ba;
 border-bottom:5px solid #59a0ba;
 border-left:transparent
 }

ここまでの文字列は見出し自体の書式設定です。

Color：ここで色コードを設定すると、見出しの文字色を変更できます。

border-botomm:ここで数字を変えると下線の太さを設定できます。

solid：ここで下線の色を設定できます。

以下は見出し横に表示されるアイコンのコードです。これを追加することにより、アイコンが表示されるようになります。

 .post h2:before{ font-family:"Font Awesome 5 Free"; content:"\f77c"; margin-right:15px; font-weight:900; font-size: 35px ; color:#59a0ba; }

content:"\f77c″;　の　\以降の文字の\以降の部分（content:"\○○○○″; ）を先ほどメモしたUniCodeに変更すると、あなたの選んだアイコンが表示されるようになります！

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

font-size:の数字を変更すると、アイコンの大きさを変更できます。

color:で色コードを指定してあげると、アイコンの色を変更できます。

以上の設定をすれば見出しの最初にアイコンが表示されるようになります！！

以前のぼくのように見出しの設定を標準のままにしているあなた。この簡単な設定をするだけでがらっとサイトの印象を変えることができるので、設定していないかたは是非試してみてください！！

一度この設定をしておくことにより、今後は自動で全ての見出しに反映されるので楽だし印象も簡単に変えることができるので、あなたのサイトもワンランクアップです♪

合わせて読みたい記事

ルクセリタスでツイッターのタイムラインを表示させてみた　～ワードプレス覚え書き～

ブログでなにかＳＮＳとの連携が出来ないかなーと思っていたときに、このツイッターのタイムラインを表示しているのを見かけました。これはぼくもやりたい！！と思ったぷぷんたは早速行動に移してみました。表示[…]