隣の花の育てかた

~気になるお隣さん【5人家族+ねこ】の家庭事情~

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

f:id:Sakuranbox:20200108165627j:image

 

 

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

 

PC初心者でもコピペだけで実装できました!

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

 

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

 

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

 

 

 

 

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

 

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

 

完成したもの

 

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">

 

 

HTMLを記事上・記事下に追記する

 

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

 

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>
<!-- シェアボタンここまで -->

 

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

 f:id:Sakuranbox:20200108164300j:image

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

 

  • 文字の大きさは%の数値で変わります
  • 太字ではないほうがいいなら<strong></strong>を消してください

 

 

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

 

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

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

 

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;
}
/*** シェアボタンここまで */

 

SHIROMAさんのシェアボタンカスタマイズ記事⑦からHTMLとCSSをお借りして

サルワカさんのデザイン色や形を取り入れて丸から四角へデザインを変更しました

 

 

SHIROMAさんの記事では「はてなブログ」で使えるシェアボタンデザインが10種類もあります

 

どれも丁寧に初心者でも簡単に設定できるようわかりやすく書いてくれているので是非ご覧になってください☆

 

実装できたらきちんと動くか確認してくださいね

 

 

他のシェアボタンはどうやって追記するのかな…

また時間あるときに頑張って解読していこうかなと思います(汗)

 

 

こんなカスタマイズもしています

 

PC初心者でもできた当ブログで使用しているカスタマイズの備忘録です

参考にさせていただいたブログも記載させていただいてるので是非ご覧くださいませ!

 

www.tonari-hana.com

www.tonari-hana.com

www.tonari-hana.com