Blogger｜ガジェットのタイトル横にアイコンを表示させる方法。

みなさんこんにちは、そえパパです！
今回はテンプレートのガジェットのタイトルにアイコンを表示させる方法のお話です。

「人気の記事」や「カテゴリー」などガジェットの最初にタイトルがあると思いますが、それだけだとちょっと寂しいので関連したアイコンを足してあげると分かりやすくなりますしポップな感じにもなるのでおすすめです。

テンプレートはVaster2を使って解説していきますね。

アイコンはFont Awesomeを使う

Font Awesomeというのをご存知ですか？

WEBフォントを利用できるサービスなんですが、無料ですし画像のアイコンと違い拡大縮小しても輪郭がぼやけたりしませんのですごく便利なんですよ。

利用するには特定のコードをテンプレートに組み込めば使えるようになるのですが、Bloggerの日本語テンプレートであるVaster2にもFont Awesomeを使用するためのコードが書かれているのでVaster2を使っているのであれば特に設定しなくてもそのまま利用することができます。

Font Awesomeのバージョンを確認する

ひとつだけ注意点があって、現在はバージョンが２種類あることです。
Ver.4とVer.5があり当然Ver.5の方が新しいです。新・旧どちらも使えるのですがアイコンを指定するコードがそれぞれ異なるのでどっちを使っているかは把握しておく必要があります。

Vaster2では古い方のVer.4なのですが、最終バージョンじゃないので少しだけコードを書き換えておきましょう。

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

これがVaster2に組み込まれているコードです。テンプレート内を「awesome」で検索すればすぐ出てきますが最初の方にあるので検索しなくてもすぐ見つかると思います。

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

バージョンが4.4.0なので4.7.0に書き換えておきましょう。4を7に変えるだけでOKです。

今のところはどちらも使えますが心配な方は新しいバージョンに書き換えましょう。

<link href='https://use.fontawesome.com/releases/v5.0.6/css/all.css' rel='stylesheet'/>

上記をのコードに差し替えればOKです。
これで新しいFont AwesomeのVer.5を使えますが、アイコンを表示させるためのコードは古いままなのでVer5用のコードに全て書き換える必要があるのをお忘れなく。

ガジェットのタイトル横にアイコンを付ける

テンプレートにアイコンを使用するにはFont Awesomeを利用するためのコードと、使用したいアイコンのコードを入れたい場所に記述することで表示させることができます。

カテゴリーやアーカイブのタイトル横に置くと何のガジェットなのかわかりやすくなるので追加してみましょう。

まずはテーマの「HTMLの編集」からテンプレートのコードを開きましょう。
失敗してもいいようにバックアップは忘れずに。

カテゴリのタイトルのカスタマイズは簡単です。「ウィジェットへ移動」を使えば一発で底に移動してくれます。

表示が省略されている場合は左側の黒い三角をクリックすれば展開されます。

ラベルのタイトルにアイコンを追加

それでは今回はラベル(私の場合はラベルをカテゴリーに書き換えています。)をカスタマイズしてみましょう。

ウィジェットへ移動を開いて「Label1」を選択します。

<b:widget id='Label1' locked='false' title='ラベル' type='Label' version='1'>

この行から下がラベルを構築しているコードになります。

この少し下にタイトル部分のコードがあるので探してみましょう。

<h4>
<data:title/>
</h4>

見出しタグに挟まれた<data:title/>がタイトルを表示しています。この<data:title/>の手前にアイコン用のコードを足してやればアイコンが表示されるようになります。

Ver.4であれば
<i aria-hidden='true' class='fa fa-tags fa-fw'/>
Ver.5であれば
<i aria-hidden='true' class='fas fa-tags fa-fw'/>

バージョンで微妙に違うので間違えないように注意しましょう。

<h4>
<i aria-hidden='true' class='fa fa-tags fa-fw'/><data:title/>
</h4>

Ver.4であればこう記述します。「fa fa-tags」というところがアイコンごとに割り振られたコードなのですが、その後ろに「fa-fw」というclassが追加されています。これを入れると「アイコンの幅を統一させる」という指定になり左右に少しスペースが入るようになります。アイコンの形状で違いがありますがとりあえず入れておくと詰まったようには見えなくなるので追加しておきましょう。

はいこんな感じになりました。わかりやすいですし少しにぎやかになっていると思いません？

アーカイブのタイトルにアイコンを追加

次はブログアーカイブにアイコンを表示しましょう。月刊なのでカレンダーがおすすめです。ウィジェットへ移動を開いて「BlogArchive1」を選択します。

Ver.4であれば
<i aria-hidden='true' class='fa fa-calendar fa-fw'/>
Ver.5であれば
<i aria-hidden='true' class='far fa-calendar-alt fa-fw'/>

カレンダーのアイコンのコードはこちら。

<h4>
<i aria-hidden='true' class='fa fa-calendar fa-fw'/><data:title/>
</h4>

実際の記述はこうですね。

はいブログアーカイブにもアイコンが追加されました。この調子でどんどん追加していきましょう！

まとめ

いかがでしたか？
アイコンを追加するとわかりやすくなりますしデザイン的にも良くなります。もちろんテンプレートのタイプによっては合わないこともありますので自分の好みに合わせて使用してくださいね。

文字だけだと少し寂しいですし使い方も簡単なのでおすすめです！

今日のお話はここまで！
それではまたお会いしましょう〜

Blogger Vaster2 カスタマイズ