記事下のSNSシェアボタンを作ってみた｜はてなブログカスタマイズ

はてなブログでは、記事下にSNSボタンが管理画面から簡単に設定できますが、オリジナルのものに変えてみました。

やりたいこと

はてなのwebアイコンを使って軽くしたい
カウント数の読み込みは不要
関連記事とSNSボタンの位置を変更

デフォルトで用意されているものは、簡単に設置できるのがいいのですが、数を読み込むときにちょっと時間がかかってしまいます。

できるだけサイトを軽くしたいので、カウント数はカウントしないシンプルなボタンにすることにしました。

オリジナルのSNSボタンを作ると、関連記事の下にSNSボタンが表示されてしまうので、関連記事とSNSボタンの位置を逆にするようにも変更したいと思います。

記事下のSNSボタン　サンプルHTML
記事下のSNSボタン　サンプルCSS
記事下関連記事とSNSボタンを入れ替え

記事下のSNSボタン　サンプルHTML

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

「管理画面」→「デザイン」→「カスタマイズ」 →「ヘッダ」→「ブログタイトル下」に貼り付けます。

今回作るボタンは、はてなブックマーク、facebook、Twitterの3つにしました。はてなのwebフォントを利用すると Font Awesome を利用するよりも軽く、表示される速度が速いのですが、pocketやlineのフォントはありません。

関連記事：よく使うはてなブログのWebアイコンフォント - monoのメモ帳

Font Awesome を使うか、pocketとlineのアイコンを作らないのか迷ったのですが、pocketを利用されている方は日本では少なそうですし、まぁ、いいかなと。

なので、今回は3つだけのボタンにしました。

記事下のSNSボタン　サンプルCSS

/* 記事下SNSボタン */
.mono-sns-btns ul {
    padding-left: 0;
    display: flex;
    gap: 10px;
    list-style: none;
}
.mono-sns-btns a {
    padding: 5px 30px;
    font-size: 20px;
    color:#fff;
}
.mono-sns-btns a:hover {
    opacity: .7;
}
a.hatena-bookmark-button.sns-btn.btn-hatena {
    background-color: #00A4DE;
}
a.sns-btn.btn-facebook {
    background-color: #1877f2;
}
a.sns-btn.btn-twitter {
    background-color: #1DA1F2;
}

「管理画面」→「デザイン」→「カスタマイズ」 →「デザインCSS」に貼り付けます。

デザインはいろいろと変えられるのでしょうが、わかりやすさを重視してデフォルトのボタンと同じぐらいのサイズ感でシンプルなものにしました。

各SNS会社のロゴのガイドラインを見てみると、色の指定が細かくなされているので、ガイドライン通りの色を指定しています。

SNSボタンの色

はてなブックマーク：#00A4DE
facebook：#1877f2
Twitter：#1DA1F2

記事下関連記事とSNSボタンを入れ替え

/* 記事下関連記事とSNSボタンを入れ替え */
.customized-footer{
  display: flex;
  flex-direction: column;
}
.entry-footer-html{
  order: 1;
}
div#entry-footer-secondary-modules {
  order: 2;
  margin-top: 20px;
}