1. HOME
  2. >
  3. ブログ運営
  4. >
  5. カスタマイズ

コピペで簡単！はてなブログのSNSシェアボタンをカスタマイズ

アフィリエイト広告を利用しています

投稿日：
コピペで簡単！はてなブログのSNSシェアボタンをカスタマイズのアイキャッチ画像

今回はシェアボタンを作ってみました。シェアボタンのカスタマイズ記事はすでにたくさんの人が書いてるので、供給過多ぎみですが…

もし気に入ったデザインがあったら使ってみてください。全部で10種類作りました。作りすぎ？？

シェアボタンをデフォルトのままにしておくと、スマホでシェアボタンが表示されないことがたまにあります。機会損失を防ぐためにも、カスタマイズしておいた方が良いでしょう。

念のため注意事項をご覧ください。

デザインは10種類

今回用意したのは以下の10種類のデザインです。

はてなブログ用シェアボタンの設置

それでは記事の設置方法を説明していきます。

注意事項

  • カスタマイズは自己責任でお願いします。万が一、何か不具合があっても責任は負いかねます。
  • 記事はよく読んで下さい。
  • 念のためにクリックしてみて、動作確認は必ず行いましょう。
  • デザイン→カスタマイズ→記事→ソーシャルパーツでデフォルトのシェアボタンは非表示にしてください。そうしないと、読み込みが遅くなります。
  • デザイン→カスタマイズ→記事→記事ページをプレビューをクリックしておくと、表示を確認しながら作業できます。

アイコンを表示させる準備

まずは下準備です。

シェアボタンにアイコンを表示させるための設定をします。

ダッシュボードの設定→詳細設定→headに要素を追加に以下のコードを貼ってください。すでに同じコードが貼ってある人は貼らなくて大丈夫です。

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

これでアイコンを表示させる準備ができました。

スマホで表示させる（レスポンシブデザインにしていない場合）

レスポンシブデザインにしていない場合にスマホで表示させるには、CSSはstyleタグで囲って記事上に挿入してください。

<style>
/*ここにCSSをコピペ*/
</style>

シェアボタンのコード

HTMLとCSSのコードを指示された場所にコピペしてください。

それぞれ2つのコードが記載されていますが、上がHTMLで下がCSSです。

HTMLは記事上か記事下のどちらか、もしくは両方にコピペしてください。

CSSは「デザインCSS」に。レスポンシブデザインにしてない場合、スマホでも表示させるにはstyleタグで囲って記事上にコピペしてください

シンプルなシェアボタン

↓を記事上か記事下のどちらか、もしくは両方にコピペしてください。

<!-- ここからシェアボタン -->
<div class="share-btn-type1">
  <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>
<!-- シェアボタンここまで -->

↓を「デザインCSS」にコピペしてください。レスポンシブデザインにしてない場合、スマホでも表示させるにはstyleタグで囲って記事上にコピペしてください（詳細）。

/**
 * シェアボタンここから
 */
.share-btn-type1 {
  margin: 1.2em 0;
  display: flex;
}
.share-btn-type1 .share-btn__item {
  width: 25%;
  height: 40px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  transition: all .3s;
}
.share-btn-type1 .share-btn__item--hatebu {
  background-color: #00A4DE;
}
.share-btn-type1 .share-btn__item--facebook {
  background-color: #1778F2;
}
.share-btn-type1 .share-btn__item--twitter {
  background-color: #1BA1F3;
}
.share-btn-type1 .share-btn__item--pocket {
  background-color: #EF4155;
}
.share-btn-type1 .share-btn__item:hover {
  opacity: .8;
}
/**
 * シェアボタンここまで
 */

ボタンっぽいシェアボタン

↓を記事上か記事下のどちらか、もしくは両方にコピペしてください。

<!-- ここからシェアボタン -->
<div class="share-btn-type2">
  <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>
<!-- シェアボタンここまで -->

↓を「デザインCSS」にコピペしてください。レスポンシブデザインにしてない場合、スマホでも表示させるにはstyleタグで囲って記事上にコピペしてください（詳細）。

/**
 * シェアボタンここから
 */
