Like New

レイアウトを大胆に、でもどこか上品に仕上げました

!『Like New』をインストールした際にやってほしいこと!
ブログのヘッダにFontawesomeを読み込むことを強く推奨いたします。詳しいやり方についてはコチラからどうぞ。

フォローボタンの実装


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

デフォルト1

デフォルト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>


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

<div class="followBtn1">

デフォルト2を実装したい場合は同様に、1を2に変更していただければ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

広告を非表示にする