かるみに

趣味とともに生きる

コピペで楽々。はてなブログ向けのSNSフォローボタンを実装するカスタマイズ6つ

こんにちは。すーく(@sytry7)です

SNSフォローボタンをデザインしました。シンプルなものは様々な方がコードを公開していますので、アニメーションを利用して、デザインに動きをつけてみました

設定の説明が前半は続くので、デザインだけをササッと見たい方は目次から移動をお願いします。

 各種ボタンの変更箇所

今回紹介しているフォローボタンのコードには、次のように<!--URLを変更してください-->と書いている部分があります。

各種URLのアドレスは独自のものに変更してください。各種ボタンについての変更方法を以下に記します。

注意!
コードをコピペするだけでは、ボタンをクリックしてもリンク先がありません。必ず変更をお願いします。

<!--URLは変更してください-->
<!--はてなボタン-->
      <a class="hatena" href="[読者になるボタンURL]"><i class="blogicon-hatenablog"></i></a>    
<!--Twitterボタン-->
      <a class="twitter" href="https://twitter.com/intent/follow?screen_name=[Twitterのアカウント名]" target="_blank"><i class="blogicon-twitter"></i></a>
<!--Feedlyボタン-->
      <a class="feedly" href="http://feedly.com/i/subscription/feed/[自分のサイトURL]/feed" target="_blank"><i class="blogicon-rss"></i></a>
    </div>
</div>
<!--URLは変更してください-->

はてなボタンの変更部分

<!--はてなボタン-->
      <a class="hatena" href="[読者になるボタンURL]"><i class="blogicon-hatenablog"></i></a> 

[読者になるボタンURL]には、はてなブログの設定画面からURLを準備します。

設定>詳細設定を選択すると「読者になるボタン」があります。自分のページから、以下の部分をコピーして、[読者になるボタンURL]の部分を置き換えてください。

f:id:trrun:20170221002027p:plain

僕のサイトの場合は、以下の青の部分です。

<iframe src="https://blog.hatena.ne.jp/trrun/colmini.hatenadiary.jp/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe>

 Twitter

<!--Twitterボタン-->
      <a class="twitter" href="https://twitter.com/intent/follow?screen_name=[Twitterのアカウント名]" target="_blank"><i class="blogicon-twitter"></i></a>

[Twitterのアカウント名]には、自分のアカウント名を入力してください。僕の場合は「sytry7」です。(@(アットマーク)は不要です。)

Feedly 

<!--Feedlyボタン-->
      <a class="feedly" href="http://feedly.com/i/subscription/feed/[自分のサイトURL]/feed" target="_blank"><i class="blogicon-rss"></i></a>

[自分のサイトURL]には自分のサイトのTOPページのアドレスを入力してください。僕の場合であれば、「http://www.colmin.xyz/」です。

コードを貼り付ける場所

コードを貼り付ける場所はこちらです。

1.サイドバーのモジュールに追加をクリック

f:id:trrun:20170220234726p:plain

2.HTMLの欄にコピペ!

f:id:trrun:20170220234832p:plain

フォローボタンとCSS一覧

 前置きが長くてすみません。デザインとコードを一気に紹介します。一部のデザイン画像はGIFでアニメーションにしています。

1.マウスオーバーすると拡大する

f:id:trrun:20170220090000g:plain

 

<div class="follow-btn" style="text-align:center">
<p style="font-size:80%">フォローする</p>
    <div class="buttons">
