はてなブログのカスタマイズ方法④~コピーして貼るだけ!サイドバーのFollow me ボタン~
オシャレなFollow me ボタンでフォロワーを増やそう!
はじめに
みなさんブログを作ったら、そのブログに来てもらうのためにTwitterやFacebookと連携を考えるかと思います。
今回はとびきりオシャレなFollow meボタンをご紹介します。
Follow me ボタンって何?
↑の事です。
アイコンを押すと自動的に自分のフォロー追加画面やFacebook追加画面が表示されます。
ちなみに上のアイコンはテーマ「DUDE」専用となっています。
Twitterアイコンがプカプカと浮かんでいるのが特長のアイコンです。
このテーマを選んだ場合のコードはこちら
<div class="sidesocial" >
<h4><i class="blogicon-subscribe"></i>FOLLOW ME</h4><!--はてな読者登録-->
<span class="hatenafollow socialbtn" >
<a href="http://blog.hatena.ne.jp/はてなID/ブログのドメイン/subscribe" target="_blank">
<i class="blogicon-hatenablog lg"></i></a></span> <!--はてな読者登録ここまで--><!--ツイッタフォロー-->
<span class="twitterfollow socialbtn" >
<a href="https://twitter.com/intent/follow?screen_name=twitterの@を除いたアカウント名" target="_blank"><i class="blogicon-twitter lg"></i>
</a></span> <!--ツイッタフォローここまで--><!--feedlyフォロー-->
<span class="feedly socialbtn" >
<a href="http://feedly.com/i/subscription/feed/ブログのURL/feed" target="_blank">
<i class="blogicon-rss lg"></i></a></span> <!--feedlyフォローここまで--><!--facebookページ-->
<span class="fbfollow socialbtn" >
<a href="FacebookのURL" target="_blank"><i class=" blogicon-facebook lg"></i>
</a></span> <!--facebookページここまで--></div><div style="clear: both;"></div>
これをダッシュボード>デザイン>スパナ>サイドバー>+モジュールを追加>HTMLに貼り適用を押します。
なお、はてなIDは、プロフィールの横にあるIDの事です。
(私の場合はmarketzero)
ブログのドメインは、自分のブログのURLの『http://』を除いたものです。
私のブログはhttp://blogsmart.hatenablog.com/なので、blogsmart.hatenablog.comがドメインになります。
もし、ツイッターアイコンがプカプカと浮かんでいるのが目障りであれば、次のコードを『デザインCSS』に追加します。
.twitterfollow { animation: none; }
プカプカと浮かぶ高さを変えたい場合は、以下のコードを『デザインCSS』に追加して-40pxの数値を変えます。
@keyframes bounce {
50% {
transform: translateY(-40px);
} }
色んなバリエーションのFollow me
色んなテーマで利用出来るFollow me ボタンを紹介します。
まずは以下のコードをHTMLに貼り付けます。
<!--フォローボタン-->
<div class="follow-btn" >
<span style="font-size:80%; text-align:center">フォローする</span><br>
<a class="hatena" href="http://blog.hatena.ne.jp/はてなID/ブログのドメイン/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=twitterの@を除いたアカウント名" 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/ブログのURL/feed" target="_blank"><i class="blogicon-rss lg"></i><br><span class="text-small">Feedly</span></a>
</div>
次に以下のコードをデザインCSSに貼ります。
.follow-btn{
width: 100%;
text-align: center;
margin-bottom: 10px;
}
.follow-btn a {
display: inline-block;
position: relative;
width: 25%;
height: 45px;
line-height: 22px;
font-size: 14px;
text-align: center;
text-decoration: none;
border-radius: 5px;
color: #ffffff;
}
.follow-btn .hatena {
border: 2px solid #3D3F44;
background: #ffffff;
color: #3D3F44;
box-shadow: 0 3px 0 #3D3F44;
}
.follow-btn .twitter {
border: 2px solid #00ACEE;
background: #ffffff;
color: #00ACEE;
box-shadow: 0 3px 0 #00ACEE;
}
.follow-btn .feedly {
border: 2px solid #70CA3B;
background: #ffffff;
color: #70CA3B;
box-shadow: 0 3px 0 #70CA3B;
}
.follow-btn .hatena:hover {
top: 3px;
box-shadow: none;
}
.follow-btn .twitter:hover {
top: 3px;
box-shadow: none;
}
.follow-btn .feedly:hover {
top: 3px;
box-shadow: none;
}
.text-small{
font-size: 10px;
}
こんなのもあります。
コードは以下になります。
.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;
}
是非試してみて下さい。