ソーシャルボタンをオリジナル・フラットデザインにカスタマイズ

オリジナルソーシャルボタンをCSSで作成

オリジナル・フラットデザインタイプのソーシャルボタンのココがいい

昨今よく見かける、カスタマイズされたオリジナル・フラットデザインタイプのソーシャルボタン。

  • 大きい方が押しやすいし、押されやすい
  • ページ速度の読み込みが速い
  • CSSでアクションをつけられる

というのが魅力です。

一方、ソーシャルメディアが今のように拡大する前から積極的に活用していたユーザーさんには、純正のデザインの方が慣れ親しんでいるという意見もありますので、

  • 純正ボタンにする
  • オリジナルのボタンにする
  • 両方のボタンを置いておく

といった選択肢の中から、想定しているサイト利用者さんによって一番良いと思われるものを選ばれるのが良いと思います。

純正ボタンを置くか置かないかは、この↑ユーザビリティとページスピードとを天秤にかけることになってしまいますが、ページスピードは画像の圧縮や、スクリプトの位置の変更や圧縮、ヘッダーの整理など、他のチューンアップで結構速くなるものです。

ページスピード90点以上どうしても出す!ということならば純正ボタンでは難しいですが、そうでなければ、総合的に一番適しているかたちを考えていくのがおすすめかと思います。

純正ボタンのタグとその設置方法については以下の記事で書いておりますので、参考になれば、と思います。
Facebookいいね等SNSの各純正ボタンタグ取得・設置・CSSまで

では、オリジナル・フラットボタンについて見ていきましょう。

画像のSNSボタンで設置

CSSはどうも苦手で、という方には画像ボタンでオリジナルボタンを作るのがおすすめ。
この場合、以下のページがとても参考になります(^^)

SNSボタンをカスタマイズ!はてなブログにオリジナル画像のSNSボタンを設置する方法http://www.kototoka.com/entry/2014/07/24/hatena-blog-customizing-original-design-the-buttons-of-sns/

画像まで使用OKということで、至れり尽くせり!!
ほんと、ありがとうございます、です。
参考にさせてもらったら、お礼代わりにハテブしておきましょうね(≧▽≦)

CSSでフラットボタン

CSSでボタンに動きをつけたい、画像のボタンでは物足りないという方向けに、フラットボタンのデザインでCSSを書いてみました

こんな感じです。
オリジナルカスタマイズしたフラットデザインソーシャルボタン

上のボタンのCSSはこちら。

/* ソーシャルオリジナルボタンCSS */
a.fb-share{
float:left;
height:36px;
width:48%;
margin:0px 5px 5px 0px;
line-height: 36px;
color:#fff;
text-align:center;
display:block;
text-decoration:none;
font:bold 15px;
border-radius:3px;
background-color:#305097;
}
a.fb-share:hover{
background-color:#7D96CE;
}
a.twitter-tweet{
float:left;
height:36px;
width:48%;
margin:0px 5px 5px 0px;
line-height: 36px;
color:#fff;
text-align:center;
display:block;
text-decoration:none;
font:bold 15px;
border-radius:3px;
background-color: #55acee;
}
a.twitter-tweet:hover{
background-color:#e1e8ed;
color:#55acee;
}
a.gplusbtn{
float:left;
height:36px;
width:48%;
margin:0px 5px 5px 0px;
line-height: 36px;
color:#fff;
text-align:center;
display:block;
text-decoration:none;
font:bold 15px;
border-radius:3px;
background-color:#dd4b39;
}
a.gplusbtn:hover{
background-color:#ffffff;
border:solid 1px #dd4b39;
color:#737373;
height:34px;
width:47.5%
}
a.pocketbtn{
float:left;
height:36px;
width:48%;
margin:0px 5px 5px 0px;
line-height: 36px;
color:#fff;
text-align:center;
display:block;
text-decoration:none;
font:bold 15px;
border-radius:3px;
background-color:#ED4055;
}
a.pocketbtn:hover{
background-color:#f79eaa;
}
a.hatenabtn{
float:left;
height:36px;
width:97%;
margin:0px 5px 5px 0px;
line-height: 36px;
color:#fff;
text-align:center;
display:block;
text-decoration:none;
font:bold 15px;
border-radius:3px;
background-color:#00A5DE;
}
a.hatenabtn:hover{
background-color:#87C8DD;
}
.original-social-buttons {
    overflow: hidden;
}

下のボタンコードをボタンに設置したい場所にコピペします。

<div class="original-social-buttons">
<a class="fb-share" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">FBでシェア</a>

<a class="twitter-tweet" href="http://twitter.com/intent/tweet?text=<?php the_title(); ?> | <?php the_permalink(); ?>"
      onClick="window.open(encodeURI(decodeURI(this.href)),
      'tweetwindow',
      'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!'
      ); return false;">ツイート♪</a>
 
<a class="gplusbtn" href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">G+でシェア</a>

<a class="pocketbtn" href="http://getpocket.com/edit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" onclick="window.open(this.href, 'PCwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;">Pocketで保存</a>