.share-btn-type2 {
  margin: 1.2em 0;
  display: flex;
  justify-content: space-between;
}
.share-btn-type2 .share-btn__item {
  width: 24%;
  height: 40px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  border-radius: 4px;
  transition: all .3s;
}
.share-btn-type2 .share-btn__item--hatebu {
  background-color: #00A4DE;
  box-shadow: 0 4px #038ebf;
}
.share-btn-type2 .share-btn__item--facebook {
  background-color: #1778F2;
  box-shadow: 0 4px #1366ce;
}
.share-btn-type2 .share-btn__item--twitter {
  background-color: #1BA1F3;
  box-shadow: 0 4px #1280c3;
}
.share-btn-type2 .share-btn__item--pocket {
  background-color: #EF4155;
  box-shadow: 0 4px #c3293b;
}
.share-btn-type2 .share-btn__item:hover {
  transform: translateY(4px);
  box-shadow: 0 0 #333;
}
/**
 * シェアボタンここまで
 */

ボタンっぽいテキスト入りシェアボタン

↓を記事上か記事下のどちらか、もしくは両方にコピペしてください。

<!-- ここからシェアボタン -->
<div class="share-btn-type3">
  <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>hatena</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>facebook</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>Twitter</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>Pocket</a>
</div>
<!-- シェアボタンここまで -->

↓を「デザインCSS」にコピペしてください。レスポンシブデザインにしてない場合、スマホでも表示させるにはstyleタグで囲って記事上にコピペしてください（詳細）。

/**
 * シェアボタンここから
 */
