monoのメモ帳

HTMLとCSSを勉強しながらはてなブログをカスタマイズ中です。

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

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

出来上がりのイメージ

やりたいこと

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

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

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

オリジナルのSNSボタンを作ると、関連記事の下にSNSボタンが表示されてしまうので、関連記事と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;
}

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

最近使い方が慣れてきた「flexbox」。 flexboxを使うと簡単に要素の順番を入れ替えることができるので本当に便利です。しかも簡単な記述で入れ替えられて、最初はflexbox意味が分からないと思っていたのですが、最近はありがたさが少しずつわかってきました。

雑感 これで少しは軽くなったかしら

掲載しているコードについて

当ブログでは、カスタマイズを行なっていく上で、HTMLやCSSなどのコードを掲載しています。 自由にコピペしてご利用いただいても構わないのですが、利用しているテーマなどによってはうまくいかない場合もございます。 また、コードを利用して不具合が生じた場合でも一切の責任は負いかねますので、その点はご理解、ご了承いただきますようよろしくお願いいたします。