Feedly, inoreader, Twitter の購読ボタンを作りました

左サイドバーを見ていただけると分かるんですが、「購読」というブロックが増えて、Feedly,inoreader,Twitter それぞれでこのブログを購読できるようになりました。

画像とか使いたくないので、HTML+CSS,Font Awesomeを使ってます。きちんと動くはず…

コードはこんな感じです。

<script src="https://use.fontawesome.com/xyz.js"></script>
<style>
.feedly {
  color: #70CA3B;
  display: inline-block;
  height: 28px;
  border: 2px solid #70CA3B;
  line-height: 22px;
  vertical-align: middle;
  font-size: small;
  background-image: url('http://s3.feedly.com/img/follows/feedly-follow-logo-green_2x.png');
  background-size: 24px 24px;
  background-repeat: no-repeat;
  padding-left: 30px;
  padding-right: 5px;
  text-decoration: none;
}

.feedly:visited {
  color: #70CA3B;
}

.feedly:hover {
  color: white;
  background-color:#70CA3B;
}

.inoreader {
  color: #304b73;
  display: inline-block;
  height: 28px;
  border: 2px solid #304b73;
  line-height: 22px;
  vertical-align: middle;
  font-size: small;
  padding-left: 5px;
  padding-right: 5px;
  text-decoration: none;
}

.inoreader:visited {
  color: #304b73;
}

.inoreader:hover {
  background-color: #304b73;
  color: white;
}

.twitter {
  color: #55acee;
  display: inline-block;
  height: 28px;
  border: 2px solid #55acee;
  line-height: 22px;
  vertical-align: middle;
  font-size: small;
  padding-left: 5px;
  padding-right: 5px;
  text-decoration: none;
}

.twitter:visited {
  color: #55acee;
}

.twitter:hover {
  background-color: #55acee;
  color: white;
}
</style>
<a class="feedly" href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fteam-6.hatenablog.jp%2Ffeed'  target='blank'>feedly</a>
<a class="inoreader" href="http://www.inoreader.com/feed/http%3A%2F%2Fteam-6.hatenablog.jp%2Ffeed" target="blank"><i class="fa fa-rss" aria-hidden="true"></i> inoreader</a>
<a href="https://twitter.com/intent/follow?screen_name=blog_devgru" class="twitter"><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</a>