.share-btn-type3 {
  margin: 1.2em 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.share-btn-type3 i {
  margin-right: 8px;
  font-size: 1rem;
  vertical-align: middle;
}
.share-btn-type3 .share-btn__item {
  width: 49.5%;
  height: 40px;
  margin-bottom: 8px;
  color: #fff;
  font-size: .8rem;
  text-align: center;
  text-decoration: none;
  letter-spacing: .04em;
  line-height: 40px;
  border-radius: 4px;
  transition: all .3s;
}
.share-btn-type3 .share-btn__item--hatebu {
  background-color: #00A4DE;
  box-shadow: 0 4px #038ebf;
}
.share-btn-type3 .share-btn__item--facebook {
  background-color: #1778F2;
  box-shadow: 0 4px #1366ce;
}
.share-btn-type3 .share-btn__item--twitter {
  background-color: #1BA1F3;
  box-shadow: 0 4px #1280c3;
}
.share-btn-type3 .share-btn__item--pocket {
  background-color: #EF4155;
  box-shadow: 0 4px #c3293b;
}
.share-btn-type3 .share-btn__item:hover {
  transform: translateY(4px);
  box-shadow: 0 0 #333;
}
@media (min-width: 768px){
  .share-btn-type3 .share-btn__item {
    width: 24%;
  }
}
/**
 * シェアボタンここまで
 */

吹き出しの入ったシェアボタン

↓を記事上か記事下のどちらか、もしくは両方にコピペしてください。

<!-- ここからシェアボタン -->
<div class="share-btn-type4">
  <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><span class="share-btn__small-text">hatena</span></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><span class="share-btn__small-text">facebook</span></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><span class="share-btn__small-text">Twitter</span></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><span class="share-btn__small-text">Pocket</span></a>
</div>
<!-- シェアボタンここまで -->

↓を「デザインCSS」にコピペしてください。レスポンシブデザインにしてない場合、スマホでも表示させるにはstyleタグで囲って記事上にコピペしてください（詳細）。

/**
 * シェアボタンここから
 */
.share-btn-type4 {
  max-width: 500px;
  margin: 1.2em auto;
  padding-top: 50px;
  display: flex;
  justify-content: space-between;
}
.share-btn-type4 i {
  font-size: 14px;
}
.share-btn-type4 [class*=blogicon-].lg {
  line-height: 22px;
  vertical-align: top;
}
.share-btn-type4 .share-btn__item {
  width: 24%;
  height: 26px;
  margin-bottom: 8px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  line-height: 26px;
  border-radius: 4px;
  position: relative;
}
.share-btn-type4 .share-btn__small-text {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 100%;
  height: 40px;
  border: 1px solid #e0e0e0;
  box-sizing: border-box;
  color: #666;
  font-size: 12px;
  letter-spacing: .04em;
  line-height: 40px;
  border-radius: 4px;
  transition: all .3s;
}
.share-btn-type4 .share-btn__small-text:before {
  content: "";
  position: absolute;
  left: calc(50% - 5px);
  top: 100%;
  border-width: 5px 5px 0;
  border-style: solid;
  border-color: transparent;
  border-top-color: #fff;
  z-index: 2;
}
.share-btn-type4 .share-btn__small-text:after {
  content: "";
  position: absolute;
  left: calc(50% - 6px);
  top: 100%;
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: transparent;
  border-top-color: #e0e0e0;
  z-index: 1;
}
.share-btn-type4 .share-btn__item--hatebu {
  background-color: #00A4DE;
}
.share-btn-type4 .share-btn__item--facebook {
  background-color: #1778F2;
}
.share-btn-type4 .share-btn__item--twitter {
  background-color: #1BA1F3;
}
.share-btn-type4 .share-btn__item--pocket {
  background-color: #EF4155;
}
.share-btn-type4 .share-btn__item:hover .share-btn__small-text {
  transform: translateY(-4px);
}
/**
 * シェアボタンここまで
 */

左にアイコンを配置したシェアボタン

↓を記事上か記事下のどちらか、もしくは両方にコピペしてください。

<!-- ここからシェアボタン -->
<div class="share-btn-type5">
  <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"><span class="share-btn__icon"><i class="blogicon-bookmark lg"></i></span><span class="share-btn__small-text">hatena</span></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"><span class="share-btn__icon"><i class="fa fa-facebook-square lg"></i></span><span class="share-btn__small-text">facebook</span></a>
  <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share-btn__item share-btn__item--twitter" target="_blank"><span class="share-btn__icon"><i class="blogicon-twitter lg"></i></span><span class="share-btn__small-text">Twitter</span></a>
  <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="share-btn__item share-btn__item--pocket" target="_blank"><span class="share-btn__icon"><i class="fa fa-get-pocket"></i></span><span class="share-btn__small-text">Pocket</span></a>
</div>
<!-- シェアボタンここまで -->

↓を「デザインCSS」にコピペしてください。レスポンシブデザインにしてない場合、スマホでも表示させるにはstyleタグで囲って記事上にコピペしてください（詳細）。

/**
 * シェアボタンここから
 */
.share-btn-type5 {
  margin: 1.2em 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.share-btn-type5 .share-btn__item {
  display: flex;
  width: 49%;
  height: 36px;
  margin-bottom: 8px;
  line-height: 36px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  color: #333;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: all .3s;
}
.share-btn-type5 .share-btn__item:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.share-btn-type5 .share-btn__item--hatebu {
  color: #00A4DE;
  border: 1px solid #00A4DE;
}
.share-btn-type5 .share-btn__item--facebook {
  color: #1778F2;
  border: 1px solid #1778F2;
}
.share-btn-type5 .share-btn__item--twitter {
  color: #1BA1F3;
  border: 1px solid #1BA1F3;
}
.share-btn-type5 .share-btn__item--pocket {
  color: #EF4155;
  border: 1px solid #EF4155;
}
.share-btn-type5 .share-btn__icon {
  width: 40px;
  color: #fff;
}
.share-btn-type5 .share-btn__item--hatebu .share-btn__icon{
  background-color: #00A4DE;
}
.share-btn-type5 .share-btn__item--facebook .share-btn__icon{
  background-color: #1778F2;
}
.share-btn-type5 .share-btn__item--twitter .share-btn__icon{
  background-color: #1BA1F3;
}
.share-btn-type5 .share-btn__item--pocket .share-btn__icon{
  background-color: #EF4155;
}
.share-btn-type5 .share-btn__small-text {
  width: calc(100% - 40px);
  padding-left: 12px;
  box-sizing: border-box;
  letter-spacing: .04em;
  text-align: left;
  font-size: 12px;
}
@media (min-width: 768px){
  .share-btn-type5 .share-btn__item {
    width: 24%;
  }
}
/**
 * シェアボタンここまで
 */

左にアイコンを配置したシェアボタンその2

↓を記事上か記事下のどちらか、もしくは両方にコピペしてください。

<!-- ここからシェアボタン -->
<div class="share-btn-type6">
  <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"><span class="share-btn__icon"><i class="blogicon-bookmark lg"></i></span><span class="share-btn__small-text">hatena</span></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"><span class="share-btn__icon"><i class="fa fa-facebook-square lg"></i></span><span class="share-btn__small-text">facebook</span></a>
  <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share-btn__item share-btn__item--twitter" target="_blank"><span class="share-btn__icon"><i class="blogicon-twitter lg"></i></span><span class="share-btn__small-text">Twitter</span></a>
  <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="share-btn__item share-btn__item--pocket" target="_blank"><span class="share-btn__icon"><i class="fa fa-get-pocket"></i></span><span class="share-btn__small-text">Pocket</span></a>
</div>
<!-- シェアボタンここまで -->

↓を「デザインCSS」にコピペしてください。レスポンシブデザインにしてない場合、スマホでも表示させるにはstyleタグで囲って記事上にコピペしてください（詳細）。

/**
 * シェアボタンここから
 */
.share-btn-type6 {
  margin: 1.2em 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.share-btn-type6 .share-btn__item {
  display: flex;
  width: 49%;
  height: 36px;
  margin-bottom: 8px;
  line-height: 36px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  color: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: all .3s;
}
.share-btn-type6 .share-btn__item:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.share-btn-type6 .share-btn__item--hatebu {
  background-color: #36b8e6;
}
.share-btn-type6 .share-btn__item--facebook {
  background-color: #378af3;
}
.share-btn-type6 .share-btn__item--twitter {
  background-color: #3cb0f7;
}
.share-btn-type6 .share-btn__item--pocket {
  background-color: #f75e6f;
}
.share-btn-type6 .share-btn__icon {
  width: 42px;
}
.share-btn-type6 .share-btn__item--hatebu .share-btn__icon{
  background-color: #00A4DE;
}
.share-btn-type6 .share-btn__item--facebook .share-btn__icon{
  background-color: #1778F2;
}
.share-btn-type6 .share-btn__item--twitter .share-btn__icon{
  background-color: #1BA1F3;
}
.share-btn-type6 .share-btn__item--pocket .share-btn__icon{
  background-color: #EF4155;
}
.share-btn-type6 .share-btn__small-text {
  width: calc(100% - 42px);
  padding-left: 12px;
  box-sizing: border-box;
  letter-spacing: .04em;
  text-align: left;
  font-size: 12px;
}
@media (min-width: 768px){
  .share-btn-type6 .share-btn__item {
    width: 24%;
  }
}
/**
 * シェアボタンここまで
 */

丸いシェアボタン

↓を記事上か記事下のどちらか、もしくは両方にコピペしてください。

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

↓を「デザインCSS」にコピペしてください。レスポンシブデザインにしてない場合、スマホでも表示させるにはstyleタグで囲って記事上にコピペしてください（詳細）。

/**
 * シェアボタンここから
 */
.share-btn-type7 {
  max-width: 240px;
  margin: 1.2em auto;
  display: flex;
  justify-content: space-between;
}
.share-btn-type7 .share-btn__item {
  width: 50px;
  height: 50px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  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: #00A4DE;
}
.share-btn-type7 .share-btn__item--facebook {
  background-color: #1778F2;
}
.share-btn-type7 .share-btn__item--twitter {
  background-color: #1BA1F3;
}
.share-btn-type7 .share-btn__item--pocket {
  background-color: #EF4155;
}
/**
 * シェアボタンここまで
 */

白背景の丸いシェアボタン

↓を記事上か記事下のどちらか、もしくは両方にコピペしてください。

<!-- ここからシェアボタン -->
<div class="share-btn-type8">
  <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>
<!-- シェアボタンここまで -->

↓を「デザインCSS」にコピペしてください。レスポンシブデザインにしてない場合、スマホでも表示させるにはstyleタグで囲って記事上にコピペしてください（詳細）。

/**
 * シェアボタンここから
 */
.share-btn-type8 {
  max-width: 240px;
  margin: 1.2em auto;
  display: flex;
  justify-content: space-between;
}
.share-btn-type8 .share-btn__item {
  width: 50px;
  height: 50px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  transition: all .3s;
  box-shadow: 0 2px 4px rgba(0,0,0,.14);
  transition: all .3s;
  border: 1px solid transparent;
}
.share-btn-type8 .share-btn__item:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
.share-btn-type8 .share-btn__item--hatebu {
  color: #00A4DE;
}
.share-btn-type8 .share-btn__item--facebook {
  color: #1778F2;
}
.share-btn-type8 .share-btn__item--twitter {
  color: #1BA1F3;
}
.share-btn-type8 .share-btn__item--pocket {
  color: #EF4155;
}
/**
 * シェアボタンここまで
 */

白背景の四角いシェアボタン

↓を記事上か記事下のどちらか、もしくは両方にコピペしてください。

<!-- ここからシェアボタン -->
<div class="share-btn-type9">
  <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>
<!-- シェアボタンここまで -->

↓を「デザインCSS」にコピペしてください。レスポンシブデザインにしてない場合、スマホでも表示させるにはstyleタグで囲って記事上にコピペしてください（詳細）。

/**
 * シェアボタンここから
 */
.share-btn-type9 {
  max-width: 210px;
  margin: 1.2em auto;
  display: flex;
  justify-content: space-between;
}
.share-btn-type9 .share-btn__item {
  width: 40px;
  height: 40px;
  color: #fff;
  font-size: 18px;
  text-align: center;
  line-height: 40px;
  border-radius: 4px;
  transition: all .3s;
  box-shadow: 0 2px 4px rgba(0,0,0,.14);
  transition: all .3s;
  border: 1px solid transparent;
}
.share-btn-type9 .share-btn__item:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
.share-btn-type9 .share-btn__item--hatebu {
  color: #00A4DE;
}
.share-btn-type9 .share-btn__item--facebook {
  color: #1778F2;
}
.share-btn-type9 .share-btn__item--twitter {
  color: #1BA1F3;
  font-size: 16px;
}
.share-btn-type9 .share-btn__item--pocket {
  color: #EF4155;
}
/**
 * シェアボタンここまで
 */

わざと背景色をずらしたシェアボタン

↓を記事上か記事下のどちらか、もしくは両方にコピペしてください。

<!-- ここからシェアボタン -->
<div class="share-btn-type10">
  <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>
<!-- シェアボタンここまで -->

↓を「デザインCSS」にコピペしてください。レスポンシブデザインにしてない場合、スマホでも表示させるにはstyleタグで囲って記事上にコピペしてください（詳細）。

/**
 * シェアボタンここから
 */
.share-btn-type10 {
  max-width: 240px;
  margin: 1.2em auto;
  display: flex;
  justify-content: space-between;
}
.share-btn-type10 .share-btn__item {
  position: relative;
  width: 50px;
  height: 50px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  box-sizing: border-box;
  transition: all .3s;
}
.share-btn-type10 .share-btn__item i {
  position: relative;
  z-index: 3;
}
.share-btn-type10 .share-btn__item:before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-sizing: border-box;
  transition: all .3s;
  z-index: 1;
}
.share-btn-type10 .share-btn__item:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #000;
  box-sizing: border-box;
  opacity: .6;
  z-index: 2;
}
.share-btn-type10 .share-btn__item:hover:before {
  left: 0px;
  top: 0px;
  opacity: .8;
}
.share-btn-type10 .share-btn__item--hatebu:before {
  background-color: #00A4DE;
}
.share-btn-type10 .share-btn__item--facebook:before {
  background-color: #1778F2;
}
.share-btn-type10 .share-btn__item--twitter:before {
  background-color: #1BA1F3;
}
.share-btn-type10 .share-btn__item--pocket:before {
  background-color: #EF4155;
}
/**
 * シェアボタンここまで
 */

まとめ

はてなブログのデフォルトのシェアボタンは表示が遅いので、上記の方法でオリジナルシェアボタンを使うのがおすすめです。

シェアボタンは色々カスタマイズできるので、自分なりにカスタマイズしてみましょう。

ちゃんとシェアできるか、動作確認は忘れずに。

他にもこんな記事があります。

コピペで簡単！CSSではてなブログの見出しをカスタマイズ！ | SHIROMAG

Search

運営者情報

Category

Tags

Amazon (14) CSS (2) hotentry (4) HTML (2) JavaScript (5) Kindle (3) Netflix (1) PC (2) pickup (5) recommend (18) SEO (1) Webサービス (1) Webデザイナー (2) Webデザイン (1) WordPress (16) お店 (2) はてな (7) アクセスアップ (1) インテリア (2) エディタ (1) カスタマイズ (16) カメラ (2) クレジットカード (5) コンビニ (1) サーバー (3) スクール (17) タブレット (2) ダンス (8) チケット (3) ツール (1) テーマ (4) ファッション (4) フリーランス (3) ブログ (22) プラグイン (1) プログラミング (11) レンタルサーバー (3) 仕事 (4) 大阪 (1) 東京 (5) 歴史 (2) 池袋 (1) 渋谷 (1) 買い物 (10) 転職 (1)

Archive

最近の投稿

最近のコメント

アーカイブ

カテゴリー

Recommend

家電販売経験者が家電を安く買う方法を教えます

家電販売経験者が家電を安く買う方法を教えます

WEBデザインやプログラミングが学べるオンラインスクール『CodeCamp（コードキャンプ）』がとっても便利

WEBデザインやプログラミングが学べるオンラインスクール『CodeCamp（コードキャンプ）』がとっても便利

Amazonプライムはマジで最高！会員特典やメリット、年会費・支払方法など

Amazonプライムはマジで最高！会員特典やメリット、年会費・支払方法など

Yahoo!JAPANカードを使ってみた感想、特徴と他社クレジットカードとの比較

Yahoo!JAPANカードを使ってみた感想、特徴と他社クレジットカードとの比較

Kindle（キンドル）とは？各モデルの違い・スペック比較、おすすめモデル！

Kindle（キンドル）とは？各モデルの違い・スペック比較、おすすめモデル！