はてなブログテーマ Sentence

【レスポンシブWebデザイン対応】文章の読みやすさを重視したシンプルなはてなブログテーマです

SNSフォローボタンの設置

SNSフォローボタンを設置します。

設置するのは、はてなブログ読者登録、Twitter、Feedlyの3種類です。

設置場所は自由ですが、サイドバーのプロフィールモジュールに設置するのをおすすめします。

デザインCSS

/* SNSフォローボタンのCSS */
.sns-follow {
  width: 100%;
  margin-bottom: 10px
}
.sns-follow a {
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 32.5%;
  height: 60px;
  margin: 0 .334%;
  border-radius: 5px;
  font-size: 14px;
  line-height: 60px;
  text-align: center;
  text-decoration: none
}
.sns-follow {
  width: 100%
}
.sns-follow .hatena {
  border: 2px solid #454545;
  background: #fff;
  color: #454545
}
.sns-follow .twitter {
  border: 2px solid #00acec;
  background: #fff;
  color: #00acec
}
.sns-follow .feedly {
  border: 2px solid #70ca3b;
  background: #fff;
  color: #70ca3b
}
.sns-follow .hatena:hover {
  background: #454545;
  color: #fff
}
.sns-follow .twitter:hover {
  background: #00acec;
  color: #fff
}
.sns-follow .feedly:hover {
  background: #70ca3b;
  color: #fff
}

サイドバー→プロフィール

<!-- SNSフォローボタンのHTML -->
<div class="sns-follow"><a class="hatena" href="https://blog.hatena.ne.jp/【①shimehitsu14】/【②sentence.hatenablog.jp】/subscribe"target="_blank"><i class="blogicon-hatenablog lg"></i> はてな</a><a class="twitter" href="https://twitter.com/intent/follow?screen_name=【③OkigaruMigaru】"target="_blank"><i class="blogicon-twitter lg"></i> Twitter</a><a class="feedly" href="https://feedly.com/i/subscription/feed/【④https://sentence.hatenablog.jp】/feed"target="_blank"><i class="blogicon-rss lg"></i> Feedly</a></div>

<!-- 【】部分はブログやTwitterアカウントごとに修正してください。-->
<!-- ①はてなのID ②https://を抜いたブログのURL ③TwitterのID ④https://も含むブログのURL -->