はてなブログ・SNSシェアボタンをカスタマイズ

2019年11月17日はてなブログのカスタマイズ

画像のボタンはイメージです

はじめに

※当ブログは現在、はてなブログからWordPressに移行しています。

カスタマイズ前の確認事項などは下記の記事を参照してください。

SNSシェアボタンのカスタマイズ

はてなブログの「SNSシェアボタン」(twitterやfacebookなど)のカスタマイズです。

これらのボタンを非表示にして

こういうボタンにします。

(PC)

(スマホ)

はてなブログの「SNSシェアボタン」を非表示にするには「ダッシュボード」→「デザイン」→「カスタマイズ(アイコン)」にある「記事」で設定します。

「ソーシャルパーツ」のチェックボックスをオフにするだけです。 

ボタンのカスタマイズは下記サイトを参考にさせていただきました。

「記事上」「記事下」「フッタ」「デザインCSS」の中で自分のブログでは「フッタ」部分は貼り付けていません。

「フッタ」部分はレスポンシブデザインなら必要ないと思います。

デザインCSS

まず、「デザインCSS」のコードを「ダッシュボード」→「デザイン」→「カスタマイズ(アイコン)」にある「デザインCSS」に貼り付けてください。

「デザインCSS」

.sns-header, .sns-footer {
padding: 0 24px;
}
.sns-area {
margin: 30px auto 10px;
padding: 0;
overflow: hidden;
table-layout: fixed;
display: table;
width: 100%;
}
.sns-area li {
list-style-type: none;
display: table-cell;
vertical-align: middle;
}
.sns-area li:last-child {
margin-right: 0
}
.sns-link {
position: relative;
display: block;
color: #fff;
text-align: center;
text-decoration: none;
outline: none;
overflow: hidden;
height: 42px;
line-height: 42px;
}
.sns-link::after {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: block;
content: ";
width: 0;
height: 0;
background-color: rgba(255,255,255,.3);
border-radius: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
}
.sns-link:hover {
text-decoration: none;
}
.sns-link:hover::after {
-webkit-animation: circle .75s;
animation: circle .75s;
}
@-webkit-keyframes circle {
50% {
opacity: 1;
}
100% {
width: 300px;
height: 300px;
}
}
@keyframes circle {
50% {
opacity: 1;
}
100% {
width: 300px;
height: 300px;
}
}
.sns-twitter {
background: #55acee;
}
.sns-facebook {
background: #3a5795;
}
.sns-bookmark {
background: #00A5DE;
}
.sns-pocket {
background: #ED4055;
}
.blogicon-twitter,
.blogicon-facebook,
.blogicon-bookmark,
.blogicon-chevron-down {
margin-right: 5px;
}
@media only screen and (max-width: 767px) {
.sns-txt {
display: none;
}
.blogicon-twitter,
.blogicon-facebook,
.blogicon-bookmark,
.blogicon-chevron-down {
margin-right: 0;
}
}

記事上・記事下

次に、「ダッシュボード」→「デザイン」→「カスタマイズ(アイコン)」にある「記事(→記事上、記事下)」に表示したい箇所のコードを貼り付けてください。

「記事上」

<div class="sns-header">
<ul class="sns-area">
<li>
<a
class="sns-twitter sns-link"
href="https://twitter.com/intent/tweet?url={URLEncodedPermalink}&text={Title}" target="_blank">
<i class="blogicon-twitter lg" ></i><span class="sns-txt">Twitter</span></a>
</li>
<li>
<a
class="sns-facebook sns-link"
href="https://www.facebook.com/sharer/sharer.php?u={URLEncodedPermalink}"
onclick="window.open(this.href, 'FBwindow’, 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes’); return false;"
target="_blank">
<i class="blogicon-facebook lg" ></i><span class="sns-txt">Facebook</span></a>
</li>
<li>
<a
href="http://b.hatena.ne.jp/entry/{Permalink}"
class="hatena-bookmark-button sns-bookmark sns-link"
data-hatena-bookmark-title="{Title}"
data-hatena-bookmark-layout="simple"
title="このエントリーをはてなブックマークに追加">
<i class="blogicon-bookmark lg"></i><span class="sns-txt">Hatena</span></a>
</li>
<li>
<a
class="sns-pocket sns-link"
href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}"
onclick="window.open(this.href, 'pocket_window’, 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes’); return false;"
>
<i class="blogicon-chevron-down"></i><span class="sns-txt">Pocket</span></a>
</li>
</ul>
</div>

「記事下」