<!--URLは変更してください--> <!--はてなボタン--> <a class="hatena" href="[読者になるボタンURL]"><i class="blogicon-hatenablog lg"></i></a> <!--Twitterボタン--> <a class="twitter" href="https://twitter.com/intent/follow?screen_name=[Twitterアカウント名]" target="_blank"><i class="blogicon-twitter lg"></i></a> <!--Feedlyボタン--> <a class="feedly" href="http://feedly.com/i/subscription/feed/[自分のサイトURL]/feed" target="_blank"><i class="blogicon-rss lg"></i></a> <!--URLは変更してください--> </div> </div> <style> /**共通デザイン**/ .buttons a{ display:inline-block; width:90px; padding:10px 0 8px 0; transition: all 0.4s; text-align:center; text-decoration:none; } .buttons a:hover{ transform: scale(1.1) } .buttons i{ color:white; } /**はてな読者登録の色**/ .hatena{ background-color:white; border:1px solid black; } .hatena i{ color:black } /**twitterの色**/ .twitter{ background-color:#55acee; } /**feedlyの色**/ .feedly{ background-color:#6cc655; } </style>

2.マウスオーバーすると拡大する(文字付き)

f:id:trrun:20170220090115g:plain

<div class="follow-btn" style="text-align:center">
<p style="font-size:80%">フォローする</p>
    <div class="buttons">
<!--URLは変更してください--> <!--はてなボタン--> <a class="hatena" href="[読者になるボタンURL]"><i class="blogicon-hatenablog"> 読者登録</i></a> <!--Twitterボタン--> <a class="twitter" href="https://twitter.com/intent/follow?screen_name=[Twitterアカウント名]" target="_blank"><i class="blogicon-twitter"> フォロー</i></a> <!--Feedlyボタン--> <a class="feedly" href="http://feedly.com/i/subscription/feed/[自分のサイトURL]/feed" target="_blank"><i class="blogicon-rss"> フォロー</i></a> <!--URLは変更してください--> </div> </div> <style> /**共通デザイン**/ .buttons a{ display:inline-block; width:90px; padding:10px 0 8px 0; transition: all 0.4s; text-align:center; text-decoration:none; } .buttons a:hover{ transform: scale(1.1) } .buttons i{ color:white; } /**はてな読者登録の色**/ .hatena{ background-color:white; border:1px solid black; } .hatena i{ color:black } /**twitterの色**/ .twitter{ background-color:#55acee; } /**feedlyの色**/ .feedly{ background-color:#6cc655; } </style>

 3.マウスオーバーでマスクが表示される

 f:id:trrun:20170220084545g:plain

 

<!--URLは変更してください-->
<
div class="follow-btn" > <p style="text-align:center">フォローボタン</p> <div class="buttons"> <!--読者になるボタン--> <div class="button hatena"> <a href="[読者になるボタンURL]"><i class="blogicon-hatenablog lg"> 読者登録</i><!--ボタン上の文字--> <div class="mask"><p>フォローする</p></div></a><!--マスク上の文字--> </div>   <!--button--> <!--twitterボタン--> <div class="button twitter"> <a class="twitter" href="https://twitter.com/intent/follow?screen_name=[Twitterアカウント名]" target="_blank"><i class="blogicon-twitter lg"> Twitterを見る</i><!--ボタン上の文字--> <div class="mask"><p>フォローする</p></div></a><!--マスク上の文字--> </div>   <!--button-->
<!--rssボタン--> <div class="button rss"> <a class="feedly" href="http://feedly.com/i/subscription/feed/[自分のサイトURL]/feed" target="_blank"><i class="blogicon-rss lg"> RSSに登録する</i><!--ボタン上の文字--> <div class="mask"><p>フォローする</p></div></a><!--マスク上の文字--> </div>   <!--button--> </div> </div>

<style> .button{ width:100%; padding:8px 0 10px 10px; position:relative; } .button a{ display:block; width:100%; height:100%; text-decoration:none; } /*マスク*/ .mask{ position:absolute; top:0; left:0; height:100%; width:100%; background-color:black; border:1px solid black; opacity:0; transition:all 0.3s } .mask p{ margin:8px 0 10px 10px; color:white; } .mask:hover{ opacity:1; } /**はてなのボタン**/ .hatena{ border:1px solid black; width:100%; } .hatena a{ color:black; } /**twitterのボタン**/ .twitter{ background-color:#55acee; width:100%; } .twitter a{ color:white; } /**RSSのボタン**/ .rss{ background-color:#6cc655; width:100%; } .rss a{ color:white; } </style>

ボタン上の文やマスク上の文字は変更できます。ただ、長すぎるとデザインが崩れる可能性もあります。

4.マウスオーバーすると回転する

f:id:trrun:20170220090151g:plain

 

<center>
<div class="follow-btn" >
<p style="font-size:80%">フォローする</p>
    <div class="buttons">
<!--URLは変更してください--> <!--はてなボタン--> <a class="hatena" href="https://blog.hatena.ne.jp/trrun/colmini.hatenadiary.jp/subscribe"><i class="blogicon-hatenablog"></i></a> <!--Twitterボタン--> <a class="twitter" href="https://twitter.com/intent/follow?screen_name=sytry7" target="_blank"><i class="blogicon-twitter"></i></a> <!--Feedlyボタン--> <a class="feedly" href="http://feedly.com/i/subscription/feed/[自分のサイトURL]/feed" target="_blank"><i class="blogicon-rss"></i></a> </div> </div> <!--URLは変更してください--> <style> /**共通デザイン**/ .buttons a{ display:inline-block; width:70px; height:62px; padding:4px 0; transition: all 0.4s; text-align:center; text-decoration:none; } .buttons i{ transition: transform 0.6s; color:white; font-size:35px; } .buttons i:hover{ transform: rotate(360deg) } /**はてな読者登録の色**/ .hatena{ background-color:white; border:1px solid black; } .hatena i{ color:black } /**twitterの色**/ .twitter{ background-color:#55acee; } /**feedlyの色**/ .feedly{ background-color:#6cc655; } /style>

5.Feedly風のボタン(アニメーションなし)

f:id:trrun:20170220085643p:plain

<!--URLは変更してください-->
<div class="follow-btn" >
  <div class="buttons">   
 <!--読者登録-->
    <div class="button hatena">
    <a href="[読者になるボタンURL]">
        <span class="blogicon-hatenablog icon"></span>
        <div class="btn-content">
          <span class="icon-title">Follow</span>
          <span class="icon-content">on Hatena</span>
        </div>
    </a>
    </div>
   <!--読者登録-->  
<br>
<!--Twitter-->
    <div class="button twitter">
    <a href="https://twitter.com/intent/follow?screen_name=[Twitterアカウント名]" target="_blank">
        <span class="blogicon-twitter icon"></span>
        <div class="btn-content">
          <span class="icon-title">Follow</span>
          <span class="icon-content">on Twitter</span>
        </div>
    </a>
    </div>
   <!--Twitter-->  
<br> 
   <!--RSS-->
    <div class="button rss">
    <a href="http://feedly.com/i/subscription/feed/[自分のサイトURL]/feed" target="_blank">
        <span class="blogicon-rss icon"></span>
        <div class="btn-content">
          <span class="icon-title">Follow</span>
          <span class="icon-content">on Feedly</span>
        </div>
    </a>
    </div>
   <!--RSS-->
  </div>
</div>
<!--URLは変更してください-->

<style> .button{ display:inline-block; height:100%; text-decoration:none; padding:0 7px; border-radius:4px; margin-bottom:10px; margin-right:3px; } .icon{ display:inline-block; font-size:48px; margin:-5px 0; } .btn-content{ display:inline-block; text-align:right; margin-left:5px; } .icon-title{ display:block; font-size:22px; font-weight:bold; } .icon-content{ display:block; } /**はてなのボタン**/ .hatena{ border:1px solid black; } .hatena a{ color:black; width:100%; height:100%; } /**twitterのボタン**/ .twitter{ border:1px solid #55acee; background-color:#55acee; } .twitter a{ color:white; width:100%; height:100%; } /**RSSのボタン**/ .rss { border:1px solid #6cc655; background-color:#6cc655; } .rss a{ color:white; width:100%; height:100%; } /**RSSのボタン**/ .prof { border:1px solid #e34c26; background-color:#e34c26; width:133.792px; } .prof a{ color:white; width:100%; height:100%; } </style>

本文中にある<br>を削除することで横並びに表示することができます。

 6.Feedly風デザイン+α(アニメーションなし)

f:id:trrun:20170221001346p:plain

<div class="follow-btn" >

  <div class="buttons">

    

 <!--読者登録-->
    <div class="button hatena">
    <a href="https://blog.hatena.ne.jp/trrun/colmini.hatenadiary.jp/subscribe">
        <span class="blogicon-hatenablog icon"></span>
        <div class="btn-content">
          <span class="icon-title">Follow</span>
          <span class="icon-content">on Hatena</span>
        </div>
    </a>
    </div>
<!--読者登録--> <!--Twitter--> <div class="button twitter"> <a href="https://twitter.com/intent/follow?screen_name=sytry7" target="_blank"> <span class="blogicon-twitter icon"></span> <div class="btn-content"> <span class="icon-title">Follow</span> <span class="icon-content">on Twitter</span> </div> </a> </div> <!--Twitter--> <!--RSS--> <div class="button rss"> <a href="http://feedly.com/i/subscription/feed/http://www.colmin.xyz/feed" target="_blank"> <span class="blogicon-rss icon"></span> <div class="btn-content"> <span class="icon-title">Follow</span> <span class="icon-content">on Feedly</span> </div> </a> </div> <!--RSS--> <!--Facebook--> <div class="button facebook"> <a href="[facebookのURL]"> <span class="blogicon-facebook icon"></span> <div class="btn-content"> <span class="icon-title">Follow</span> <span class="icon-content">on Facebook</span> </div> </a> </div> <!--Prof--> </div> </div> <style>
.button{ display:inline-block; height:100%; text-decoration:none; padding:0 7px; border-radius:4px; margin-bottom:10px; margin-right:3px;
} .icon{ display:inline-block; font-size:48px; margin:-5px 0; } .btn-content{ display:inline-block; text-align:right; margin-left:5px; } .icon-title{ display:block; font-size:22px; font-weight:bold; } .icon-content{ display:block; } /**はてなのボタン**/ .hatena{ border:1px solid black; } .hatena a{ color:black; width:100%; height:100%; } /**twitterのボタン**/ .twitter{ border:1px solid #55acee; background-color:#55acee; } .twitter a{ color:white; width:100%; height:100%; } /**RSSのボタン**/ .rss { border:1px solid #6cc655; background-color:#6cc655; } .rss a{ color:white; width:100%; height:100%; } /**facebookのボタン**/ .facebook { border:1px solid #305097; background-color:#305097; } .facebook a{ color:white; width:100%; height:100%; } </style>

Facebookページがある方はこちらをどうぞ。[FacebookのURL]の部分に自分のFacebookページのアドレスを置き換えてください。

まとめ

以上6つが今回作成したデザインになります。フォローボタンは読者の方と自分を繋ぐものです。よろしければ、これを機に実装してみてください。