ブログに可愛いフォローボタンを追加してみた

　はてなブログの標準のフォローボタンって可愛くない！ですよね。
そこで、ゆきひーさんのブログ記事

www.yukihy.com
を参考に追加してみた！

※記事の後半では"無料のはてな"でも...フォローボタンを追加してみました。

PCの表示の設定

デザイン→カスタマイズ→{}デザインCSS に追加

style
.follow-btn{
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}
.follow-btn a {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 32px;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
}
.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;
}

これは単純にコピペです。

デザイン→カスタマイズ→サイドバーに追加

HTML

<!--フォローボタン-->
<div class="follow-btn" >
<span style="font-size:80%; text-align:center">フォローする</span><br>
<a class="hatena" href="http://blog.hatena.ne.jp/retireSaki/retiresaki.hatenablog.com/subscribe" target="_blank"><i class="blogicon-hatenablog lg"></i><br><span class="text-small">はてな</span></a>
  <a class="twitter" href="https://twitter.com/intent/follow?screen_name=RetireSaki" target="_blank"><i class="blogicon-twitter lg"></i><br><span class="text-small">Twitter</span></a>
<a class="feedly" href="http://feedly.com/i/subscription/feed/https://retiresaki.hatenablog.com/feed" target="_blank"><i class="blogicon-rss lg"></i><br><span class="text-small">Feedly</span></a>
</div>
<!--フォローボタン-->

修正する箇所は3箇所です。

4行目：href="blog.hatena.ne.jp/retireSaki/retiresaki.hatenablog.com/subscribe"
「retireSaki/retireSaki.hatenadiary.com」を「(自身のはてなID)/(自身のブログのURLの「http://」を除いた部分)」に変更。
5行目 href="twitter.com/intent/follow?screen_name=RetireSaki"
「RetireSaki」を「自身のTwitterアカウントの@を抜いた部分」に変更。
6行目 href="feedly.com/i/subscription/feed/https://retiresaki.hatenablog.com/feed"
「retiresaki.hatenablog.com」を「自身のブログのURL」に変更。

さて、これでPC側の表示の設定は終わりました。

　できればスマフォの表示でもフォローボタンを付けたいところです。
無料版のはてなブログでは、基本全体表示の切り替えぐらいしかできません！
そこで1つ★ヒラメキ★ました(^o^)v
PC表示の記事下などの追加設定って、スマフォ表示でも有効になるんですよっw
ならば！記事下に表示しちゃえばいいじゃん♪

スマフォの表示の設定（& PCの記事下も）

しかし問題が...スマフォ表示におけるCSSを設定することはできません。
ならば強引にCSSで行っていることを全てインライン化！！

デザイン→カスタマイズ→記事→記事下に追加

HTML

<!--フォローボタン-->
<center>
<div class="follow-btn" >
<span style="font-size:80%;text-align:center;" >フォローする</span><br>
<a class="hatena" href="http://blog.hatena.ne.jp/retireSaki/retiresaki.hatenablog.com/subscribe" target="_blank"
style="display:inline-block;width:60px;height:60px;line-height:32px;font-size:14px;text-align:center;text-decoration:none;border-radius:50%;color:#3D3F44;border-width:2px;border-style:solid;border-color:#3D3F44;background-color:#ffffff;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;" 
onmouseover="this.style.color='#ffffff'; this.style.background='#3D3F44';"
onmouseout="this.style.color='#3D3F44'; this.style.background='#ffffff'; "
>
<i class="blogicon-hatenablog lg"></i><br><span class="text-small" style="font-size:8px;" >はてな</span></a>
  <a class="twitter" href="https://twitter.com/intent/follow?screen_name=RetireSaki" target="_blank" style="display:inline-block;width:60px;height:60px;line-height:32px;font-size:14px;text-align:center;text-decoration:none;border-radius:50%;color:#00ACEE;border-width:2px;border-style:solid;border-color:#00ACEE;background-color:#ffffff;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;" 
onmouseover="this.style.color='#ffffff'; this.style.background='#00ACEE';"
onmouseout="this.style.color='#00ACEE'; this.style.background='#ffffff'; "
><i class="blogicon-twitter lg"></i><br><span class="text-small" style="font-size:8px;" >Twitter</span></a>
<a class="feedly" href="http://feedly.com/i/subscription/feed/https://retiresaki.hatenablog.com/feed" target="_blank" style="display:inline-block;width:60px;height:60px;line-height:32px;font-size:14px;text-align:center;text-decoration:none;border-radius:50%;color:#70CA3B;border-width:2px;border-style:solid;border-color:#70CA3B;background-color:#ffffff;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;" 
onmouseover="this.style.color='#ffffff'; this.style.background='#70CA3B';"
onmouseout="this.style.color='#70CA3B'; this.style.background='#ffffff'; "
><i class="blogicon-rss lg"></i><br><span class="text-small" style="font-size:8px;" >Feedly</span></a>
</div>
</center>
<!--フォローボタン-->