MoonNote

はてなブログテーマ / CSS / jQuery

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

f:id:waitingmoon:20151203195004p:plain

ブログの購読率向上のために、記事の下やサイドバーに表示する アイコン付き 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種類作ってみました。

使用する前に

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

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

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

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;
}
  • border-radius の数値を変えると、ボタンの角丸の度合いを変更できます。50% を指定するとサークルボタンになります。
  • font-size でアイコンのサイズを変更できます。
  • heightline-height でボタンの高さを変更できます。それぞれ同じ値を指定して下さい。
  • width でボタンの幅を変更できます。height より大きい値を指定して、横に長い付箋風のデザインにするのも良いかもしれません。

まとめ

「URL を書くだけ」というのは、類似のフォローボタン・カスタマイズと比べて大きな利点だと思っています。よろしければお使いください。

各アイコンのカラーコードの指定はこちらのサイトを参考に行いました。

simpleicons.org