「はてなブログ」LINEボタンを更にカスタマイズ

当ブログでは、ゆきひーさん（id:ftmaccho）の記事を参考にソーシャルボタンをカスタマイズしています。

シンプルで各SNSの特徴もわかりやすく、更にブログの表示速度もアップする素晴らしいカスタマイズ方法です。

ただし注意点もあり、LINEアイコンはWebフォントがないため、代わりに画像が使用されています。 （上記のリンク先にも記載されています）

アイコン画像はゆきひーさんが「はてなフォトライフ」にアップロードされているものですので、何らかの理由で使えなくなってしまう可能性もゼロではありません。

今回はLINEボタンを変更し、画像を使わないようにしてみました。

変更前後のLINEボタン

今回の作業で、LINEボタン（スマホでのみ表示）は次のように変わります。

変更前

変更後

LINEのWebフォントは現在（2016年7月3日時点）も存在しないため、吹き出しの形をした「comment 」を使用しています。

アイコン内の文字「LINE」はなくなりますが、他のソーシャルボタンとの統一感はアップします。 どちらかというとiPhoneの「メッセージ」っぽいですが...

また、表示文字を大文字に変更して「LINEっぽさ」を補っています。

前提条件とお願い

• 冒頭で紹介させていただいた記事にて、ソーシャルボタンの導入が完了していることが前提です。
• LINEボタンの変更は当ブログ独自に行っています。万が一問題が発生した場合でも、ゆきひーさんへのお問い合わせはお控えください。

変更方法（レスポンシブデザイン用）

レスポンシブデザインを使用している場合の変更方法です。

HTMLの変更

ブログ管理画面より[デザイン]→[カスタマイズ]を開き、[記事]→[記事上]または[記事下]に記述したコードの内、LINEの部分を変更します。

変更前

<!--ライン-->
<span class="line-hide">
<a href="http://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" class="line-button">
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/f/ftmaccho/20150905/20150905143148.png" width="18px" height="18px" alt="LINEで送る" /><br><span class="small-text">Line</span>
</a></span>

変更後

<!--LINE-->
<span class="line-hide">
<a href="http://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" class="line-button" target="_blank"><i class="fa fa-comment"></i><br><span class="small-text">LINE</span></a>
</span>

変更前のspan要素（コメントを含めて合計5行）を削除し、変更後のコードを追加します。

CSSの変更

ブログ管理画面より[デザイン]→[カスタマイズ]を開き、[デザインCSS]に記述したコードの内、LINEの部分を変更します。

変更前

.share-flat .line-button{
    position:relative;
    top: 1px;
    background: #00C300;
}

変更後

.share-flat .line-button{
    background: #00C300;
}

2〜3行目は不要となるため削除します。 他のソーシャルボタン同様、背景色（background）の指定のみになります。

変更方法（スマホ用）

レスポンシブデザインを使用していない場合の変更方法です。

HTMLとCSSの変更

ブログ管理画面より[デザイン]→[スマートフォン]を開き、[記事]→[記事上]または[記事下]に記述したコードの内、LINEの部分を変更します。

変更前（HTML）

<!--ライン-->
<a href="http://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" class="line-button">
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/f/ftmaccho/20150905/20150905143148.png" width="18px" height="18px" alt="LINEで送る" /><br><span class="small-text">Line</span>
</a>

変更後（HTML）

<!--LINE-->
<a href="http://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" class="line-button" target="_blank"><i class="fa fa-comment"></i><br><span class="small-text">LINE</span></a>

変更前のa要素（コメントを含めて合計4行）を削除し、変更後のコードを追加します。

変更前（CSS）

.share-flat .line-button{
    position:relative;
    top: 2px;
    background: #00C300;
}

変更後（CSS）

.share-flat .line-button{
    background: #00C300;
}

2〜3行目は不要となるため削除します。 他のソーシャルボタン同様、背景色（background）の指定のみになります。

変更によるメリット

今回の変更により、冒頭でお伝えした画像使用によるデメリットがなくなります。

また、アイコン画像をダウンロードする必要がないため、ごく僅かながら表示を高速化する効果もあります。

更に細かい話になりますが、Webサイトの表示速度を測定する「GTmetrix」において「Optimize images」のスコアが上昇します。 元々のLINEアイコン画像は、「もう少しサイズを圧縮できる」ということで減点対象となっています。

まとめ

今回は全体的に細かな話で、改善効果もごく僅かです。

ですが、こうした細かな改善の積み重ねが、ブログ全体のデザインや表示速度の向上につながります。

LINEボタンをちょっとだけ変えてみたい方、GTmetrixのスコアを1%でもアップしたい方にとって参考になれば幸いです。

はてなブログ関連のおすすめ記事