Vaster2 雑記

【Vaster2】公開日やラベルのアイコンフォントを最新版に修正

スマホ版でこのブログを表示したときに、どうもアイコンフォントの読み込みがおかしいので、今回Vaster2にあるアイコンフォントのコードを新しいものに修正しました。

修正するにあたってはこちらのブログの記事がとても参考になりました。

すたすた式
[Vaster2] Font Awesome5にかえてみました [Blogger]

手順

Font Awesomeのバージョンを4.4.0から5.0.6に変更

HTML編集画面を開いて<head>のすぐ下あたりにFont Awesome（アイコンフォントのあるサイト）のコードがあります。

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

 Vaster2では、こちらの旧バージョン4.4.0のコードが記述されていると思います。

この旧バージョンのコードを以下の最新版のFont Awesome 5のコードに書き変えます
更新前
<link href = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel = 'stylesheet' />

更新後
<link href = "https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel = "stylesheet" />

各アイコンを変更

あとは、Vaster2のHTML内にある各アイコンフォントのコードも最新版のものに書き換えていきます。

Vaster2のHTML編集画面内でCtrl+Fキーを押して「fa-tag」や「fa-clock-o」と検索するとヒットすると思いますが、それがラベルと記事公開日の横に表示されるアイコンのコードです。

時計のアイコンならこのようになっていると思いますが

<i aria-hidden = 'true' class = 'fa fa-clock-o'> </ i>


Font Awesome5の時計アイコンのコードは、
fa fa-clock-oからfar fa-clockに変更となっているので書き換えます。


変更前
<i aria-hidden = 'true' class = 'fa fa-clock-o'> </ fa>
 fa fa-clock-oの部分を

fontawesome　icons_clockのページ左下にあるリンク部分に書き換えます。



変更後
<i aria-hidden = 'true' class = 'far fa-clock'> </ i>


この他にも時計のアイコンは複数あるので、お好きな時計アイコンを選んでページ左下にあるコードからコピペしましょう。

時計のアイコンならclockで検索するとヒットします。


また、<i aria-hidden='true' class='○○○'></i>の○○○の中身を書き換えることで、好きなアイコンに変えることもできます。

 たとえば公開日の時計アイコンをカレンダーのアイコンに変更する場合は中身を

<i aria-hidden = 'true' class = 'far fa-calendar-alt'> </ i>

に変更します。

この他にもFont Awesomeのサイトには無料で利用できる多数のwebアイコンフォントがあるので、一覧から検索して好きなものに変えましょう。

スマホ版のメニューバーにあるアイコンの変更

ちなみに、スマホ表示時のメニューバーに使われているアイコンフォントはbarsというアイコンです。

 こちらも上記同様に変更します。

変更前
<div class = 'button-toggle'> <i class = 'fa fa-bars'> </ i>メニューを開く</ div>

変更後
<div class = 'button-toggle'> <i class = 'fas fa-bars'> </ i>メニューを開く</ div>

SNSボタンの編集

ツイッターやフェイスブックなどのシェアボタンに関しては、完全にすたすた式さんの記事を参考に修正したのでそちらを見た方がいいです。
（というかこの記事よりこっち見た方が分かりやすいです）

ということで無事すべてのアイコンの修正完了！スマホ表示時の読み込みも正常になりました。

バージョンが古いと挙動がおかしくなるんでしょうかね。

特に理由がなければFont Awesomeのコードは最新のものに変えた方がいいですね。使えるアイコンも増えるので。