田中さんが考えていること

大阪で働く孤独な社長が主にブログ運営について独り言をつぶやくブログ

おすすめ記事一覧

【はてなブログ】読者登録ボタンとフォローボタンのカスタマイズについて

f:id:gugurou:20190413082741p:plain
田中です。

ブログを開始する際に、最低限実施しておきたいカスタマイズがあります。

それは、読者ボタンのカスタマイズと、フォローボタンのカスタイマイズ。

どちらも、はてなブログのデフォルトのボタンを設置することは可能ですが、小さくて分かりにくかったり、デザイン的にも今イチなので、これだけは変更しておいた方が良いと思います。

読者ボタンのカスタマイズ

読者ボタンのカスタマイズも、いろんな種類があって、好みの問題もあると思います。

従って、ここに記載するのは、あくまで僕が設置しているボタンに関するものであり、個人的にはこれで十分だと思ってはいますが、もっとオサレにしたい!とか、趣味にあわない!という場合は、他のサイトを検索してください。

以下のコードを「ダッシュボード」→「デザイン」→「カスタマイズ」→「記事下」にコピペします。 

<div class="reader-button">
<a href="https://bl
og.hatena.ne.jp/gugurou/gugurou777.hatenablog.com/subscribe">読者になる</a>
</div>

【注意点】

「gugurou」部分は僕のはてなブログのIDですので、自分のIDに変更してください。

「gugurou777.hatenablog.com」部分は僕のはてなブログのドメインですので自分のドメインに変更してください。

続いて、以下のコードを「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」にコピペします。 

/* 読者登録ボタン */
.reader-button {
  margin: 16px 0;
}
.reader-button a{
  display: inline-block;
  width: 200px;
  height: 36px;
  border: 2px solid #111;
  text-decoration: none;
  background-color: #111;
  color: #fff;
  font-size: 100%;
  text-align: center;
  line-height: 36px;
  -webkit-transition: all 0.4s;
          transition: all 0.4s;
}
.reader-button a:hover {
  background-color: #fff;
  font-size: 110%;
  font-weight: bold;
  color: #111;
  -webkit-transition: all 0.4s;
          transition: all 0.4s;
}

これについては特に変更する部分はありません。

フォローボタンのカスタマイズ

読者ボタンと同じく、フォローボタンのカスタマイズも、いろんな種類があって、好みの問題もあると思います。

従って、ここに記載するのは、あくまで僕が設置しているボタンに関するものであり、個人的にはこれで十分だと思ってはいますが、もっとオサレにしたい!とか、趣味にあわない!という場合は、他のサイトを検索してください。

以下のコードを「ダッシュボード」→「デザイン」→「カスタマイズ」→「記事下」にコピペします。 
(記事上に表示したい場合は「記事上」にコピぺしてください)

<div class="snsbtns1">
<a href="https://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="sns-fb">Facebook</a>
<a href="https://twitter.com/share?url={URLEncodedPermalink}&text={Title}" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}', '', 'width=500,height=400'); return false;" class="sns-tw">Twitter</a>
<a href="https://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="sns-po">Pocket</a>
<a href="https://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button sns-hb" data-hatena-bookmark-layout="simple">Hatebu</a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</div>

続いて、以下のコードを「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」にコピペします。 

以上です。

まとめ

ブログのカスタマイズについては、どうしても見栄えをよくしたいという心理が働いて、時間をかけすぎてしまいます。

実際、以前の僕もそうでしたが、頑張ってカスタマイズしても大してアクセスは増えません(たぶん)

従って、最低限のものだけ実施して、あとは記事(コンテンツ)を書くことに時間をかけることをおすすめします。



今日も田中のブログを読んでくれてありがとうございます。

「【はてなブログ】読者登録ボタンとフォローボタンのカスタマイズについて」でした。

※今日のはてなブログ読者登録数164(+7)