2019.01.05

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう！

SNS流入を増やすためにも重要なシェアボタン。多くのブログで取り入れていると思います。はてなブログではデフォルトでシェアボタンを記事上・記事下に付けることができますが、正直必要最低限という感じでデザインは良くないです。

機能面では充分ですが、シェアカウントなど人によってはいらない機能まであるので動作が重くなりがちです。

そこで他の方が作ったシェアボタンをいろいろと探していましたが、なかなか気に入るデザインがありませんでした。それでもさらに調べてみると自分で作ることができることが判明。

それから数秒も経たないうちに作り始めていました。制作時間は下調べを含めて3時間ほどです。仕上がりはこんな感じ。各ボタンをクリックすると、色が変わる仕様になっています。

そこで今回は、作ったはてなブログのシェアボタンのカスタマイズについて紹介したいと思います。

＊2019/02/23　コードを軽量化しました。（機能の変化はありません）

はてなブログで使える共有ボタンを作ってみました。
シンプルをテーマに実用的に使えます。
今のところ、Google Chromeでのみ動作確認をしました。#はてなブログ #ブログ初心者 #webデザイン #高校生 #css pic.twitter.com/fGBHxaqIev

— koblog@高校生ブロガー & webデザイナー(仮) (@Flower71418279) January 4, 2019

求めていた機能

今回作ったシェアボタンには僕が求めた機能しかついていません。

Twitter
Pocket
Feedly
はてなブックマーク
軽い動作（←前提条件）

動作が軽くなるべくシンプルなものを使いたいと考えていたため、このような感じになりました。また使う側から考えても、自分でコードを書き直すのは面倒なので、できるだけコピペだけで導入できる仕様にしました。

SNSに関してはFacebookは元々やっていないので除外。Google+も興味が無いので入れませんでした。一応HTMLとCSSにコードを追加すれば簡単に入れることもできるので、気が向いたらブログにしたいと思います。

＊Google+はサービス終了するらしいです。

Font Awesomeの準備

ここからはカスタマイズ方法を紹介していきます。

今回作ったシェアボタンでは、下の赤い四角で囲んだアイコン部分にFont Awesomeを使います。

導入方法は下の記事で紹介しているので、まだ導入していない方は参考にしてみてください。

シェアボタンのHTML

Caution!

HTMLやCSSコードを写す前に、以前のコードをバックアップすることをオススメします。またシェアボタンを設置するにあたって、何らかのトラブルや損失・損害等につきましては一切責任を問わないものとします。

まずはHTMLから紹介します。記事上または記事下に書いてください。一応記事下に入れることを想定して作っています。サイドバーではデザインが崩れると思います。

<!--シェアボタン-->
<div class="share-btn">
<div  class="share-btn-inner">
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text=高校生のWEBデザインブログ「koblog」から {URLEncodedPermalink}" class="twitter-button" target="_blank"><i class="blogicon-twitter lg"></i><span class="small-text">　この記事をツイートする</span></a>
</div>
</div>

<div class="share-btn2">
<div class="share-btn2-inner">
<!--はてブ-->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><span class="small-text">　はてブ</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fab fa-get-pocket"></i><span class="small-text">　Pocket</span></a>
<!--Feedly-->
<a href="http://feedly.com/i/subscription/feed/https://koblog.hatenablog.jp/feed" class="feedly-button" target="_blank"><i class="blogicon-rss lg"></i><span class="small-text">　Feedly</span></a>
</div>
</div>

このままでは僕のブログをSNSで紹介することになるので、自分のブログ用に変更してください。

<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text=高校生のWEBデザインブログ「koblog」から {URLEncodedPermalink}" class="twitter-button" target="_blank">

　　　　　　　＊＊＊＊＊

「?text=〇〇」のあとにツイートする際に入れたい言葉を記述してください。

設定した言葉は下の画像のように表示されます。

<!--Feedly-->
<a href="http://feedly.com/i/subscription/feed/https://koblog.hatenablog.jp/feed" class="feedly-button" target="_blank">

　　　　　　　＊＊＊＊＊

「https://koblog.hatenablog.jp」のコードを自分のURLに変えてください。;

HTMLの設定はこれで完了です。このままでは、ただ文字が並んでいるだけになるのでCSSも記述します。

シェアボタンのCSS

機能・デザインがシンプルなのでCSSコードも短くなっています。

