コピペだけでできる！はてなブログのシェアボタンをかわいくカスタマイズしてみた

f:id:Sakuranbox:20200108165627j:image

はてなブログのシェアボタンが可愛くないので（汗）おふたりの記事を参考にちょっとカスタマイズしてかわいくしてみました

ＰＣ初心者でもコピペだけで実装できました！

デザインの参考にぜひどうぞ

手順を順番に解説していきますよ～

バックアップをしてからコピペしてくださいね

カスタマイズしたシェアボタンはこちら
はてなブログのシェアボタンを解除する
下準備
ＨＴＭＬを記事上・記事下に追記する
シェアボタンのデザインをＣＳＳに追加する
こんなカスタマイズもしています

カスタマイズしたシェアボタンはこちら

当ブログはレスポンシブ対応です
レスポンシブではない方は記事内にある参考記事をご覧ください
不備が起きても責任負えかねますのでカスタマイズは自己責任でお願い致します

完成したもの

f:id:Sakuranbox:20200108163025j:image

上に文字を足したバージョン

f:id:Sakuranbox:20200108164300j:image

実装していくよ！

はてなブログのシェアボタンを解除する

シェアボタンを作るのでまずは、

はてなブログに最初からついているシェアボタンを解除をします

ダッシュボード➡デザイン➡スパナマークのカスタマイズ➡記事➡ソーシャルパーツ

ソーシャルパーツのシェアボタンを全部外します

f:id:Sakuranbox:20200108163043j:image

下準備

アイコンを表示させるためのコードを

ダッシュボード➡設定➡詳細設定➡検索エンジン最適化➡headに要素を追加にコードをいれます

f:id:Sakuranbox:20200108163106j:image

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

ＨＴＭＬを記事上・記事下に追記する

ダッシュボード➡デザイン➡スパナマークのカスタマイズ➡記事➡記事上下のカスタマイズにシェアボタンを入れたいところに追記します

f:id:Sakuranbox:20200108163124j:image

<!-- ここからシェアボタン -->
<div class="share-btn-type7">
  <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加" class="share-btn__item share-btn__item--hatebu" target="_blank"><i class="blogicon-bookmark lg"></i></a>
  <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="share-btn__item share-btn__item--facebook" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank"><i class="fa fa-facebook-square lg"></i></a>
  <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share-btn__item share-btn__item--twitter" target="_blank"><i class="blogicon-twitter lg"></i></a>
  <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="share-btn__item share-btn__item--pocket" target="_blank"><i class="fa fa-get-pocket"></i></a>
</div>
<!-- シェアボタンここまで -->

文字をシェアボタンの上にこのように☟いれるなら１と２の間に下記を追記してください

f:id:Sakuranbox:20200108164300j:image

<div align="center">
<span style="font-size: 100%;"><strong>ここに文字を入れる</strong></span>
</div>

文字の大きさは％の数値で変わります
文字上に空白が欲しかったら<storong>の前に<br/>を入れる
文字下に空白が欲しかったら</storong>の後に<br/>を入れる
太字がいらなかったら<strong></strong>を消してください

シェアボタンのデザインをＣＳＳに追加する

シェアボタンのデザインを設定します

ダッシュボード➡デザイン➡スパナマークのカスタマイズ➡デザインＣＳＳに追記します

f:id:Sakuranbox:20200108163607j:image

/*** シェアボタンここから*/
.share-btn-type7 {
  max-width: 240px;
  margin: 2px auto;
  display: flex;
  justify-content: space-between;
}
.share-btn-type7 .share-btn__item {
  width: 50px;
  height: 50px;
  color: #fff;
  font-size: 23px;
  text-align: center;
  line-height: 50px;
  border-radius: 12%;
  box-shadow: 0 2px 2px rgba(0,0,0,.16);
  transition: all .3s;
}
.share-btn-type7 .share-btn__item:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(0,0,0,.14);
}
.share-btn-type7 .share-btn__item--hatebu {
  background-color: #49a8fb;
}
.share-btn-type7 .share-btn__item--facebook {
  background-color: #6680d8;
}
.share-btn-type7 .share-btn__item--twitter {
  background-color: #22b8ff;
}
.share-btn-type7 .share-btn__item--pocket {
  background-color: #ff6d82;
}
/*** シェアボタンここまで */