SNSフォローボタンをフラットにカスタマイズする方法を初心者にもわ分かりやすく解説します。

f:id:dreamark:20160721144528j:plain

今回は、はてなブログのフォローボタンをシンプルナフラットボタンニカスタマイズする方法をご紹介させていただきます。まだカスタマイズをした事ない人でも分かりやすいように記事を書きました。また、すでにカスタマイズをしている人も楽しんでいただける内容も用意したので、一読していただければ嬉しいです。

標準のフォローボタン等では味気ないと言う方やフラットデザインのフォローボタンを使いたい方はぜひ試してみて下さい。HTMLやCSSの説明はしていますが、ソースはコピペで使用していただいてもかまいません。

そのさいに変更事項等も分かりやすく説明をしていきます。

フォローボタンとは
何故カスタムをするのか
どのようにフォローボタンをカスタマイズするのか
- WEBフォントを使う
- WEBフォントを読みこませる設定
HTMLの作成
CSSの作成
はてなブログにカスタマイズを適用する
- デザインに貼り付ける
表示を確認する
最後に

フォローボタンとは

まずは基本的な所からいきます。はてなブログの読者になる、TwitterやFacebookのフォローやFeedryへのリンク等、ブログの更新情報をSNS等で受け取ってもらうことが出来ます。フェイスブックページやTwitterではSNSでの交流の入り口としても機能します。このようにブログとSNSを繋ぐ役割がフォローボタンにあります。

はてなブログでは標準でも下の画像のようにフォローボタン等を表示する事が可能です。

f:id:dreamark:20160721032519p:plain

何故カスタムをするのか

カスタマイズで見た目を変えることはもちろんですが、もう一つの理由としてあげられるのは表示を早くするという点になります。

ワードプレスユーザー等も、フォローボタンをカスタマイズをしたり、キャッシュを使用したりと試行錯誤しながら早く表示を出来るように頭を悩ませている所です。フォローボタンをカスタムする事で、通常のフォローボタンよりもカスタムボタンの方が早く表示されることもカスタムの理由の一つと言えるでしょう。

スピードを上げる効果とは

表示速度を上げることで、ブログに訪れてくれるユーザーにストレスを感じさせなくなります。これはユーザーエクスペリエンス（UX）の向上につながります。ページの読み込みが遅くなると、ユーザーはコンテンツや記事を見ずに離れてしまうことにも繋がります。メインコンテンツではないので、そこまで気にしなくても良いとも言えますが、読み込みを感じさせないようなページを用意しておくことを心がけるのはユーザーエクスペリエンスでの面でのファーストステップと言えるでしょう。

また、SEO面で見ても、表示時間の速度がわずかではありますがSEOのポイント評価にも上げられています。

※内容が同じページがあったとして、SERPs（検索結果）でどちらを優先するかと言えば、表示速度が早い方を優先するというレベル。
これはGoogleの一番直近の発表でも言われていました。

ユーザーエクスペリエンス（UX）とは

UXとは、ある製品やサービスを利用したり、消費した時に得られる体験の総体。個別の機能や使いやすさのみならず、ユーザが真にやりたいことを楽しく、心地よく実現できるかどうかを重視した概念である。

http://e-words.jp/w/UX.html

どのようにフォローボタンをカスタマイズするのか

フォローボタンは既存のHTMLテンプレート部分のCSSを直接いじるのではなく、新たにHTMLの作成をしCSSを指定します。まずはHTMLを作成しフォローボタンを表示させてみましょう。その方法を説明していきます。

WEBフォントを使う

SNSロゴの表示にはWEBフォントを使います。はてなやTwitter、Facebookははてなブログで初期からWEBフォントのダウンロードがされているので特に指定する必要はありません。

はてなブログの用意してるWEBフォントにはFeedlyは含まれていないのでAwosomeというWEBフォントをダンロード指定をする必要があります。今回紹介するFeedlyを使用しない場合は、この項を飛ばしてHTMLの作成に進んでもかまいません。

AwosomeにはGoogle＋、Instagramなども含まれている。他にもアイコンなどたくさんのWEBフォントが利用できるようになるので、興味のある方は、Font AwesomeのWEBサイトでチェックしてみてください。

http://fontawesome.io/　Font Awesome

使えるアイコンの一覧は下記のサイトで見る事が出来ます。

http://fontawesome.io/icons/　Font Awesome Icons

WEBフォントとは？

通常フォントは各自のPCに格納されているフォントのみを表示する事が出来ます。自分のPC上で見れるからと言って、自由に好きなフォントを指定してしまうと、相手のPCにフォントが入っていない場合には表示されません。

WEBフォントはWEB上に存在し、WEBに接続している状態であればダウンロードをして表示されるので、フォントがPCに入っていなくても、使用するデバイス（PCやスマホ等）が違くても、気にする事なく表示する事が可能になりました。

WEBフォントを読みこませる設定

まずはWEBフォントを読みこませるために下記のコードを【headに要素を追加】に貼り付けます。

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

