Maximal Life

渋谷で働く営業本部長のブログ

はてなブログ:読者になるボタンのカスタマイズ方法

f:id:ss17935:20190222214220j:plain

 

標準の”読者になる”ボタンって小さくて目立たないですよね。

面白いブログを見つけて、読者になろうとしても、なかなか見つからない事がたまにあります。

これはブログ運営者としては何とかしなければならない事象です。

という事で、”読者になる”ボタンのカスタマイズをしてみたいと思います。

 

読者になるボタンを設置する方法

読者になるボタンは実はどこへでも簡単に設置する事ができます。

ダッシュボードから「設定」→「詳細設定」で一番下までスクロールします。

すると「読者になるボタン」に HTML コードがあります。↓

 

f:id:ss17935:20190223093700p:plain

 

これをブログ内の好きな場所に貼り付けるだけで「読者になるボタン」の設置ができます。

 

読者になるボタンを目立たせる方法

上記で設置した「読者になるボタン」は小さくて目立ちません。↓

 

f:id:ss17935:20190223094209p:plain

 

 

この「読者になるボタン」を目立たせるには以下の「読者になる」ページにリンクをはります。

 

https://blog.hatena.ne.jp/ss17935/ss17935.hatenablog.com/subscribe

 

赤字の部分はご自身の ID、ブログ URL になります。

 

まずは以下のコードをボタンを表示したい場所にコピペします。

 

<div class="subscribe-button">
<a href="https://blog.hatena.ne.jp/あなたのID/ブログのURL/subscribe">読者になる</a>
</div>

 

次に以下のコードを「デザインCSS」にコピペします。

 

/* 読者になるボタンを大きくする */

.subscribe-button {
margin: 1em 0;
}
.subscribe-button a {
display: inline-block;
margin: 0 auto;
width: 100%;
max-width: 131px;
line-height: 56px;
text-decoration: none;
text-align: center;
color: #fff;
background-color: #eb4c5e; /* ここでボタンの色 */
box-shadow: 0 4px #da253a; /* ここでボタンの影の部分の色 */
border-radius: 4px;
transition: all .3s;
}
.subscribe-button a:hover {
transform: translateY(4px);
box-shadow: 0 0 #999;
}

 

大きさ、色などは赤字の部分を好みに変更できます。

 

こんな感じになりました。↓

 

f:id:ss17935:20190223102756p:plain

 

Twitter のフォローボタンだけ大きさが合っていないのが気になります。

そちらについては、おいおい修正していきたいと思います。

 

↓ ランキングに参加しています。よろしければポチッとして下さい。

にほんブログ村 ブログブログ ブログノウハウへ