各種SNSボタンを速攻で横イチに並べるソース2

わかると思うが、◆URL◆←にURL、◆ページタイトル◆←にページタイトルを挿入。

ic_sns.pngの画像はこちらからどうぞ。

【html】

 
<ul class="snsBtnList">
	<li class="fb"><a href="http://www.facebook.com/sharer.php?u=◆URL◆" target="_blank">シェア</a></li>
	<li class="tw"><a href="http://twitter.com/share?url=◆URL◆&text=◆タイトル◆" target="_blank">ツイート</a></li>
	<li class="gp"><a href="https://plusone.google.com/_/+1/confirm?hl=ja&url=◆URL◆" target="_blank">google+</a></li>
	<li class="li"><a href="http://line.naver.jp/R/msg/text/?◆URL◆" target="_blank">LINEで送る</a></li>
	<li class="hb"><a href="http://b.hatena.ne.jp/entry/◆URL◆" class="hatena-bookmark-button" data-hatena-bookmark-title="◆タイトル◆" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加">はてブ</a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></li>
</ul>

【css】

.snsBtnList {
 font-family: "Meiryo","Century Gothic", CenturyGothic, AppleGothic, sans-serif;
 font-size: 12px;
}
.snsBtnList li {
 list-style-type: none;
 float: left;
 margin: 0px 5px;
}
.snsBtnList li.fb {
 background-color: #3b5998;
}
.snsBtnList li.tw {
 background-color: #3b94d9;
}
.snsBtnList li.gp {
 background-color: #d44132;
}
.snsBtnList li.li {
 background-color: #00cc1d;
}
.snsBtnList li.hb {
 background-color: #00a4de;
}
.snsBtnList li.fb:hover {
 background-color: #6382c2;
}
.snsBtnList li.tw:hover {
 background-color: #6db0e2;
}
.snsBtnList li.gp:hover {
 background-color: #db6153;
}
.snsBtnList li.li:hover {
 background-color: #82e41f;
}
.snsBtnList li.hb:hover {
 background-color: #2dcbff;
}
.snsBtnList li a {
 text-decoration: none;
 color: #fff;
}
.snsBtnList li.fb a,
.snsBtnList li.tw a,
.snsBtnList li.gp a,
.snsBtnList li.li a,
.snsBtnList li.hb a {
 display: block;
 padding: 5px 15px 5px 35px;
 background-image: url(ic_sns.png);
 background-repeat: no-repeat;
}
.snsBtnList li.fb a {
 background-position: 11px 6px;
}
.snsBtnList li.tw a {
 background-position: 11px -29px;
}
.snsBtnList li.gp a {
 background-position: 11px -62px;
}
.snsBtnList li.li a {
 background-position: 9px -105px;
}
.snsBtnList li.hb a {
 background-position: 11px -140px;
}