オークニズム

はてなブログでのカスタマイズやブログ運営ノウハウをメインに、オークニが気になったモノ、コトをシェアするブログ。

オークニズム

オークニのイズム満載ブログカスタマイズ

【簡単コピペ】はてなブログのSNSシェアボタンをSANGOみたいにカスタマイズ!

f:id:a24o92:20180102053851p:plain

 ブログカスタマイズの人気項目のひとつに、SNSシェアボタンのカスタマイズはあるあるですね!

はてなブログのカスタマイズ系ブログを見ていても、SNSシェアボタンに関する記事はたくさん見受けられます。

今回は、そんな中はてなブログ界隈ではあまり見ない、けどいい感じにオシャレなシェアボタンがあるので、それをご紹介致します^^

SANGOとは?

「SANGO」とは、webデザインやサイト制作に関するブログ運営で有名なサルワカさんが制作したWordPressのテーマで、昨年の秋からリリースされ瞬く間に大流行してるやつです!

あ、ちなみに有料で1万円です!
もちろん僕も買ってます。とくに女性のウケが抜群ですね!😍

WordPressのテーマでも流行りみたいなのがあって、SANGOの前は「STORK」というテーマがバズってましたね!(今でも十分たくさん見ますがw)

デザインが秀逸

で、SANGOの一番の売りは間違いなくデザインです。作者も「何より居心地の良さを追求した」的なことおっしゃっていました。

ちなみに、その居心地の良いデザインのフォーマットはGoogleもゴリ推しのマテリアルデザインです!

そんなイケてるデザインに搭載されているSNSシェアボタン、イケてないわけないですよね?だったら真似るしか…?!

てことで、ご紹介しちゃいます!😂

SANGO風シェアボタンのカスタマイズ方法

f:id:a24o92:20180102062239j:plain

ちなみに、完成イメージはこんな感じです。
もちろん、「シェアする」の文字は好きに変えれます。

なんか可愛いね!😍

あ、それと今回は数字のカウントはなしバージョンです。そもそも、あのカウントがあるせいでページの読み込み速度が遅くなって、ユーザビリティ損ねる可能性も無きにしもあらずなので、少なくともブログ始めたばかりの僕みたいな初心者には不要ですね!笑

そのうちはてブ数とかドヤりたくなったら、カウント有りバージョンも紹介します!

まずCSSの実装

場所は、管理画面から「デザイン」→スパナアイコンの「カスタマイズ」→一番下「デザインCSS」の中の、一番下でいいかな!

で、以下を全部コピーして貼り付けて下さい。

