SNSボタンにLINEのシェアボタンを加える（Font Awesomeアイコン使用） [Blogger / Vaster2]

Blogger用テンプレートVaster2のカスタマイズ記事です。

この記事は、Font Awesomeアイコンを使って、SNSボタンにLINEのシェアボタンを加える方法を紹介しています。

修正後のイメージ
修正方法

修正後のイメージ

真ん中あたりに見慣れたLINEアイコンがあります。

このブログで使っているSNSボタンは他にも元々のVaster2の設定からかなり変わっていますので、その他の変更が気になる方は別記事を参照してください（後日追記します）。

修正方法

1. Font Awesomeを読み込む部分を書き換える

Vaster2のデフォルトのままだとLINEが使える新しいバージョンになっていないので、その部分を書き換えます。

<変更前>
<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’/>

※表示上の問題で空白が大きく空いて改行がはいってしまっていますが、普通の半角の空白と改行なしです。コピペして整えて使ってください。

2. LINEボタンを追加する

LINEボタンを追加する部分と、LINE部分のデザインを追加する部分の2か所を変更します。

LINEボタンを追加する部分

<!–SNSボタン編集–>という部分を探します。

その少し下に<li class=’feedly’>～～いろいろ略～～</li>のように<li class=xx>で始まり</li>で終わっている行が続いているので、その部分に以下の内容を書き足します。

LINEボタンのデザインを追加する部分

大体上の方ならどこに書いてもいいのですが、他のSNSボタンと同じ場所にデザインを書いておいた方が便利なので、その部分を探して書き加えています。

/*SNSボタンのカスタマイズ*/という部分を探します。
その下に各SNSの名前で始まる塊があるので、その部分に以下を書き加えます。

/* LINE */
.line a {
background:#fff;
color:#00b900;
}

Vaster2のデフォルトの設定だとアイコンの上にマウスを載せると色が反転するようになっていますが、私のブログではその機能をなくしたのでこれだけになっています。

もし「アイコンの上にマウスを載せると色が反転する」というデザインを継承したい場合は、下記のサイトを参考に.line a:hover に続く部分を追加してください。

参考サイト：
Blogger用Vaster2を簡単にカスタマイズしてみる-LINEボタンを追加（休日の空間）
※LINEボタンの追加についてはほぼこちらの記事を参考にしています

3. 他のSNSボタンを修正する

Font Awesomeを更新すると以前のアイコンが使えなくなっているので、その部分を修正します。
先ほどLINEボタンを追加した部分に、各SNSアイコンの記述があります（<li class=xx>～～</li>がひとまとまりです）。

例：Twitterのアイコンを変更する
<li class=’twitter’>　←Twitterのアイコン
～～いろいろ略～～
<i class=’fab fa-twitter’/>　←赤字（太字）部分がアイコン
</a></li>

なお、各SNSのアイコンは以下の通りに変更してください。
Twitter: fab fa-twitter
hatebu: 変更なし
pocket: fab fa-get-pocket
feedly: fab-rss
facebook: fab fa-facebook

もし↑でもうまく見つからない場合は、本家サイトで探してみてください。
Font Awesome
https://fontawesome.com/

各SNSについて1種類だけでなくいろんなアイコンがあります。
私も一部は↑のものから変更して使っています。

※Google+は終了するそうなのでこの機に削除しました
※Feedlyは変更しなくても使えましたが、変更しないままだとアイコンのサイズが他のものと違って不便だったので、変更しています

アイコンのサイズを変える方法

もしアイコンのサイズを変更したい場合は、「.sns li a」という部分を探して、その中に書かれている「font-size:30px;」の数字の部分を変更します。

Font Awesomeを変更する一般的な方法があるのですが、はてぶだけは普通の文字を使っている関係上ここのフォントサイズを変更したほうが楽だと思います。

LINEの文字がつぶれている場合

もしLINEの文字がつぶれている場合は、「.sns li a」という部分に「font-weight: 700;」が書かれている可能性があります。
これは文字の太さを決めている部分なのですが、これがなくなるとはてぶの「B!」が細くなってしまうので、「.sns li a」から「.hatebu a」の部分に移してください。

↓こんなかんじ

/* はてぶ */
.hatebu a {
background:#fff;
font-weight: 700;
color:#5d8ac1 !important;
}

4. 他のアイコンを変更する

この変更を行うと、それまで表示していたFont Awesomeアイコンが表示されなくなります。
そのため、新しい形式に変更する必要があります。

デフォルトで使用しているのは”fa fa-pancil”と”fa fa-tag”なので、それぞれ以下のように修正します。
（修正前）　→　（修正後）
fa fa-pancil　→　fas fa-pancil-alt
fa fa-tag　→　fas fa-tag

その他参考にしたサイト

主要ブランドカラー
LINEのブランドカラーをこちらで検索しました。

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう（サルワカ）
一番最初のFont Awesomeの書き換えはこちらを参考にしました。

関連記事：初心者でもわかるVaster2のカスタマイズ方法の記事リスト