コピペで使える URL を書くだけでアイコンが表示される SNS フォローボタン5種

ブログの購読率向上のために、記事の下やサイドバーに表示するアイコン付き SNS フォローボタンの HTML って、こんな感じで書かれていることが多いと思います。

よくあるパターン1

<ul class="follow-me">
    <li><a href="https://twitter.com/hogehoge"><i class="fa fa-twitter"></i></a><li>
    <li><a href="https://www.facebook.com/hogehoge"><i class="fa fa-facebook"></i></a></li>
    <li><a href="https:/plus.google.com/hogehoge"><i class="fa fa-google-plus"></i></a></li>
</ul>

<a> の中にアイコンフォントの表示タグを書くパターンです。アイコンフォントの表示タグ <i> の Class 名は FontAwesome の場合です。

よくあるパターン2

<ul class="follow-me">
    <li><a href="https://twitter.com/hogehoge" class="twitter"></a><li>
    <li><a href="https://www.facebook.com/hogehoge" class="facebook"></a></li>
    <li><a href="https:/plus.google.com/hogehoge" class="google-plus"></a></li>
</ul>

<a> に表示するアイコンの Class を設定して、擬似要素で表示するパターンです。

個人的にですが、このよくある書き方は a タグの中に要素が増える、表示するアイコンの Class を個別に指定しなければいけないという不満と手間を感じます。そこで、属性セレクタを活用した URL を書くだけでアイコンが表示される SNS フォローボタン を5種類作ってみました。

使用する前に
HTML コード
- なぜ表示されるのか
デザイン
デザインオプション
まとめ

使用する前に

使用する前に、以下のコードを管理画面の［設定］→［詳細設定］→［head に内容を追加］に貼り付けて下さい。アイコン用のフォントを読み込むコードになります。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

制作時点で自動でアイコンが表示されるサービスは以下の通りです（50音順）。

Amazon
CodePen
delicious
deviantART
digg
dribble
Dropbox
Facebook
feedly
Flickr
Foursquare
Github
Google+
Instagram
Last.fm
LinkedIn
Pinterest
Pocket
Reddit
Skype
SlideShare
Spotify
Steam
Stumbleupon
Tumblr
Twitch
Twitter
Vimeo
Vine
Weibo
WhatsApp
Wordpress.com
Wordpress.org
Youtube
ニコニコ動画
はてなブックマーク
はてなブログ（読者登録）
はてなブログ（RSS）

HTML コード

<ul class="follow-me">
    <li><a href="https://twitter.com/hogehoge"></a><li>
    <li><a href="https://www.facebook.com/hogehoge"></li>
    <li><a href="https:/plus.google.com/hogehoge"></a></li>
</ul>

使い方は .follow-me を指定した ul 下にある li 内部に a(リンク) を書くだけです。ボタンを追加する方法も li を増やしていくだけなので簡単です。表示する場所も選びません。

なぜ表示されるのか

要素[属性*="属性値"] という属性セレクタを活用しています。これは「ある要素の」「ある属性に」「ある属性値が含まれている」ときにスタイルを適用するセレクタです。

.follow-me li a[href*="twitter.com"]

例えば上記のように書くと、「.follow-me li a の」「href に」「twitter.com が含まれている」ときにスタイルを適用する、という意味になります。

このセレクタによって、Twitter へのリンクを貼れば Twitter のアイコンが、Facebook へのリンクを貼れば Facebook のアイコンが、Google+ へのリンクを貼れば Google+ のアイコンが…、というわけです。

デザイン

使いたいデザインのデモの CSS タブに書かれたコードを全てコピーして、［デザイン］→［カスタマイズ］→［デザインCSS］に貼り付けてください。

1. 色付き＋ホバー時に薄くなる

See the Pen Follow-Button ( Usually Style ) by half-moon (@waitingmoon) on CodePen.

色付きで、ホバー時に若干薄まるデザインです。おそらく最もベーシックなデザインではないでしょうか。

2. 色付き＋ホバー時に背景色と文字色が反転

See the Pen Follow-Button (Usually Style alt) by half-moon (@waitingmoon) on CodePen.

ホバー時に背景色と文字色が反転するデザインです。サイズを理解しやすくするため、ホバー時は 1px のボーダーを加えています。

3. 色付き＋ホバー時に背景色と文字色が反転（逆）

See the Pen Follow-Button ( Usually Style Alt 2 ) by half-moon (@waitingmoon) on CodePen.

2. の逆バージョンです。

4. モノクロ＋ホバー時に色が付く

See the Pen Follow-Button ( Mono to Color ) by half-moon (@waitingmoon) on CodePen.

最初はモノクロですが、ホバーすると色が付きます。ミニマル系のテーマでよく使われているデザインです。

5. モノクロ＋ホバー時もモノクロ

See the Pen Follow-Button ( Mono ) by half-moon (@waitingmoon) on CodePen.

モノクロで、ホバー時に背景色が黒、文字色が白に変わります。こちらもミニマル系のテーマでよく使われています。

デザインオプション

貼り付けた CSS の後に以下のコードを加えると、角の丸みやアイコンの大きさ、ボタンのサイズを簡単にカスタマイズできます。

.follow-me li a::before {
    -webkit-border-radius: 2px; /* for Android ~4.3 */
    border-radius: 2px;
    font-size: 16px;
    height: 44px;
    line-height: 44px;
    width: 44px;
}