はてなテーマ「Brooklyn」のシェアボタンにLINE共有ボタンを追加してみた。

Sponsored Link

ブログ開設当初から「Brooklyn」というブログテーマを使わせていただいております。

素人ながら試行錯誤しつついろいろカスタマイズしているのですが、この度シェアボタン に「ラインで共有」を追加してみました。

 

↓こんな感じ。

f:id:s_ahhyo:20190413174225p:plain

 

 

 

まさか僕がブログデザインの記事を書くとは・・・って感じなんですが、いろいろがんばっていじっていたらできましたので一応共有です。

もちろんコピペOKです!(わざわざ記事にして紹介してくれると喜びます)

 

前提

はてなブログテーマ 「Brooklyn」を使っている方で、テーマ独自のデザインのシェアボタンを導入している方は「デザイン > カスタマイズ > 記事」の「記事上」もしくは「記事下」の任意の場所に以下のようなタグが挿入されていると思います。

されていない場合は追加してください。

これで「Brooklyn」独自のおしゃれシェアボタンが搭載されます。(カラーのVer.はご自身で探してください)

 

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

<!--シェアボタン-->

<div class="share-button">

<div class="share-inner">

<!--はてブ-->

<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>

<!--Facebook-->

<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button "><i class="fa fa-facebook-square lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>

<!--Twitter-->

<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button "><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>

<!--ググタス-->

<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button "><i class="fa fa-google-plus"></i><br><span class="small-text">Google</span></a>

<!--Pocket-->

<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button common" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a> </div> </div>

Google+はサービス終了予定になっているので、<!--ググタス-->以下<!--Pocket-->手前までは丸々カットしても問題ないと思います。

 

はてブ数とFacebookシェア数の削除(したい人だけ)

また、個人的にはてブ数とFacebookシェア数の取得は読み込みに時間がかかると思ったので削除してテキトーな文字を入れています。

 

具体的には

はてなブックマーク

<!--はてブ-->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br><span class="small-text">はてブ</span></a>

Facebook

<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button "><i class="blogicon-facebook lg"></i><br><span style="font-size: 10px">Facebook</span></a>

こんな感じにしました。

通常のsmall-text指定だとFacebookの文字がはみ出してしまうのでテキトーに調整しています。それでもまだガタガタしていますが、もう許してください。

 

当然ですがシェア数のカウントを導入しない場合、カウントするためのjavascriptは挿入しなくて大丈夫です。

Font Awesome 5の導入

LINEのアイコンをフォント扱いで導入するため「Font Awesome 5」を導入します。

導入といっても、上記のタグの一番上にタグを追加するだけ。

 

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

 

これを挿入する時にFont Awesome 4.5.0のタグを消してしまうとFacebookとPocketのアイコンが消えてしまったので両方記入しました。

LINE共有のタグを挿入

そのあとはLINE共有のためのボタンを「デザイン > カスタマイズ > 記事」の「記事上」もしくは「記事下」の任意の場所に追記します。Pocketの後ろでいいと思います。

 

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

<span class="small-text">LINE</span></a>

 

 ちなみにカラーアイコンで導入したい場合はこちらを。

 

<!--Line-->
<a href="http://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" class="line-button color" target="_blank"><i class="fab fa-line lg"></i><br>

<span class="small-text">LINE</span></a>

 

 

CSSを挿入

「デザイン > カスタマイズ > 記事 > デザインCSS」に以下のコードを挿入します。

 

/*シェアボタン line*/
.share-inner .line-button .lg {
font-size: 30px;
}
.share-inner .line-button {
padding-top: 1px;
padding-bottom: 7px;
}

 

カラーアイコンで導入したい場合は上のコードのすぐ下にこちらも挿入してください。

 

 

.share-inner .line-button.color {
color: #00B900;
border: 1px solid #00B900;
}

 

 

↓カラーアイコンで導入するとこんな感じです。

f:id:s_ahhyo:20190414003901p:plain

ちゃんとLINEっぽいカラーをチョイスしておきました。

 

ただ、僕は複数ブログを持っていて、このサイト「生きていくなんてわけないよ」ではカラーで対応できたのですが、同じコードをコピペしているだけなのに他のサイトの方では反応せず白黒のまま、という謎仕様になってしまい大いに頭を悩ませています。一体なんでなんだ・・・。

諦めずに挑戦はしてみますが、同じような現象が起きても僕には原因がわからないのでなるべく自力で解決してください 笑

はてなブログ Perfect GuideBook

はてなブログ Perfect GuideBook

 
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

 

参考にしたサイトたち

www.notitle-weblog.com作者様のサイト。お世話になっております。

www.style-yry.com目次下から2番目「その他、「Brooklyn」CSSのカスタマイズ方法」を参考にさせていただきました。僕みたいな素人はCSSの呼び出し方法も知らんのです。

webdesign-trends.netFont Awesome 5の使い方の参考にさせていただきました。