<a class="hatenabtn" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" onclick="window.open(this.href, 'hbwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;">はてなブックマーク</a></div>

FBでシェア などのボタン内の文字列は、Facebook などにお好みで変更して下さい(^^)

ボタンをクリックするのが楽しい?クリックアクションCSS付きボタン

hover、activeのボタンアクションを工夫したCSSで、凹んで見えるボタンバージョンも作ってみました。
オリジナルボタンサンプル

ホバー時、ボタンの色が薄くなる
ボタンアクションホバー時

アクティブ時:クリックした時、ボタンが凹む
ボタンアクション・アクティブ時

CSSは以下のようになります。
※ボタンコードはフラットのものと同じです。

a.fb-share {
    float: left;
    height: 36px;
    width: 28%;
    margin: 5px 5px 3px 0px;
    line-height: 36px;
    color: #fff;
    text-align: center;
    display: block;
    text-decoration: none;
    font: bold 15px;
    border-radius: 3px;
    background-color: #305097;
    border: 1px solid rgb(61, 101, 189);
    box-shadow: 0 5px 1px 0 #192A50;
}
a:hover.fb-share {
    color: #ccc;
    background-color: rgba(48, 80, 151, 0.85);
}
a:active.fb-share {
    color: #bdc7d8;
    height: 33px;
    margin-top: 8px;
    box-shadow: 0 2px 1px 0 #192A50;
}
a.twitter-tweet {
    float: left;
    height: 36px;
    width: 28%;
    margin: 5px 5px 3px 0px;
    line-height: 36px;
    color: #fff;
    text-align: center;
    display: block;
    text-decoration: none;
    font: bold 15px;
    border-radius: 3px;
    background-color: #55acee;
    border: 1px solid rgb(91, 184, 255);
    box-shadow: 0 5px 1px 0 #4992CA;
}
a:hover.twitter-tweet {
    color: #ccc;
    background-color: rgba(85, 172, 238, 0.85);
}
a:active.twitter-tweet {
    color: #bdc7d8;
    height: 33px;
    margin-top: 8px;
    box-shadow: 0 3px 1px 0 #4992CA;
}
a.gplusbtn {
    float: left;
    height: 36px;
    width: 28%;
    margin: 5px 5px 3px 0px;
    line-height: 36px;
    color: #fff;
    text-align: center;
    display: block;
    text-decoration: none;
    font: bold 15px;
    border-radius: 3px;
    background-color: #dd4b39;
    border: 1px solid rgb(247, 85, 65);
    box-shadow: 0 5px 1px 0 #AB392B;
}
a:hover.gplusbtn {
    color: #ccc;
    background-color: rgba(221, 75, 57, 0.85);
}
a:active.gplusbtn {
    color: #bdc7d8;
    height: 33px;
    margin-top: 8px;
    box-shadow: 0 3px 1px 0 #AB392B;
}
a.pocketbtn {
    float: left;
    height: 36px;
    width: 28%;
    margin: 5px 5px 3px 0px;
    line-height: 36px;
    color: #fff;
    text-align: center;
    display: block;
    text-decoration: none;
    font: bold 15px;
    border-radius: 3px;
    background-color: #ED4055;
    border: 1px solid rgb(243, 126, 140);
    box-shadow: 0 5px 1px 0 #AD303F;
}
a:hover.pocketbtn {
    color: #ccc;
    background-color: rgba(237, 64, 85, 0.85);
}
a:active.pocketbtn {
    color: #bdc7d8;
    height: 33px;
    margin-top: 8px;
    box-shadow: 0 3px 1px 0 #AD303F;
}
a.hatenabtn {
    float: left;
    height: 36px;
    width: 28%;
    margin: 5px 5px 3px 0px;
    line-height: 36px;
    color: #fff;
    text-align: center;
    display: block;
    text-decoration: none;
    font: bold 15px;
    border-radius: 3px;
    background-color: #00A4DE;
    border: 1px solid rgb(128, 210, 239);
    box-shadow: 0 5px 1px 0 #016CA7;
}
a:hover.hatenabtn {
    color: #ccc;
    background-color: rgba(0, 164, 222, 0.85);
}
a:active.hatenabtn {
    color: #bdc7d8;
    height: 33px;
    margin-top: 8px;
    box-shadow: 0 3px 1px 0 #016CA7;
}
.original-social-buttons {
    overflow: hidden;
}

テーマによって微調整が必要になるかと思いますが、参考にしてみて下さい。

実際のボタンを記事下に置いてみました。
通常のボタンとダブっているのでかなりしつこい感じですが・・・(笑)
動作を確認してみて下さい(爆)

ではでは、いろいろとカスタマイズを試してオリジナルデザインを楽しんでみてくださいね(^^)

少しでもお役に立てたようであれば、下のボタンのクリックをお願いします!!(^^)

※下のスマホアイコン風ボタンもマウスをあわせるとちょっと違ったデザインになるように、いじっていますので、試してみてくださいね(笑)

Published:2014/10/11

Written by