標準の”読者になる”ボタンって小さくて目立たないですよね。
面白いブログを見つけて、読者になろうとしても、なかなか見つからない事がたまにあります。
これはブログ運営者としては何とかしなければならない事象です。
という事で、”読者になる”ボタンのカスタマイズをしてみたいと思います。
読者になるボタンを設置する方法
読者になるボタンは実はどこへでも簡単に設置する事ができます。
ダッシュボードから「設定」→「詳細設定」で一番下までスクロールします。
すると「読者になるボタン」に HTML コードがあります。↓
これをブログ内の好きな場所に貼り付けるだけで「読者になるボタン」の設置ができます。
読者になるボタンを目立たせる方法
上記で設置した「読者になるボタン」は小さくて目立ちません。↓
この「読者になるボタン」を目立たせるには以下の「読者になる」ページにリンクをはります。
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;
}
大きさ、色などは赤字の部分を好みに変更できます。
こんな感じになりました。↓
Twitter のフォローボタンだけ大きさが合っていないのが気になります。
そちらについては、おいおい修正していきたいと思います。
↓ ランキングに参加しています。よろしければポチッとして下さい。
