はてなブログでCSSのみを用いてフラットデザインのおしゃれなスマホ用シェアボタンをつくってみた

f:id:donchan922:20150629220633p:plain

2017/9/22更新
はてなブログのシェアボタンカスタマイズ第3弾は以下の記事から。とにかく動作を軽くしたい方は是非お試しあれ。

はてなブログでめっちゃ動作の軽いシェアボタン作った！ - 技術を磨くだいぱんまん

はてなブログのシェアボタンカスタマイズ第2弾は以下の記事から。1弾よりこっちのほうが圧倒的におすすめです。

おしゃれなシェアボタンをCSS＆Webフォントで作ってみた【はてなブログのPC＆スマホ用】 - 技術を磨くだいぱんまん

このシェアボタンのいいところは3つ。

CSSのみ（javascriptなし）で作ったので、動作が軽い
色合いが綺麗
一列でシェアボタンを表現できる（横幅320pxベース）

コードを載せておきますので、ご自由にお使いください。*1ただ、本当に手作り感満載のコードですので、そこはご愛嬌ということで。

ちみなに、今回のカスタマイズは、はてなブログPro会員でないとできません。あと、はてぶとPocketとLINEのアイコンが見つからなかったので、無理やりWebフォント化してます。特に、Pocketのやっつけ感がすごい。

CSS（Webフォントインポート含む）
HTML
まとめ
- 参考リンク

CSS（Webフォントインポート含む）

<!-- webフォント(fontawesome)import -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<!-- css -->
<style type="text/css">

/******************************/
/* シェアボタンフラット円デザイン */
/******************************/

/* 回り込み解除のためのクラス */
.clearfix{
    zoom:1;
}
.clearfix:after{
    content:"";
    display: block;
    clear: both;
    height: 0;
    visibility:hidden;
}

/* サークルのスタイル */
.sns_circle{
    position:relative;
    width: 40px;
    height: 40px;
    margin:0px 3px 0px 3px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #999;
    float:left;
    list-style: none;
}

/* Webフォントに関する指定 */
.sns_circle span{
    position:absolute;
    font-size:30px;
    color:#FFF;/* 文字の色 */
}

/* Webフォントに関する指定(はてぶ) */
.sns_circle.hatebu.sns_circle span{
    position:absolute;
    padding:5px 0px 0px 5px;
    color:#FFF;/* 文字の色 */
    font-size: 25px;
}

/* Webフォントに関する指定(Twitter) */
.sns_circle.twitter.sns_circle span{
    position:absolute;
    padding:2px 0px 0px 6px;
    color:#FFF;/* 文字の色 */
}

/* Webフォントに関する指定(Facebook) */
.sns_circle.facebook.sns_circle span{
    position:absolute;
    padding:5px 0px 0px 15px;
    color:#FFF;/* 文字の色 */
}

/* Webフォントに関する指定(Google+) */
.sns_circle.googleplus.sns_circle span{
    position:absolute;
    padding:6px 0px 0px 9px;
    font-size: 25px;
    color:#FFF;/* 文字の色 */
}

/* Webフォントに関する指定(Pocket) */
.sns_circle.pocket.sns_circle span{
    position:absolute;
    padding:3px 0px 0px 10px;
    color:#FFF;/* 文字の色 */
}

/* Webフォントに関する指定(LINE) */
.sns_circle.line.sns_circle span{
    position:absolute;
    padding:12px 0px 0px 4px;
    font-size:13px;
    color:#FFF;/* 文字の色 */
}

/* リンク領域をブロック全体に */
.sns_circle a{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    text-indent:-999px;
    color:#FFF;/* 文字の色 */
}

/* マウスオーバー時のスタイル */
.sns_circle a:hover{
    background-color:#FFF;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

/* 横幅を276pxに固定して真ん中に表示 */
ul.circle_group{
    width: 276px;
    margin:auto;
    list-style: none;
    padding:0;
}

/* Font Awesome hatena bookmark（手作り） */
.fa-hatena:before {
    content: "B!";
    font-family: Verdana;
    font-weight: bold;
}

/* Font Awesome Pocket（手作り） */
.fa-pocket:before {
    content: "P";
    font-family: "Helvetica Neue",Helvetica,helvetica,arial,sans-serif;
    font-weight: bold;
}

/* Font Awesome LINE（手作り） */
.fa-line:before {
    content: "LINE";
    font-family: 'Meiryo',sans-serif;
    font-weight: bold;
}

/* アイコン毎の配色と配置 */
.sns_circle.hatebu{
    background-color: #006fbb;
}
.sns_circle.twitter{
    background-color: #00acec;
}
.sns_circle.facebook{
    background-color: #265a96;
}
.sns_circle.googleplus{
    background-color: #dd4b39;
}
.sns_circle.pocket{
    background-color: #EE4256;
}
.sns_circle.line{
    background-color: #2cbf13;
}

</style>

このCSSは、ダッシュボードの「デザイン」⇒「タイトル下（スマホ）」にコピペしてください。

HTML

<!-- HTML -->
<ul class="circle_group clearfix">
    <li class="sns_circle hatebu"><span><i class="fa fa-hatena"></i></span><a href="https://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple"></a></li>
    <li class="sns_circle twitter"><span><i class="fa fa-twitter"></i></span><a href="https://twitter.com/intent/tweet?text={Title} - {BlogTitle} {URLEncodedPermalink}"></a></li>
    <li class="sns_circle facebook"><span><i class="fa fa-facebook"></i></span><a href="https://www.facebook.com/sharer.php?u={URLEncodedPermalink}"></a></li>
    <li class="sns_circle googleplus"><span><i class="fa fa-google-plus"></i></span><a href="https://plus.google.com/share?url={URLEncodedPermalink}"></a></li>
    <li class="sns_circle pocket"><span><i class="fa fa-pocket"></i></span><a href="https://getpocket.com/edit?url={URLEncodedPermalink}"></a></li>
    <li class="sns_circle line"><span><i class="fa fa-line"></i></span><a href="https://line.me/R/msg/text/?{Title} - {BlogTitle} {URLEncodedPermalink}"></a></li>
</ul>

このHTMLは、ダッシュボードの「デザイン」⇒「記事上（スマホ）または記事下（スマホ）」にコピペしてください。
各シェアボタンのリンクはそのまま使えるようにしています。（URLやタイトルを自動取得するようにしています。）

まとめ

完成品はこちら。

f:id:donchan922:20150426094616p:plain
「コード貼り付けたけど動かんやん。」
「こうすればもっといい感じになるんじゃないの。」
「素敵なWebフォントありますよ。」

みたいなコメントがあれば、ぜひ各シェアボタンからお願いします。対応します。

参考リンク

*1:コードに関する一切の責任を負いかねます。