はてなブログのＳＮＳシェアボタンってバラバラで統一感がなくてイマイチです。
ちょっと頑張ってカワイイボタンを設置してみました。
参考にしたのはこちらのブログです。
ガーリーなデザインのソーシャルシェアボタンのＣＳＳ
こちらを更にカスタマイズしています。
blog.minimal-green.com
初めての作業だったので大変参考になりました。
「引用の範囲内でしたらこのブログの画像・文章・コード転載OKです。ただし引用元をリンク付きでご明記下さい。」
とのことでしたので、ご紹介させていただきます。
私がしたカスタマイズは、
・背景の縦ボーダーを消した
・フェイスブックなどカウント表示を無くした
・アイコン隣の文字を消してマークのみにした
・比率をちょっと変えてコンパクトにした
・ボタンの真上にメッセージを添えた
・Google＋の代わりにLINEを入れた
・ついでにブログ村のリンクボタンも分かりやすくした
こんなところです。で、こんな感じになりました。
作業する時は、管理画面→デザイン→カスタマイズ（スパナマーク）→記事→記事ページをプレビュー を押して、見ながら変えていくといいですよ。
トップページにはSNSボタンは出ないので、記事のページをプレビューしてくださいね。
１．まず、これらのロゴ（FontAwesome）がある場所をheadに指定してあげる必要があります。
以下をheadに貼り付けて下さい。
管理画面→設定→詳細設定→「headに要素を追加」の欄に以下のコードをコピペ
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
２．ボタンを設置したいところに以下のコードをコピペ
管理画面→デザイン→カスタマイズ（スパナマーク）→記事→（記事上とか記事下）に以下のコードを追記してください。
<div class="sns-share">
<font size="2" color="mediumblue">＼ この記事をシェアする ／</font>
<ul class="sns-area">
<li>
<a
href="http://b.hatena.ne.jp/entry/{Permalink}"
class="hatena-bookmark-button sns-bookmark sns-link"
data-hatena-bookmark-title="{Title}"
data-hatena-bookmark-layout="simple">
<i class="blogicon-bookmark lg"></i></a>
</li>
<li>
<a
class="sns-facebook sns-link"
href="https://www.facebook.com/sharer/sharer.php?u={URLEncodedPermalink}"
onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"
target="_blank">
<i class="fab fa-facebook-f"></i></a>
</li>
<li>
<a
class="sns-twitter sns-link"
href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank">
<i class="fab fa-twitter" aria-hidden="true"></i></a>
</li>
<li>
<a
class="sns-line sns-link"
href="https://social-plugins.line.me/lineit/share?url={URLEncodedPermalink}"
target="_blank">
<i class="fab fa-line"></i></a>
</li>
<li>
<a
class="sns-pocket sns-link"
href="http://getpocket.com/edit?url={URLEncodedPermalink}"
onclick="window.open(this.href, 'pocket_window', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;"
>
<i class="blogicon-chevron-down"></i></a>
</li>
</ul>
</div>
<font size="2" color="red">ランキング参加中。押して頂けたら嬉しいです ➡</font>
<a href="https://blogmura.com/ranking/in?p_cid=11051137" target="_blank" ><img src="https://b.blogmura.com/original/1226807" width="120" height="56" border="0" alt="にほんブログ村へ">
</a>
３．ソーシャルパーツのチェックはすべて外します。
４．管理画面→デザイン→カスタマイズ→デザインCSSに以下のコードをコピペ
/* social */
.sns-share {
background: repeating-linear-gradient();
text-align: center;
margin: 5px auto;
padding: 5px;
box-sizing: border-box;
}
.sns-area {
width: 90%;
margin: 0px auto;
padding: 0px;
box-sizing: border-box;
}
.sns-area li {
margin: 1%;
list-style-type: none;
display: inline-block;
width: 16%;
vertical-align: middle;
}
.sns-area li:last-child {
margin-right: 0
}
.sns-link {
position: relative;
display: block;
color: #fff;
text-align: center;
text-decoration: none;
outline: none;
overflow: hidden;
height: 40px;
line-height: 42px;
}
.entry-header-html a.sns-link,
.entry-footer-html a.sns-link {
color: #fff;
text-decoration:none;
}
a.sns-link:hover {
color: #fff;
opacity: 0.7;
}
.sns-twitter {
color: #fff;
background: #55acee;
border-radius: 16px;
box-shadow: 0 0 0 5px #55acee, 0 2px 3px 5px rgba(0,0,0,0.5);
border: 2px dashed #fff;
}
.sns-facebook {
color: #fff;
background: #3a5795;
border-radius: 16px;
box-shadow: 0 0 0 5px #3a5795, 0 2px 3px 5px rgba(0,0,0,0.5);
border: 2px dashed #fff;
}
.sns-bookmark{
color: #fff;
background: #00A5DE;
border-radius: 16px;
box-shadow: 0 0 0 5px #00A5DE, 0 2px 3px 5px rgba(0,0,0,0.5);
border: 2px dashed #fff;
}
.sns-line {
color: #fff;
background: #00B900;
border-radius: 16px;
box-shadow: 0 0 0 5px #00B900, 0 2px 3px 5px rgba(0,0,0,0.5);
border: 2px dashed #fff;
}
.sns-pocket {
color: #fff;
background: #EE4256;
border-radius: 16px;
box-shadow: 0 0 0 5px #EE4256, 0 2px 3px 5px rgba(0,0,0,0.5);
border: 2px dashed #fff;
}
.blogicon-twitter, .blogicon-facebook, .blogicon-bookmark, .fa-line, .blogicon-chevron-down {
margin-right: 5px;
}
.share-text {
padding-left: 4px;
}
@media only screen and (max-width: 767px) {
.sns-area li {
margin: 2%;
width: 15%;
}
.share-text, .sns-txt {
display: none;
}
.blogicon-twitter, .blogicon-facebook, .blogicon-bookmark, .fa-google-plus, .blogicon-chevron-down {
margin-right: 0;
}
.sns-area {
padding: 0;
}
}
in?p_cid= の後ろにはご自身の数字を入れてくださいね。
