はてなブログにSNSのシェアリンクを追加するのでR ver2

以前にここの記事ではてなブログにSNSのシェアリンクを追加する方法を書いたのでR。

それは、「記事下」or「記事上」に固定して出すタイプだったのでR。

しかし、

画面の左下あたりに、スクロールしても常にSNSのシェアリンクが出るとかっこいいのでＲ。

例えば、

他の方を参考にすると、

この方の記事や、この方の記事のようにしたいのでR。

スマホで見ると、

のような感じにするのでR（ちなみに、上の画像は試した後のスクリーンショットなのでR。）。

そこで、この方の記事を参考に試してみたのでR。すると、ほとんど変更なしに、うまいことできたのでR。この方に感謝なのでR。

方法は、

まず、FontAwesomeという下のWebフォントを追加しないといけないのでRが、

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

以前のここの記事で、「ダッシュボード」→「設定」→「詳細設定」→「headに要素を追加」に、追加されていれば、改めて追加する必要はないのでＲ。ない人は、「headに要素を追加」に追加するのでR。

つぎに、

「ダッシュボード」→「デザイン」→「カスタマイズ」→「記事下」or「記事上」に、

<div class="fixed-share-buttons">
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" class="hatena-bookmark-button hatena-bookmark"><i class="blogicon-bookmark"></i></a>
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook" target="_blank"><i class="blogicon-facebook"></i></a>
<a href="http://twitter.com/intent/tweet?text={Title} - {BlogTitle} {URLEncodedPermalink}" target="_blank" class="twitter"><i class="blogicon-twitter"></i></a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket" target="_blank"><i class="blogicon-chevron-down"></i></a>
<a href="http://line.me/R/msg/text/?{Title} - {BlogTitle} {URLEncodedPermalink}" class="line"><i class="fa fa-comment"></i></a>
</div>

を追加するのでR。これで、はてなブックマーク、Facebook、Twitter、Pocket、LINEの5つのSNSシェアリンクとなるのでR。

さらに、

「ダッシュボード」→「デザイン」→「カスタマイズ」→「カスタムcss」に、

.fixed-share-buttons{
text-align: left;
position:fixed;
left:10px;
bottom:8px;
z-index: 100;
}

.fixed-share-buttons a {
position: relative;
display: inline-block;
width: 36px;
height: 36px;
text-align: center;
line-height: 36px;
border-radius:50%;
font-size: 16px;
color: #ffffff;
text-decoration: none; 
padding: 0;
margin:5px;
opacity:0.8;
}

.fixed-share-buttons .hatena-bookmark{
background: #008fde;
}
.fixed-share-buttons .facebook{
background: #305097;
}
.fixed-share-buttons .twitter{
background: #55acee;
}
.fixed-share-buttons .pocket{
background: #EE4256;
}
.fixed-share-buttons .line{
background: #5ae628;
}

を追加するのでR。これで画面左下に、常に追従するようなSNSのシェアボタンが追加されるのでR。

ちなみに、はてなブログのテーマは、レシポンブルのテーマを使用していたので、PCとスマホの両方とも出たのでR。

これが別々の仕様だと、試してみないと分からないのでR。

広告



（広告）月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
（広告）WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』
（広告）年間920円（税抜）からの格安ドメイン取得サービス─ムームードメイン─