かるみに

趣味とともに生きる

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

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

カスタマイズ

 

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/」です。

コードを貼り付ける場所

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

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

f:id:trrun:20170220234726p:plain

２．HTMLの欄にコピペ！

f:id:trrun:20170220234832p:plain

フォローボタンとCSS一覧

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

１．マウスオーバーすると拡大する

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>

２．マウスオーバーすると拡大する（文字付き）

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>

 ３．マウスオーバーでマスクが表示される

 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>

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

４．マウスオーバーすると回転する

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>

５．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＞を削除することで横並びに表示することができます。

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