
表題の通りですが、前のこれと違ってaタグで完結するリストを作ったのでメモ。
はてブ、facebook、LINE、twitter、google+のボタンたち。
わかると思うが、◆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; }