Like New

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

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

シェアボタンの実装


以下のようなシェアボタンもデフォルト化しています。


ホバー(マウスを置いたとき)は以下のように反転するようになっています



実装方法

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

<div class="share-buttons1">
	<ul>
	    <li>
	    	<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatebu" title="このエントリーをはてなブックマークに追加する" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">
	    		<i class="blogicon-bookmark"></i>
	    	</a>
	    </li>
	    <li>
	    	<a class="shrTwitter" href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" title="このエントリーをFacebookでシェアする" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">
	    		<i class="fa fa-facebook fa-fw"></i>
	    	</a>
	    </li>
	    <li>
	    	<a class="shrFacebook" href="http://twitter.com/intent/tweet?text={Title} - {BlogTitle} {URLEncodedPermalink}" title="このエントリーをTwitterでシェアする" target="_blank">
	       		<i class="fa fa-twitter fa-fw"></i>
	    	</a>
	    </li>
	    <li>
	    	<a class="shrGooglePlus" href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title="このエントリーをGoogle+でシェアする">
	    		<i class="fa fa-google-plus fa-fw"></i>
	    	</a>
	    </li>
	    <li>
	    	<a class="shrPocket" href="http://getpocket.com/edit?url={URLEncodedPermalink}" title="このエントリーをPocketでシェアする" target="_blank">
	    		<i class="fa fa-get-pocket fa-fw"></i>
	    	</a>
	    </li>
	</ul>
</div>


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

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

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

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

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

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

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

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

黒音セシルTwitter

広告を非表示にする