/* 記事内、シェアボタン */
.sns-btn {margin: 0 auto;text-align: center;}
.sns-btn__title {display: inline-block;position: relative;padding: 0 25px;color: #333;font-size: 22px;font-weight: bold;line-height: 1;letter-spacing: 1px;}
.sns-btn__title:before,.sns-btn__title:after {display: inline-block;position: absolute;top: 50%;width: 20px;height: 3px;border-radius: 3px;background-color: #333;content: "";}
.sns-btn__title:before {left: 0;-webkit-transform: rotate(50deg);transform: rotate(50deg);}
.sns-btn__title:after {right: 0;-webkit-transform: rotate(-50deg);transform: rotate(-50deg);}
.sns-btn ul {padding: 0;margin: 0;}
.sns-btn__item {display: inline-block;position: relative;}
.sns-btn__item a {display: inline-block;width: 80px;height: 76px;margin: 6px 4px;padding: 10px 0;border-radius: 10px;background: ;font-size: 13px;font-weight: bold;text-align: center;vertical-align: middle;transition: .3s ease-in-out;}
.sns-btn__item a:hover {box-shadow: 0 10px 25px -5px rgba(0,0,0,.2);text-decoration: none;}
.sns-btn .sns-btn__item .fa {display: block;width: auto;height: auto;font-size: 35px;line-height: 1;}
.tw a,.tw .scc {color: #7dcdf7;}
.fb a,.fb .scc {color: #7c9dec;}
.gplus a,.gplus .scc {color: #ff7573;}
.pkt a,.pkt .scc {color: #f99593;}
.hatebu a,.hatebu .scc {color: #7cb1ec;}
.line a {color: #8ed97a;}
.fa-hatebu:before {font-family: "Quicksand","Arial",sans-serif;font-size: 1.1em;font-weight: bold; line-height: .9;content: "B!";}

以上がPCでの制御です。

ちなみに\シェアする/の色を変えたい場合は
3行目のcolor: #333; が「シェアする」の文字
4行目のbackground-color: #333; が「\/」
に該当します。

続いて、スマホ用に若干コードを追加します。
これも「デザインCSS」の↑の下にコピペして下さい。

@media screen and (max-width: 480px){
/* 記事内、シェアボタン */
.sns-btn__item a {
display: inline-block;
width: 57px;
height: 76px;
margin: 6px 4px;
padding: 10px 0;
border-radius: 10px;
background: ;
font-size: 13px;
font-weight: bold;
text-align: center;
vertical-align: middle;
transition: .3s ease-in-out;
}
}

これで、見栄え的なカスタマイズは完了です。

HTMLの実装

場所は、管理画面から「デザイン」→スパナアイコンの「カスタマイズ」→「記事」→「記事上」と「記事下」です。

記事上にコピペ

<div class="sns-btn normal-sns">
<ul>
<!-- twitter -->
<li class="tw sns-btn__item">
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" rel="nofollow">
<i class="fa fa-twitter"></i>
<span class="share_txt">ツイート</span>
</a>
</li>
<!-- facebook -->
<li class="fb sns-btn__item">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" target="_blank" rel="nofollow">
<i class="fa fa-facebook"></i>
<span class="share_txt">シェア</span>
</a>
</li>
<!-- はてなブックマーク -->
<li class="hatebu sns-btn__item">
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" target="_blank" rel="nofollow">
<i class="fa fa-hatebu"></i>
<span class="share_txt">はてブ</span>
</a>
</li>
<!-- Pocket -->
<li class="pkt sns-btn__item">
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" target="_blank" rel="nofollow">
<i class="fa fa-get-pocket"></i>
<span class="share_txt">Pocket</span>
</a>
</li>
<!-- LINE -->
<li class="line sns-btn__item">
<a href="http://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" target="_blank" rel="nofollow">
<i class="fa fa-comment"></i>
<span class="share_txt dfont">LINE</span>
</a>
</li>
</ul>
</div>
view raw 記事上 hosted with ❤ by GitHub

記事下にコピペ

<div class="sns-btn normal-sns">
<span class="sns-btn__title dfont">シェアする</span> <ul>
<!-- twitter -->
<li class="tw sns-btn__item">
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" rel="nofollow">
<i class="fa fa-twitter"></i>
<span class="share_txt">ツイート</span>
</a>
</li>
<!-- facebook -->
<li class="fb sns-btn__item">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" target="_blank" rel="nofollow">
<i class="fa fa-facebook"></i>
<span class="share_txt">シェア</span>
</a>
</li>
<!-- はてなブックマーク -->
<li class="hatebu sns-btn__item">
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" target="_blank" rel="nofollow">
<i class="fa fa-hatebu"></i>
<span class="share_txt">はてブ</span>
</a>
</li>
<!-- Pocket -->
<li class="pkt sns-btn__item">
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" target="_blank" rel="nofollow">
<i class="fa fa-get-pocket"></i>
<span class="share_txt">Pocket</span>
</a>
</li>
<!-- LINE -->
<li class="line sns-btn__item">
<a href="http://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" target="_blank" rel="nofollow">
<i class="fa fa-comment"></i>
<span class="share_txt dfont">LINE</span>
</a>
</li>
</ul>
</div>
view raw 記事下 hosted with ❤ by GitHub

記事上と記事下の違いは、「\シェアする/」文字の有無です。上はスマートにアイコンだけ並べて、読み終わった記事下ではしっかり文字でも訴求するってゆー魂胆です。

ちなみに、「\シェアする/」の文字を変えたい場合は、2行目のところの日本語を変更して下さいませ。

以上で完成です!
きっと可愛くなってる!😍

あ、Google+に関して

外してます!
他のカスタマイズ記事では、みんなご親切に付けてる人多いけど…冷静に考えて、今時Google+やってる人いないですよね?!
もはや付けてるだけでナンセンス感漂う昨今なんで…ここでは最初から撤去しております!

スポンサーリンク

まとめ

まー、、、シェアボタンだけオシャレにしたところで、肝心のコンテンツ(記事)に魅力がなければいつまで経ってもシェアされることはないので、、、お忘れなく、、、😂