①はてなブログのダッシュボードから設定をクリックします。

②上の詳細設定タブをクリックします。

③下にスクロールすると「headに要素を追加」という項があるので、入力フォームにコピーしたコードを貼り付けます

④更に下にスクロールし「変更する」をクリックします。

おつかれさまです。これでWEBフォントを読み込ませるコード貼り付けが完了です。

上記の手順を画像で紹介をすると以下のようになります。

これで下準備の完成です。次はWEBフォントを表示させてみましょう。

WEBフォントはサイドバーやヘッダ・フッタのHTMLを利用できる部分に下記のようなHTMLコードを記述すると表示できます。

<i class="blogicon-hatenablog"></i>

このようなWEBフォントを利用してSNSのボタンを表示させていきましょう。

HTMLの作成

<span class="sns-txt">読者・購読・フォロー</span>
<div class="sns-follow" >
<!--はてな読者登録-->
<a class="hatena-button" href="http://blog.hatena.ne.jp/はてなID/http://を抜いたURL/subscribe" target="_blank"><i class="blogicon-hatenablog"></i></a>
<!--Twitterでフォロー-->
<a class="twitter-button" href="https://twitter.com/intent/follow?screen_name=Twitter ID" target="_blank"><i class="blogicon-twitter"></i></a>
<!--Facebookでフォロー-->
<a class="facebook-button" href="https://www.facebook.com/profile.php?" id="Facebook ID" target="_blank"><i class="blogicon-facebook"></i></a>
<!--Feedlyでフォロー-->
<a class="feedly-button" href="http://feedly.com/i/subscription/feed/自分のブログのURL/feed" target="_blank"><i class="blogicon-rss"></i></a>
</div>

HTMLの説明

まずは簡単にHTMLの説明をすると、見出しを作り、その下に各フォローボタンを表示させるHTMLを記述しています。各フォローボタンには自分のSNS等のIDやURLに変更する必要があります。変更する部分にしぼり、これから詳しく分かりやすく変更方法を説明をしていきたいと思います。

※この状態でサイドバーなどにHTMLを適用すると下の図のようになります。まだCSSを適用してないのでWEBフォントも小さくボタンのデザインもありません。

f:id:dreamark:20160721035458p:plain

フォローボタン見出し

見出しは読者・購読・フォローといくつかに分けて表記をさせてますが、フォローだけであっても意味は通じると思います。この部分は好きに書き換えて下さい。
クラス名を付けて、後ほどCSSでデザインしていきます。

<span class="sns-txt">読者・購読・フォロー</span>

クラス名とは？

<要素 class=“クラス名” >要素にクラス名を付ける事でCSSを要素全体ではなく、クラス名の付いた所にCSSを部分的に指定をする事が出来るようになります。

クラス名は class=“クラス名”と「"」「”」半角のダブルコーテーションで囲みます。基本的には任意の名前を自分で付ける事が出来ますが、後で見ても分かりやすいように、関連する語句を選んで付けておくと良いでしょう。

はてな読者ボタン

<a class="hatena-button" href="http://blog.hatena.ne.jp/はてなID/http://を抜いたURL/subscribe" target="_blank"></a>

はてなブログの読者ボタンの変更的は、はてなIDとドメイン名の部分を自分のIDとドメイン名に変更します。独自ドメイン利用者は、ドメイン名を独自ドメインで指定しましょう。

f:id:dreamark:20160721144555p:plain

※画像のURLは私DREAMARKの場合の例です。

Twitterフォローボタン

<a class="twitter-button" href="https://twitter.com/intent/follow?screen_name=Twitter ID" target="_blank"></a>

TwitterIDを自分のTwitterIDに変更して下さい。TwitterIDはこちらで確認出来ます。

f:id:dreamark:20160721144606p:plain

※画像のURLは私DREAMARKの場合の例です。

Facebookフォローボタン

<a class="facebook-button" href="https://www.facebook.com/profile.php?" id="Facebook ID" target="_blank"></a>

FacebookIDを自分のFacebook IDに変更して下さい。

f:id:dreamark:20160721144621p:plain

※画像のURLは私DREAMARKの場合の例です。

Feedryリンクボタン

<a class="feedly-button" href="http://feedly.com/i/subscription/feed/自分のブログのURL/feed" target="_blank"></a>

はてなブログのURLを記述して下さい。独自ドメインを使用している場合は、独自ドメインを記述します。

f:id:dreamark:20160721144638p:plain

※画像のURLは私DREAMARKの場合の例です。

これでHTMLの準備は完了しました。次はHTMLにCSSでボタンになるようにデザインしていきましょう。

CSSの作成

/* SNSフォローボタン上テキストのCSS指定 */
.sns-txt{
    display: inline-block;
    margin: 10px 0;
    width: 100%;
    text-align: center;
    line-height: 2em;
    font-size: 13px; /* 文字の大きさを変える時は変更する */
    border-top: 1px solid #3b3b3b;  /* 上のボーダーの色や太さを変える時は変更 */
    border-bottom: 1px solid #3b3b3b;  /* 下のボーダーの色や太さを変える時は変更 */
}

