はてなブログの「フォローボタン」をほぼコピペだけでカスタマイズ

　フォローボタンに必要性を余り感じてなかったのだけど、ブログを作成する上では設置した方が良いみたいなので実験的に設置してみた。

　はてなブログのサイドバーにモジュールを追加でプロフィールを設置すると、読書になるボタンとTwitterのフォローボタンを簡単に置くことができるけどデザインが好きじゃないのでカスタマイズしてみることにした。

　ちなみに設置したフォローボタンはこの下のやつ。

f:id:Yukinekoasp:20190918230455j:plain

　参考にしたサイトはこちら。

フォローボタンをカスタマイズする仕方

デザインのカスタマイズにある『サイドバー』→『モジュールを追加』でHTMLを選択

<div class="follow-btn">
<a class="hatena" href="https://blog.hatena.ne.jp/Yukinekoasp/yukinekoasp.hatenablog.com/subscribe" onclick="window.open('https://blog.hatena.ne.jp/Yukinekoasp/yukinekoasp.hatenablog.com/subscribe', '', 'width=500,height=400'); return false;">
 
はてな
</a>

<a class="twitter" href="https://twitter.com/intent/follow?screen_name=yukinekopvt" target="_blank">
 
Twitter</a>

<a class="feedly" href="http://feedly.com/i/subscription/feed/https://yukinekoasp.hatenablog.com/feed" target="_blank">
 
Feedly
</a>
</div>

デザインのカスタマイズにある『デザインCSS』

.follow-btn{
width: 100%;
text-align: center;
margin-bottom: 10px;
}
.follow-btn a {
display: inline-block;
height: 38px;
line-height: 20px;
width: 30%;
font-size: 16px;
text-align: center;
text-decoration: none;
}
.follow-btn .hatena {
color: #3D3F44;
border: 2px solid #3D3F44;
background: #ffffff;
}
.follow-btn .twitter {
color: #00ACEE;
border: 2px solid #00ACEE;
background: #ffffff;
}
.follow-btn .feedly {
color: #70CA3B;
border: 2px solid #70CA3B;
background: #ffffff;
}
.follow-btn .hatena:hover {
color: #ffffff;
background: #3D3F44;
transition: all .3s;
}
.follow-btn .twitter:hover {
color: #ffffff;
background: #00ACEE;
transition: all .3s;
}
.follow-btn .feedly:hover {
color: #ffffff;
background: #70CA3B;
transition: all .3s;
}
.text-small{
font-size: 8px;
}