/*シェアボタン*/
.share-btn {
    margin-bottom: 10px;
    text-align: center
}
.share-btn-inner a {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    text-align: center;
    vertical-align: middle;
    color: #000;
    text-decoration: none
}
.share-btn .small-text {
    font-size: 20px
}
.share-btn .twitter-button {
    background: #fff;
    border: 1px solid #000
}
.share-btn a:active {
    top: 3px;
    box-shadow: none
}
.share-btn .twitter-button:active {
    background: #1da1f3
}
.share-btn2 {
    margin-bottom: 10px;
    text-align: center
}
.share-btn2-inner a {
    position: relative;
    display: inline-block;
    width: 32.5%;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    text-align: center;
    vertical-align: middle;
    color: #000;
    text-decoration: none
}
.share-btn2 .small-text {
    font-size: 20px
}
.share-btn2 .hatena-bookmark-button {
    background: #fff;
    border: 1px solid #000
}
.share-btn2 .pocket-button {
    background: #fff;
    border: 1px solid #000
}
.share-btn2 .feedly-button {
    background: #fff;
    border: 1px solid #000
}
.share-btn2 a:active {
    top: 3px;
    box-shadow: none
}
.share-btn2 .hatena-bookmark-button:active {
    background: #00a5df
}
.share-btn2 .pocket-button:active {
    background: #ee4055
}
.share-btn2 .feedly-button:active {
    background: #2bb24c
}
@media screen and (max-width: 750px) {
    .share-btn-inner a {
        font-size: 15px
    }
    .share-btn .small-text {
        font-size: 15px
    }
    .share-btn .twitter-button {
        border: 0.5px solid #000
    }
    .share-btn a:active {
        top: 3px;
        box-shadow: none
    }
    .share-btn2-inner a {
        width: 32%;
        font-size: 15px
    }
    .share-btn2 .small-text {
        font-size: 15px
    }
    .share-btn2 .hatena-bookmark-button {
        border: 0.5px solid #000
    }
    .share-btn2 .pocket-button {
        border: 0.5px solid #000
    }
    .share-btn2 .feedly-button {
        border: 0.5px solid #000
    }
}

基本的にはこのままで大丈夫です。ただブログやブログテーマによっては、囲いや文字の大きさが合わないかもしれません。その場合の変更場所と変更方法は下の通りです。

.share-btn-inner a {
position: relative;
display: inline-block;
width: 100%;
height: 60px;
line-height: 60px;
font-size: 23px;
text-align: center;
vertical-align: middle;
color: #000000;
text-decoration: none;
}

囲いの大きさ

Twitter→「.share-btn-inner」の「width: 〇〇%;」と「height: 〇〇px;」
その他→「.share-btn2-inner」の「width: 〇〇%;」と「height: 〇〇px;」

文字の大きさ

Twitter→「.share-btn-inner」の「font-size: 〇〇px;」
その他→「.share-btn2-inner」の「font-size: 〇〇px;」

文字の位置

Twitter→「.share-btn-inner」の「line-height: 〇〇px:」
その他→「.share-btn2-inner」の「line-height: 〇〇px:」

文字色

Twitter→「.share-btn-inner」の「color: #〇〇〇〇〇〇;」
その他→「.share-btn2-inner」の「color: #〇〇〇〇〇〇;」

文字色の指定にはHTMLカラーコードを使います。よかったら下の記事を参考にしてみてください。

HTMLカラーコードの使い方。サイトを見やすく配色する

参考にさせてもらったサイト

今回シェアボタンを作成するにあたって、下の方々のブログを参考にさせてもらいました。

デザイン

トバログ

いつも見させていただいているブログです。シンプルとミニマルをテーマに、様々なアイテムを分かりすく紹介しています。今回は（少しだけ）シェアボタンのデザインを参考にさせてもらいました。

HTML・CSS

WEMO.tech

Twitterのシェアコードを理解するために参考にさせてもらいました。シェアボタンを作りたいと考えている人は、下の記事を見ておくべきだと思います。

プラグインなしでSNSシェアボタンを自作するための基本知識と実装コード、アナリティクス解析方法 | WEMO

Yukihy Life

今回のシェアボタンは下の記事で紹介しているコードを参考にしています。シェアカウントを表示させたい場合は参考にしてみてください。シェア数をつけるためにはjQueryを使います。

【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2 - Yukihy Life

@Flower71418279