/* SNSフォローボタン枠のCSS指定 */
.sns-follow{
    display: table;  
    width: 100%;
    margin: 0 auto 32px;
}

/* SNSフォローボタンのCSS指定 */

.sns-follow a {
    display: table-cell;
    font-size: 35px; /* SNSマークの大きさを変えたい場合は変更する */
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 25%; /* SNSを増やす場合は変更する。 合計で100%以下になるように。 */
    height: 48px; /* ボックスの高さを変えたい場合は変更する */
    layout-grid-line: 50px; /* 変更しない IE7以下対応  */
    color: #fff; /* SNSロゴの色を変えたい場合は変更する */
}

.sns-follow .hatena-button {
    transition: 1s ease;
    background: #54575d;
}
.sns-follow .twitter-button {
    transition: 1s ease;
    background: #5db9ff;  /* 背景色を変更したい場合は変更する */
}
.sns-follow .facebook-button {
    transition: 1s ease;
    background: #395eaf;  /* 背景色を変更したい場合は変更する */
}
.sns-follow .feedly-button { 
    transition: 1s ease;
    background: #84c34c;  /* 背景色を変更したい場合は変更する */
}

/* SNSフォローボタンオーバーフロー時のCSS指定 */

.sns-follow .hatena-button:hover {
    transition: .3s ease;
    color: #3d3f44; /* 背景色を変更したい場合は変更する */
    background:#fff;
}
.sns-follow .twitter-button:hover {
    transition: .3s ease;
    color: #55acee; /* 背景色を変更したい場合は変更する */
    background:#fff;
}
.sns-follow .facebook-button:hover {
    transition: .3s ease;
    color: #305097; /* 背景色を変更したい場合は変更する */
    background:#fff;
}
.sns-follow .feedly-button:hover {
    transition: .3s ease;
    color: #75ad43; /* 背景色を変更したい場合は変更する */
    background:#fff;
}

/*コメント*/のように/**/に挟まれた部分はコメントです。CSSの説明をしてる部分なので、表示には関係しません。

CSSの説明

今回のフォローボタンでは、マウスオーバー時に背景色とロゴの色が反転します。そしてマウスカーソルを外した時には色が戻るのですが、この時はマウスオーバー時よりも変更速度を遅くしています。余韻を残しながらじんわりと変わるイメージです。実際の動作は、当ブログのサイドバーやこの記事の下についてるボタンで試して見てください。
ロゴの大きさ変更やボタンの幅や高さの変更、マウスオーバー時の色の変更等自由に決めて使っていただけるように説明をしておきます。

見出し

見出しは上下にボーダーを適用したシンプルな表示になっています。文字の大きさや色を変更するには、.sns-txt内のfont size（文字の大きさ）color（文字の色）を変更しましょう。

各フォローボタン

.主に変更をするのはsns-follow a{ }内になります。ここで変更出来るのは。font size（文字の大きさ）やボタンの幅（width）と高さ（height）になります。
ボタンの幅は、一箇所変更すると、全てのボタンの幅に適用されます。この時に注意しなければいけないのは

ボタンの数×幅＝100％以下になるように設定をします。現在は４つのフォローボタンなので各SNSボタンは２５％となっています。

４（ボタンの数）×２５％（ボタンの幅）＝１００％

もしも３つのフォローのボタンの場合は

３（ボタンの数）×３３％（ボタンの幅）＝９９％

このように設定すると貼り付ける部分の横幅に合わせてSNSボタンが表示されます。
高さも同じように全てのボタンに適用されますが幅ほどシビアに設定する必要がないので、見た目に合わせて変更しましょう。

左詰めの表示の種類とテーブルの属性

今回のように横並びにして表示させる方法としては、blockでfloatしたり、inline−blockで横並びにしたりと方法はいくつかあります。今はFlexbox主流ですね。
しかし、このボタンではtableを指定しています。tableを指定出来るCSSとなりますが、使う理由するとしては、中央表示をしやすい点になります。特に、text−align（横の真ん中 vertical−align）（縦の真ん中）が簡単に指定出来るのでおすすめです。
PCではIE７以下には対応していない事もありますが、スマホ等では積極的に使われてます。一応layout-grid-line:（IE独自のlineheightみたいなもの）でIE７以下にも対応をさせていますが２行になる場合等には縦長になる事もあるのでチェックしながら使用しましょう。

WEB初期頃にはtableでWEBデザインする事が全盛期な時もありました。フレームやCSS、フラッシュなんかも出る前ですね。今のように要素を自由に配置するすべもなく、入れ子状の複雑なtableを作り画像や文字をはめ込むという方法です。もちろん中身のHTMLはぐちゃぐちゃにというを多く見かけました。マークアップなんていうのは完全に無視。

現在では表を作るtable本来の使用をされていますが、今回のように横並びの表示にしよすることもあります。