はてぶカスタマイズ★ハート形など、可愛いソーシャルボタンを設置する

はてなブログに可愛いソーシャルボタンを設置する方法です。

取り敢えず３パターン用意してみました。

headに要素を追加する

まず、管理画面以下の場所にアイコンフォント用のスタイルシートを読み込むソースを２行貼り付けてください。既に設定してある場合、この工程は不要です。

設定 → 詳細設定 → 検索エンジン最適化 → headに要素を追加

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />

記事上または記事下に追加する

次に、管理画面以下の場所にお好きなデザインのソースを貼り付けてください。手順はこれだけです！（CSSは、デザイン → カスタマイズ → デザインCSSに貼っていただいても構いません。）

デザイン → カスタマイズ → 記事 → 記事上下のカスタマイズ → 記事上または記事下

1.ハート型のシェアボタンを設置する

ハート型のシェアボタンを設置するコードです。
実際はカーソルを合わせるとドキドキ動きます。このサイトのページ下部に設置していますので良かったら試してみてくださいね。

<div class="snsbtn_area">
	<!-- hatena -->
	<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="snsbtn_hatena" target="_blank">
		<span class="fa-stack faa-parent animated-hover">
			<i class="fa fa-heart faa-pulse fa-stack-2x"></i>
			<i class="blogicon-bookmark faa-pulse fa-stack-1x fa-inverse"></i>
		</span>
	</a>
	<!-- twitter -->
	<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="snsbtn_twitter" target="_blank">
		<span class="fa-stack faa-parent animated-hover">
			<i class="fa fa-heart faa-pulse fa-stack-2x"></i>
			<i class="fa fa-twitter faa-pulse fa-stack-1x fa-inverse"></i>
		</span>
	</a>
	<!-- facebook -->
	<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="snsbtn_facebook" target="_blank">
		<span class="fa-stack faa-parent animated-hover">
			<i class="fa fa-heart faa-pulse fa-stack-2x"></i>
			<i class="fa fa-facebook faa-pulse fa-stack-1x fa-inverse"></i>
		</span>
	</a>
	<!-- feedly -->
	<a href="http://cloud.feedly.com/#subscription/feed/{BlogURL}feed/" class="snsbtn_feedly" target="_blank">
		<span class="fa-stack faa-parent animated-hover">
			<i class="fa fa-heart faa-pulse fa-stack-2x"></i>
			<i class="fa fa-rss faa-pulse fa-stack-1x fa-inverse"></i>
		</span>
	</a>
	<!-- google plus -->
	<a href="https://plus.google.com/share?url={URLEncodedPermalink}" class="snsbtn_googleplus" target="_blank">
		<span class="fa-stack faa-parent animated-hover">
			<i class="fa fa-heart faa-pulse fa-stack-2x"></i>
			<i class="fa fa-google-plus faa-pulse fa-stack-1x fa-inverse"></i>
		</span>
	</a>
	<!-- pocket -->
	<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="snsbtn_pocket" target="_blank">
		<span class="fa-stack faa-parent animated-hover">
			<i class="fa fa-heart faa-pulse fa-stack-2x"></i>
			<i class="fa fa-get-pocket faa-pulse fa-stack-1x fa-inverse"></i>
		</span>
	</a>
</div>

<style type="text/css">
.snsbtn_area a {
	display: inline-block;
	font-size: 25px;
}
.snsbtn_area .snsbtn_hatena {
	color: #008fde;
}
.snsbtn_area .blogicon-bookmark {
	top: -2px !important;
}
.snsbtn_area .snsbtn_twitter {
	color: #55acee;
}
.snsbtn_area .snsbtn_facebook {
	color: #315096;
}
.snsbtn_area .snsbtn_feedly {
	color: #6cc655;
}
.snsbtn_area .snsbtn_googleplus {
	color: #dd4b39;
}
.snsbtn_area .snsbtn_pocket {
	color: #EE4257;
}
.snsbtn_area .fa-stack-1x {
	font-size: 18px;
}
</style>

2.スター型のシェアボタンを設置する

スター型のシェアボタンを設置するコードです。
実際はカーソルを合わせると動きます。

