読者です 読者をやめる 読者になる 読者になる

技術を磨くだいぱんまん

ごはんと自由が大好き。

おしゃれなシェアボタンをCSS&Webフォントで作ってみた【はてなブログのPC&スマホ用】

インターネット

f:id:donchan922:20150811104346j:plain

追記(2016/11/27)

シェアボタンが動作しない不具合を修正しました。HTMLの最適化を行いました。PCおよびスマホ用のHTMLを貼り替えていただくようお願いいたします。

追記(2015/10/9)

シェアボタンのエリアが上下にスクロールする不具合を修正しました。CSSを貼り替えていただくようお願いいたします。

追記(2015/9/27)

Pocketのアイコンが表示されない不具合を修正しました。PCおよびスマホ用のHTMLを貼り替えていただくようお願いいたします。

追記(2015/8/11)

一部のシェアボタンのレイアウト崩れが発生したため、本記事のコードを全面的に修正しました。合わせて、Pocketのアイコンも修正しました。ご迷惑をお掛けしますが、コードの差し替えをよろしくお願いいたします。


こんにちは、だいぱんまん(@donchan922)です。

はてなブログ用のシェアボタン作成第2弾です。第1弾はこちら。

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

第1弾からの主な変更点は以下の3つです。(それ以外にも、いくつか微調整を加えています。)

  1. PC用にも対応
  2. Pocketのアイコンを修正
  3. 丸デザインだけでなく、角丸や四角にも対応

さっそくコードを紹介していきます。

Webフォントインポート

各シェアボタンのアイコンを読み込むために、Font AwesomeからWebフォントをインポートします。

以下のコードは、ダッシュボード⇒設定⇒詳細設定⇒headに要素を追加、に貼り付けてください。

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

CSS

以下のコードは次の箇所に貼り付けてください。

  • PC用・・・ダッシュボード⇒デザイン⇒スパナアイコン⇒ヘッダ⇒タイトル下
  • スマホ用・・・ダッシュボード⇒デザイン⇒スマホアイコン⇒ヘッダ⇒タイトル下

両者での違いは、以下のとおりです。

  • シェアボタンの大きさ
  • LINEのシェアボタンに関する記述があるかどうか(PCからだとLINEのシェアができないため、記述を省いています。)
  • シェアリンクのhoverスタイルがあるかどうか

PC用

<style type="text/css">

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

/* サークルのスタイル */
.sns_circle{
    position:relative;
    width: 50px;
    height: 50px;
    margin:0 3px 0 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:35px;
    color:#FFF;
}

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

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

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

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

/* Webフォントに関する指定(Pocket) */
.sns_circle.pocket.sns_circle span{
    position:absolute;
    padding:6px 0 0 12px;
    font-size: 28px;
    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;
    opacity: 0.5;
}

/* シェアボタンエリア */
ul.circle_group{
    width: 280px;
    margin:auto;
    list-style: none;
    padding:0;
}

/* Font Awesome hatena bookmark(手作り) */
.fa-hatena:before {
    content: "B!";
    font-family: Verdana;
    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;
}

</style>

スマホ用

<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:0 3px 0 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 0 0 5px;
    color:#FFF;
    font-size: 25px;
}

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

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

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

/* Webフォントに関する指定(Pocket) */
.sns_circle.pocket.sns_circle span{
    position:absolute;
    padding:8px 0 0 10px;
    font-size: 20px;
    color:#FFF;
}

/* Webフォントに関する指定(LINE) */
.sns_circle.line.sns_circle span{
    position:absolute;
    padding:12px 0 0 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;
}

/* シェアボタンエリア */
ul.circle_group{
    width: 276px;
    margin:auto;
    list-style: none;
    padding:7px 0 7px 0;
    overflow-y:hidden;
}

/* Font Awesome hatena bookmark(手作り) */
.fa-hatena:before {
    content: "B!";
    font-family: Verdana;
    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>

HTML

以下のコードは次の箇所に貼り付けてください。

  • PC用・・・ダッシュボード⇒デザイン⇒スパナアイコン⇒記事⇒記事上 or 記事下
  • スマホ用・・・ダッシュボード⇒デザイン⇒スマホアイコン⇒記事⇒記事上 or 記事下

両者での違いは、LINEのシェアボタンに関する記述があるかどうかです。

PC用

<ul class="circle_group clearfix">
    <li class="sns_circle hatebu"><span><i class="fa fa-hatena"></i></span><a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" 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="http://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="http://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-get-pocket"></i></span><a href="http://getpocket.com/edit?url={URLEncodedPermalink}"></a></li>
</ul>

スマホ用

<ul class="circle_group clearfix">
    <li class="sns_circle hatebu"><span><i class="fa fa-hatena"></i></span><a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" 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="http://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="http://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-get-pocket"></i></span><a href="http://getpocket.com/edit?url={URLEncodedPermalink}"></a></li>
    <li class="sns_circle line"><span><i class="fa fa-line"></i></span><a href="http://line.me/R/msg/text/?{Title} - {BlogTitle} {URLEncodedPermalink}"></a></li>
</ul>

完成!

f:id:donchan922:20150811104029p:plain
PC用では、上図のLINEシェアボタンがない状態が完成形となります。

おまけ

シェアボタンを角丸、四角、左寄せに変更するカスタマイズを紹介します。

角丸、四角にするためには、PC、スマホ用ともにCSSの、

  • .sns_circle{...}
  • .sns_circle a{...}

のborder-radiusの値を以下のとおりに変更してください。

角丸

f:id:donchan922:20150811104129p:plain

  • -webkit-border-radius: 15%;
  • -moz-border-radius: 15%;
  • border-radius: 15%;

四角

f:id:donchan922:20150811104142p:plain

  • -webkit-border-radius: 0%;
  • -moz-border-radius: 0%;
  • border-radius: 0%;

左寄せ

f:id:donchan922:20150811105417p:plain

PC、スマホ用ともにCSSの、ul.circle_group{...}を以下のとおりに変更してください。

/* シェアボタンエリア */
ul.circle_group{
    list-style: none;
    padding:7px 0 7px 0;
}


まとめ

何か動作がおかしい、こういうところ直してほしいというものがあればシェアボタンにてご連絡ください。なるべく対応します。

これらのシェアボタンはスクリプトを用いていないので、標準のシェアボタンより動作が軽いです。是非一度使ってみて体感してください。