はてなブログのデザイン、サイドバーをちょこっとカスタマイズ

こんな感じに。

sentence.hatenablog.jp

使っているテーマ「Sentence」の作者さんのをそのまま使いました。

shirokai.hatenablog.com

www.royalnaught.com

ここを見るとはてなブログではClassで指定するだけでいろんなWebアイコン使えるみたいですね。Instagramなども

blogicon-instagram

と指定するだけで使えました。

また各サービスの色は

www.webprofessional.jp

www.ukar.jp

これらを参考にしました。

そして上記を参考にしながらちょこっと改造したデザイン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: .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 .facebook {
  border: 2px solid #3B5998;
  background: #fff;
  color: #3B5998
}
.sns-follow .instagram {
  border: 2px solid #D93177;
  background: #fff;
  color: #D93177
}
.sns-follow .blog {
  border: 2px solid #A5C1E5;
  background: #fff;
  color: #A5C1E5
}
.sns-follow .portfolio {
  border: 2px solid #4352BC;
  background: #fff;
  color: #4352BC
}
.sns-follow .hatena:hover {
  background: #454545;
  color: #fff
}
.sns-follow .twitter:hover {
  background: #00acec;
  color: #fff
}
.sns-follow .facebook:hover {
  background: #3B5998;
  color: #fff
}
.sns-follow .instagram:hover {
  background: #D93177;
  color: #fff
}
.sns-follow .blog:hover {
  background: #A5C1E5;
  color: #fff
}
.sns-follow .portfolio:hover {
  background: #4352BC;
  color: #fff
}

各種サービスの色と、あと上下にも空間をあけるために、上下のmarginを0→0.334%に変更。

で、サイドバーがこちら

<!-- SNSフォローボタンのHTML -->
<div class="sns-follow"><a class="twitter" href="https://twitter.com/XxGodmoonxX"target="_blank">
<i class="blogicon-twitter lg"></i> Twitter</a><a class="facebook" href="https://www.facebook.com/XxGodmoonxX"target="_blank">
<i class="blogicon-facebook lg"></i> facebook</a><a class="instagram" href="https://www.instagram.com/xxgodmoonxx"target="_blank">
<i class="blogicon-instagram lg"></i> Instagram</a><a class="blog" href="https://blog.motoki-watanabe.net/"target="_blank">
<i class="blogicon-hatenablog lg"></i> ブログ</a><a class="portfolio" href="https://motoki-watanabe.net/"target="_blank">
<i class="blogicon-home lg"></i> Portfolio</a></div>

もうほんと、

sentence.hatenablog.jp

をちょっとだけ変えただけです。

しめひつ (id:shimehitsu14) さんありがとうございます…！