興味のあること備忘録

調べ好きな私が、調べに調べてやってみた「イイコト」をちょこちょこ書いていきましょう。

かわいいSNSボタンを設置する コピペだけでOK

\ この記事をシェアする /
ランキング参加中。押して頂けたら嬉しいです ➡ にほんブログ村へ

はてなブログのSNSシェアボタンってバラバラで統一感がなくてイマイチです。

ちょっと頑張ってカワイイボタンを設置してみました。

参考にしたのはこちらのブログです。
ガーリーなデザインのソーシャルシェアボタンのCSS
こちらを更にカスタマイズしています。
blog.minimal-green.com



初めての作業だったので大変参考になりました。
「引用の範囲内でしたらこのブログの画像・文章・コード転載OKです。ただし引用元をリンク付きでご明記下さい。」

とのことでしたので、ご紹介させていただきます。

私がしたカスタマイズは、
・背景の縦ボーダーを消した
・フェイスブックなどカウント表示を無くした
・アイコン隣の文字を消してマークのみにした
・比率をちょっと変えてコンパクトにした
・ボタンの真上にメッセージを添えた
・Google+の代わりにLINEを入れた
・ついでにブログ村のリンクボタンも分かりやすくした

こんなところです。で、こんな感じになりました。

f:id:tobibibibi:20200424214009j:plain


作業する時は、管理画面→デザイン→カスタマイズ(スパナマーク)→記事→記事ページをプレビュー を押して、見ながら変えていくといいですよ。
トップページにはSNSボタンは出ないので、記事のページをプレビューしてくださいね。


1.まず、これらのロゴ(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">

 

2.ボタンを設置したいところに以下のコードをコピペ

管理画面→デザイン→カスタマイズ(スパナマーク)→記事→(記事上とか記事下)に以下のコードを追記してください。

<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>


3.ソーシャルパーツのチェックはすべて外します。


4.管理画面→デザイン→カスタマイズ→デザイン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= の後ろにはご自身の数字を入れてくださいね。