フォローボタンの実装

以下のようなフォローボタンもデフォルト化しています。
フォローボタンは2種類用意いたしました。

デフォルト１

デフォルト２

それぞれのホバー（マウスを置いたとき）は以下の通りです。

実装方法

管理画面の【デザイン】から、お好きな箇所に以下のコードで貼ってください。

<div class="followBtn[実装したいデフォルトの番号をお入れください]">
<p>Follow Me!</p>
<ul>
　　　　<!-- 読者登録ボタンを消したい場合はここから削除 -->　
	<li>
		<a class="followHatena" href="http://blog.hatena.ne.jp/はてなID/ブログURL（http://は除く）/subscribe" title="読者登録" onclick="window.open('http://blog.hatena.ne.jp/はてなID/ブログURL（http://は除く）/subscribe', '', 'width=500, height=400'); return false;"><i class="blogicon-hatenablog"></i></a>
	</li>
　　　　<!-- 読者登録ボタンを消したい場合はここまで削除 -->　　
　　　　<!-- Twitterボタンを消したい場合はここから削除 -->　　
	<li>
		<a class="followTwitter" href="URLを入れてください" title="Twitterをフォローする" target="_blank"><i class="fa fa-twitter fa-fw"></i></a>
	</li>
　　　　<!-- Twitterボタンを消したい場合はここまで削除 -->
　　　　<!-- Facebookボタンを消したい場合はここから削除 -->　
	<li>
		<a class="followFacebook" href="URLを入れてください" title="Facebookの友達登録する" target="_blank"><i class="fa fa-facebook fa-fw"></i></a>
	</li>
　　　　<!-- Facebookボタンを消したい場合はここまで削除 -->　
　　　　<!-- インスタグラムボタンを消したい場合はここから削除 -->　
	<li>
		<a class="followInstagram" href="URLを入れてください" title="インスタグラムをフォローする" target="_blank"><i class="fa fa-instagram fa-fw"></i></a>
	</li>
　　　　<!-- インスタグラムボタンを消したい場合はここまで削除 -->　
　　　　<!-- Feedlyボタンを消したい場合はここから削除 -->　
	<li>
		<a class="followFeedly" href="http://feedly.com/i/subscription/feed/http://ブログURL/feed" title="Feedlyで購読する" target="_blank"><i class="fa fa-rss fa-fw"></i></a>
	</li>
　　　　<!-- Feedlyボタンを消したい場合はここまで削除 -->　
　　　　<!-- Google＋ボタンを消したい場合はここから削除 -->　
	<li>
		<a class="followGooglePlus" href="URLを入れてください" title="Google＋" target="_blank"><i class="fa fa-google-plus fa-fw"></i></a>
	</li>
　　　　<!-- Google＋ボタンを消したい場合はここまで削除 -->　
</ul>
</div>

例えば、デフォルト１を実装したい場合は{実装したいデフォルトの番号をお入れください]の部分を１に変更します。

<div class="followBtn1">

デフォルト２を実装したい場合は同様に、１を２に変更していただければOKです。
！注意！「URLを入れてください」「はてなID」などの箇所を正しく記述してください。

CSSコードは以下の通りに設定してあります。
！すでに組み込んであるので、初期設定を変えたい場合以外はコピペ不要です！

.followBtn1 {
	text-align: center;
}

.followBtn1 p {
	font-size: 14px; /* 「Follow Me!」の文字の大きさを変えたい方は数字を変更してください */
	color: #555; /* Follow Me!」の文字色を変えたい方は[#]以下を変更してください */
}

.followBtn1 ul {
	list-style: none;
	padding: 0;
}

.followBtn1 li {
	display: inline-block;
	vertical-align: top;
}

.followBtn1 a {
	display: block;
	border: 1px solid #778899; /* 枠の色を変えたい方は[#]以下を変更してください */
	width: 60px; /* アイコンの幅を変えたい方は数字を変更してください */
	height: 60px; /* アイコンの高さを変えたい方は数字を変更してください */
	line-height: 60px;
	color: #ffffff; /* アイコンの色を変えたい方は[#]以下を変更してください */
	background-color: #778899; /* 背景の色を変えたい方は[#]以下を変更してください */
	font-size: 25px; /* アイコンの大きさを変えたい方は数字を変更してください */
	text-align: center;
	margin-right: 5px;
	box-shadow: 2px 2px #eee;
}

.followBtn1 a:hover {
	box-shadow: none;
	color: #778899; /* ホバーのアイコンの色を変えたい方は[#]以下を変更してください */ 
	background-color: white; /* ホバーの背景色を変えたい方は[#]以下を変更してください */
}

.followBtn2 {
	text-align: center;
	margin: 0 auto;
	max-width: 600px;
}

.followBtn2 p {
	font-size: 14px; /* 「Follow Me!」の文字の大きさを変えたい方は数字を変更してください */
	color: #555;　/* 「Follow Me!」の文字の大きさを変えたい方は[#]以下を変更してください */
}

.followBtn2 ul {
	list-style: none;
	padding: 0;
}

.followBtn2 li {
	display: inline-block;
	vertical-align: top;
}

.followBtn2 a {
	display: block;
	border: 1px solid #778899;　/* 枠の色を変えたい方は[#]以下を変更してください */
	width: 150px;　/* 枠の幅を変えたい方は数字を変更してください */
	height: 60px;　/* 枠の高さを変えたい方は数字を変更してください */
	line-height: 60px;
	color: #ffffff;　/* アイコンの色を変えたい方は[#]以下を変更してください */
	background-color: #778899;　/* 背景色を変えたい方は[#]以下を変更してください */
	font-size: 25px;　/* アイコンの大きさを変えたい方は数字を変更してください */
	text-align: center;
	margin-right: 5px;
	margin-bottom: 5px;
	box-shadow: 2px 2px #eee;
}

.followBtn2 a:hover {
	box-shadow: none;
	color: #778899;　/* ホバーのアイコンの色を変えたい方は[#]以下を変更してください */ 
	background-color: white;　/* ホバーのアイコンの色を変えたい方は[#]以下を変更してください */ 
}

！『Like New』のカスタマイズに関して！

『Like New』は定番カスタマイズをデフォルト化し（初期設定として組み込まれています）、文字通りコピペたった一回ですむようにしてあります。

これもデフォルト化してほしい！、こんな風にカスタマイズしたい！などなどのご要望がありましたら、お気軽にご連絡ください。
このブログのコメント欄、もしくはTwitterにて受けつけております！

黒音セシルTwitter