<div class="snsbtn_area">
	<!-- hatena -->
	<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="snsbtn_hatena" target="_blank">
		<span class="fa-stack faa-parent animated-hover">
			<i class="fa fa-star faa-tada fa-stack-2x"></i>
			<i class="blogicon-bookmark faa-tada fa-stack-1x fa-inverse"></i>
		</span>
	</a>
	<!-- twitter -->
	<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="snsbtn_twitter" target="_blank">
		<span class="fa-stack faa-parent animated-hover">
			<i class="fa fa-star faa-tada fa-stack-2x"></i>
			<i class="fa fa-twitter faa-tada fa-stack-1x fa-inverse"></i>
		</span>
	</a>
	<!-- facebook -->
	<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="snsbtn_facebook" target="_blank">
		<span class="fa-stack faa-parent animated-hover">
			<i class="fa fa-star faa-tada fa-stack-2x"></i>
			<i class="fa fa-facebook faa-tada fa-stack-1x fa-inverse"></i>
		</span>
	</a>
	<!-- feedly -->
	<a href="http://cloud.feedly.com/#subscription/feed/{BlogURL}feed/" class="snsbtn_feedly" target="_blank">
		<span class="fa-stack faa-parent animated-hover">
			<i class="fa fa-star faa-tada fa-stack-2x"></i>
			<i class="fa fa-rss faa-tada fa-stack-1x fa-inverse"></i>
		</span>
	</a>
	<!-- google plus -->
	<a href="https://plus.google.com/share?url={URLEncodedPermalink}" class="snsbtn_googleplus" target="_blank">
		<span class="fa-stack faa-parent animated-hover">
			<i class="fa fa-star faa-tada fa-stack-2x"></i>
			<i class="fa fa-google-plus faa-tada fa-stack-1x fa-inverse"></i>
		</span>
	</a>
	<!-- pocket -->
	<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="snsbtn_pocket" target="_blank">
		<span class="fa-stack faa-parent animated-hover">
			<i class="fa fa-star faa-tada fa-stack-2x"></i>
			<i class="fa fa-get-pocket faa-tada fa-stack-1x fa-inverse"></i>
		</span>
	</a>
</div>

<style type="text/css">
.snsbtn_area a {
	display: inline-block;
	font-size: 25px;
}
.snsbtn_area .snsbtn_hatena {
	color: #008fde;
}
.snsbtn_area .blogicon-bookmark {
	top: -2px !important;
}
.snsbtn_area .snsbtn_twitter {
	color: #55acee;
}
.snsbtn_area .snsbtn_facebook {
	color: #315096;
}
.snsbtn_area .snsbtn_feedly {
	color: #6cc655;
}
.snsbtn_area .snsbtn_googleplus {
	color: #dd4b39;
}
.snsbtn_area .snsbtn_pocket {
	color: #EE4257;
}
.snsbtn_area .fa-stack-1x {
	font-size: 18px;
}
</style>

3.ムーン型のシェアボタンを設置する

ムーン型のシェアボタンを設置するコードです。
実際はカーソルを合わせると動きます。

<div class="snsbtn_area">
	<!-- hatena -->
	<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="snsbtn_hatena" target="_blank">
		<span class="fa-stack faa-parent animated-hover">
			<i class="fa fa-moon-o faa-float fa-stack-2x"></i>
			<i class="blogicon-bookmark faa-float fa-stack-1x"></i>
		</span>
	</a>
	<!-- twitter -->
	<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="snsbtn_twitter" target="_blank">
		<span class="fa-stack faa-parent animated-hover">
			<i class="fa fa-moon-o faa-float fa-stack-2x"></i>
			<i class="fa fa-twitter faa-float fa-stack-1x"></i>
		</span>
	</a>
	<!-- facebook -->
	<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="snsbtn_facebook" target="_blank">
		<span class="fa-stack faa-parent animated-hover">
			<i class="fa fa-moon-o faa-float fa-stack-2x"></i>
			<i class="fa fa-facebook faa-float fa-stack-1x"></i>
		</span>
	</a>
	<!-- feedly -->
	<a href="http://cloud.feedly.com/#subscription/feed/{BlogURL}feed/" class="snsbtn_feedly" target="_blank">
		<span class="fa-stack faa-parent animated-hover">
			<i class="fa fa-moon-o faa-float fa-stack-2x"></i>
			<i class="fa fa-rss faa-float fa-stack-1x"></i>
		</span>
	</a>
	<!-- google plus -->
	<a href="https://plus.google.com/share?url={URLEncodedPermalink}" class="snsbtn_googleplus" target="_blank">
		<span class="fa-stack faa-parent animated-hover">
			<i class="fa fa-moon-o faa-float fa-stack-2x"></i>
			<i class="fa fa-google-plus faa-float fa-stack-1x"></i>
		</span>
	</a>
	<!-- pocket -->
	<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="snsbtn_pocket" target="_blank">
		<span class="fa-stack faa-parent animated-hover">
			<i class="fa fa-moon-o faa-float fa-stack-2x"></i>
			<i class="fa fa-get-pocket faa-float fa-stack-1x"></i>
		</span>
	</a>
</div>

<style type="text/css">
.snsbtn_area a {
	display: inline-block;
	font-size: 25px;
}
.snsbtn_area .snsbtn_hatena {
	color: #008fde;
}
.snsbtn_area .snsbtn_twitter {
	color: #55acee;
}
.snsbtn_area .snsbtn_facebook {
	color: #315096;
}
.snsbtn_area .snsbtn_feedly {
	color: #6cc655;
}
.snsbtn_area .snsbtn_googleplus {
	color: #dd4b39;
}
.snsbtn_area .snsbtn_pocket {
	color: #EE4257;
}
.snsbtn_area .fa-stack-1x {
	font-size: 20px;
	text-align: right;
	position: relative;
	top: -7px;;
	left: -5px;
}
</style>

おわりに

いかがでしたか！少し変わった形のシェアボタンを貼り付ける方法でした。コピペするだけで簡単に実装できますので気になる方は是非試してみてくださいね！