表題の通りですが、前のこれと違ってaタグで完結するリストを作ったのでメモ。
はてブ、facebook、LINE、twitter、google+のボタンたち。
わかると思うが、◆URL◆←にURL、◆ページタイトル◆←にページタイトルを挿入。
ic_sns.pngの画像はこちらからどうぞ。
【html】[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>
[/html]
【css】[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;
}
[/css]