はてなブログにSNSアカウントのリンクを貼る方法

f:id:hc0208:20171225025202p:plain

はてなブログでは自分でちょっとしたデザインを追加したり、カスタマイズできたりします。

今回サイドバーにSNSのリンクを貼りたいなーと思っていたので、その方法を紹介します。

コピペでできるように紹介するのでHTML, CSSが書けないといった方でも簡単にできるのでもしやりたいなーと思っている方がいたらぜひ参考にしてみてください。

STEP.1 デザインタブをクリック

まずメニューの自分の名前をクリックしデザインを選択します。

f:id:hc0208:20171225013531p:plain

STEP.2 モジュールを追加を選択

カスタマイズ → サイドバー → モジュールを追加を選択します。

f:id:hc0208:20171225014128p:plain

STEP.3 HTMLをコピペ

HTMLをクリックし、表示用のタイトルをつけた後、入力欄に以下で紹介するコードをコピペします。

f:id:hc0208:20171225015435p:plain

なお、「あなたのアカウント名」のところを適宜自分のアカウントにかえてください。

上からtwitter, instagram, github, facebook, qiitaのアカウントを表示させていますが、自分の表示させたいもの以外は削除してしまってかまいません。

<div class="sns-icons clearfix">

  <!-- twitter -->
  <a href="https://twitter.com/「あなたのアカウント名」" target="_blank">
    <span aria-hidden="true" class="fa fa-twitter twitter"></span>
  </a>

  <!-- instagram -->
  <a href="https://www.instagram.com/「あなたのアカウント名」" target="_blank">
    <span aria-hidden="true" class="fa fa-instagram instagram"></span>
  </a>

  <!-- github -->
  <a href="https://github.com/「あなたのアカウント名」" target="_blank">
    <span aria-hidden="true" class="fa fa-github github"></span>
  </a>

  <!-- facebook -->
  <a href="https://www.facebook.com/「あなたのアカウント名」" target="_blank">
    <span aria-hidden="true" class="fa fa-facebook-official facebook"></span>
  </a>

  <!-- qiita -->
  <a href="https://qiita.com/「あなたのアカウント名」" target="_blank">
    <div class="qiita-wrapper">
      <span aria-hidden="true" class="fa fa-search qiita"></span>
    </div>
  </a>

</div>

STEP.4 CSSをコピペ

最後にデザインCSSをクリックし、以下で紹介するコードをコピペし変更を保存します。

f:id:hc0208:20171225022051p:plain
.sns-icons .common, .sns-icons .twitter, .sns-icons .instagram, .sns-icons .github, .sns-icons .facebook {
  font-size: 30px;
  float: left;
  margin: 5px;
  position: relative;
}
.sns-icons .common:hover, .sns-icons .twitter:hover, .sns-icons .instagram:hover, .sns-icons .github:hover, .sns-icons .facebook:hover {
  opacity: 0.7;
}
.sns-icons .twitter {
  color: #55acee;
}
.sns-icons .instagram {
  color: #D93177;
}
.sns-icons .github {
  color: #000;
}
.sns-icons .facebook {
  color: #3B5998;
}
.sns-icons .qiita {
  font-size: 35px;
  color: #fff;
  position: absolute;
  top: -4px;
  left: -2px;
}
.sns-icons .qiita-wrapper {
  background-color: #4cb10d;
  position: relative;
  border-radius: 3px;
  width: 25px;
  height: 25px;
  padding: 1px;
  margin: 7px 5px;
  float: left;
}
.sns-icons .qiita-wrapper:hover {
  opacity: 0.7;
}

.clearfix:after {
  display: block;
  content: "";
  clear: both;
}

以上で完了になります。

最後に

うまくいかない、他に何か表示させたいなどの要望がございましたら、Twitterの方にご連絡ください。