コピペでOK！はてなブログでSNSボタンをカスタマイズする際のタグ一覧＆CSS

f:id:akiueos:20141021143102j:plain

はてなブログでSNSのボタンをオリジナルデザインにカスタマイズしたい。そんなときに使えるSNSタグとボタンカスタマイズのCSSをメモしておきます。

はてなブログには独自の変数があるので、これにそってタグを書き換えます。

変数	説明
{Title}	記事タイトル
{Permalink}	記事URL
{URLEncodedPermalink}	URLエンコードされた記事URL

記事ごとにブログパーツやソーシャルプラグインを配置する - はてなブログヘルプ

コピペでOKなSNSコード

ボタンのデザインはCSSで指定してください。html部分に貼るSNSボタンに使えるリンクは以下です。各SNSのマークにはWebフォントを使っているので、前の記事を参考にWebフォントを使用できるようにしてください。

下のコードをそのまま貼り付ければ、あなたのブログをシェアするリンクになります。

<a href="http://weblab.hateblo.jp/entry/icon-webfont-ligature-symbols-20141018">LINE・はてブのマークもあるアイコンWebフォント「Ligature Symbols」を使う方法 - Webのあいラボ</a>

LINE・はてブのマークもあるアイコンWebフォント「Ligature Symbols」を使う方法 - Webのあいラボ

Facebook

<a class="social-button facebook"  href="http://www.facebook.com/share.php?u={Permalink}" target="_blank"><span class="lsf">facebook</span>facebookでシェア</a>

Twitter

<a class="social-button twitter" href="http://twitter.com/share?count=horizontal&amp;original_referer={Permalink}&amp;text={Title}&amp;" target="_blank"><span class="lsf">twitter</span>Twitterでシェア</a>

Googleプラス

<a class="social-button google" href="javascript:(function(){window.open('{Permalink}'+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title),'_blank');})();"><span class="lsf">google</span>Google+でシェア</a>

はてなブックマーク

<a class="social-button hatebu" href="http://b.hatena.ne.jp/entry/{Permalink}" target="_blank"><span class="lsf">hatenabookmark</span>ブックマーク</a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

Pocket

<a class="social-button pocket" href="http://getpocket.com/edit?url={Permalink}&title={Title}" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,scrollbars=yes,height=300,width=600');return false;"><span class="lsf">check</span>Pocket</a>

LINE

<a class="social-button line" href="http://line.me/R/msg/text/?{Permalink}"><span class="lsf">line</span>LINEでおくる</a>

リンク紹介ボタンに使っているCSS

CSSもおいておきます。上の各種SNSボタン紹介の先頭にあるボタンデザインを実現するためのCSSです。 hover時の色はちょっと適当。

このまま使うなら、上のコードをclass="l-social-button"でかこってください。

.l-social-button {
margin: 10px 0 10px;
overflow: hidden;
padding: 20px 0 10px;
}
.social-button {
height: 30px;
width: 115px;
border-radius: 3px;
color: white;
text-align: center;
margin: 0 8px 0 0;
font-size: 0.9em;
padding: 9px 15px;
text-decoration: none;
}
.facebook {
background-color: #3b5998;
}
.twitter {
background-color: #55acee;
}
.google {
background-color: #dd4b39;
}
.hatebu {
background-color: #0078c7;
}
.pocket {
background-color: #f13d53;
}
.line {
background-color: #25af00;
}
.facebook:hover {
background-color: #4e77c9;
}
.twitter:hover {
background-color: #5bbbff;
}
.google:hover {
background-color: #ff5542;
}
.hatebu:hover {
background-color: #009af9;
}
.pocket:hover {
background-color: #ff4258;
}
.line:hover {
background-color: #2bc600;
}