<div class="sns-footer">
<ul class="sns-area “>
<li>
<a
class="sns-twitter sns-link"
href="https://twitter.com/intent/tweet?url={URLEncodedPermalink}&text={Title}" target="_blank">
<i class="blogicon-twitter lg" ></i><span class="sns-txt">Twitter</span></a>
</li>
<li>
<a
class="sns-facebook sns-link"
href="https://www.facebook.com/sharer/sharer.php?u={URLEncodedPermalink}"
onclick="window.open(this.href, 'FBwindow’, 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes’); return false;"
target="_blank">
<i class="blogicon-facebook lg" ></i><span class="sns-txt">Facebook</span></a>
</li>
<li>
<a
href="http://b.hatena.ne.jp/entry/{Permalink}"
class="hatena-bookmark-button sns-bookmark sns-link"
data-hatena-bookmark-title="{Title}"
data-hatena-bookmark-layout="simple"
title="このエントリーをはてなブックマークに追加">
<i class="blogicon-bookmark lg"></i><span class="sns-txt">Hatena</span></a>
</li>
<li>
<a
class="sns-pocket sns-link"
href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}"
onclick="window.open(this.href, 'pocket_window’, 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes’); return false;"
>
<i class="blogicon-chevron-down"></i><span class="sns-txt">Pocket</span></a>
</li>
</ul>
</div>

twitterのユーザー名

参考サイトでは「記事上」「記事下」に、※twitterの「via=webgaku」部分をご自身のユーザー名に変更してください。とありますがこの記事の「記事上」「記事下」のコードは「&via=webgaku」の部分を削除しています。

twitterのユーザ名を入れたい方は参考サイトをご覧ください。

必要のないSNSシェアボタンを非表示

必要のない「SNSシェアボタン」は<!– –>でコードを囲ってコメントアウトすれば非表示にできます。

必要のない箇所を削除してもいいのですが、後で表示したくなったときにすぐに戻せるようにコメントアウトしておくことをオススメします。

そうすれば、また表示したくなったボタンはコメントアウト<!– –>だけ削除すればいいので。

例えば「facebook」のボタンが必要ない場合は「記事下」では

<div class="sns-footer">
<ul class="sns-area “>
<li>
<a
class="sns-twitter sns-link"
href="https://twitter.com/intent/tweet?url={URLEncodedPermalink}&text={Title}" target="_blank">
<i class="blogicon-twitter lg" ></i><span class="sns-txt">Twitter</span></a>
</li>
<–<li>
    <a
      class="sns-facebook sns-link"
      href="https://www.facebook.com/sharer/sharer.php?u={URLEncodedPermalink}"
      onclick="window.open(this.href, 'FBwindow’, 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes’); return false;"
      target="_blank">
      <i class="blogicon-facebook lg" ></i><span class="sns-txt">Facebook</span></a>
  </li>–>
<li>
<a
href="http://b.hatena.ne.jp/entry/{Permalink}"
class="hatena-bookmark-button sns-bookmark sns-link"
data-hatena-bookmark-title="{Title}"
data-hatena-bookmark-layout="simple"
title="このエントリーをはてなブックマークに追加">
<i class="blogicon-bookmark lg"></i><span class="sns-txt">Hatena</span></a>
</li>
<li>
<a
class="sns-pocket sns-link"
href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}"
onclick="window.open(this.href, 'pocket_window’, 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes’); return false;"
>
<i class="blogicon-chevron-down"></i><span class="sns-txt">Pocket</span></a>
</li>
</ul>
</div>

こうすれば 「facebook」のボタンだけ非表示になります。(緑色の部分)

必要のない部分を<!– –>で囲います。

「記事上」でも設定は同じです。

カスタマイズの注意点

全文形式のトップページにSNSシェアボタンが表示されない?

「記事下」に設定を行い表示できるか確認したところ「全文形式」のトップページだけ「SNSシェアボタン」が表示されませんでした。

はてなブログがそういシステムなのか、何が原因なのか分かりません。

Googleアドセンスの広告もトップページだけ表示されませんでした。

この設定を行ったときは、はてなブログの無料ユーザーで「ダッシュボード」→「設定」→「詳細設定」の中にある「トップページの表示形式」は「全文形式」しか選べませんでした。

無料ユーザーでトップページを「一覧形式」にしたい方は下記の記事を参照してください。

無料ユーザーでもトップページを「一覧形式」にできます。

各SNSサービスのURLアドレス

各SNSサービスのURLアドレスが変わるとコードのURLを書き換えないと動作しなくなりますが、URLアドレスが変わっても詳しいブロガーさんがすぐに対応してくださると思います。

URLアドレスは頻繁に変わるものでもないので(この記事の参考サイトの日付は2015年でした)あまり気にしなくてもいいと思います。