はてなブログのサイドバーにSNSフォローボタンを設置するサンプル

前回、はてなブログのサイドバーに自分で書いたHTMLとCSSでプロフィール欄を設置したのですが、今回はプロフィール欄の下に表示させるSNSのフォローボタンを作ってみました。

【過去記事】はてなブログのサイドバーのプロフィールのHTMLとCSSのサンプル - LIFELOG

CSSのflexboxの練習のためにいくつか作ってみたので一応掲載しておきます。

※素人のおばさんが本を片手に作っているので間違っていることもあるかもしれませんが、そんな時はコメント欄などで優しく教えてくださると嬉しいです。

※はてなブログProを利用している方向けのカスタマイズ方法なので無料版の方は利用できません。

手順

TwitterやFacebookなどのアイコンは、Font awesomeというフォントを利用して表示させています。

手順1 Font AwesomeのCDNを利用するためにメタタグに下記を記述します。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

※ Font Awesomeのバージョンは今回6を利用しています。バージョンによってアイコンフォントの記述の仕方が少しずつ違うので、すでにFont Awesomeを利用していて違うバージョンが入っている方は利用しないでください。使っているフォントが表示されなくなってしまう可能性があります。

はてなブログの場合は、「設定」→「詳細設定」→「head要素にメタデータを追加」のところに上の記述をコピペします。すでに何か入っている場合は消さずに最後に追記します。

手順2 CSSを適用させる

表示させたいSNSのアイコンタイプの「クリックして表示」をクリックするとHTMLとCSSの記述が出てきます。とりあえず、先にCSSをコピーして「管理画面」→「デザイン」→「カスタマイズ」→「デザインCSS」に貼り付けます。デザインCSSのところに何か記載がある場合は、最後に追記します。

手順3 HTMLを編集する

HTMLにはハイパーリンクが記述していますが、その部分をご自身のSNS先へ変更が必要です。

まずは、HTMLをテキストエディタにコピーしてください。できればテラパッドなどのテキストエディタがいいです。メモ帳だとうまくいかない場合があります。

HTMLをコピーしたら、必要のないSNSの行を削除します。

↓こんな感じでリストになっていますので必要のない行は消してください。

<ul>
  <li>Twitter</li>
  <li>Facebook</li>
  <li>Instagram</li>
  <li>Pinterest</li>
  <li>RSS</li>
  <li>mail</li>
</ul>

リンク先をご自身のSNSのリンク先へ変更します。

変更が終わったら前回作ったプロフィールの欄に追記します。

「管理画面」→「デザイン」→「カスタマイズ」→「サイドバー」のプロフィール欄に出来上がったものを追加してください。

SNSアイコンタイプ0

クリックして表示

<ul class="sns-btn-type0">
  <li class="twitter-blue bg-white"><a href="https://twitter.com/intent/follow?screen_name=あなたのTwitterユーザー名" target="_blank"><i class="fa-brands fa-twitter fa-fw"></i></a></li>
  <li class="facebook-blue bg-white"><a href="https://www.facebook.com/facebookページのユーザーネーム" target="_blank"><i class="fa-brands fa-square-facebook fa-fw"></i></a></li>
  <li class="insta-pink bg-white"><a href="https://www.instagram.com/ユーザーネーム" target="_blank"><i class="fa-brands fa-instagram fa-fw"></i></a></li>
  <li class="pinte-red bg-white"><a href="https://www.pinterest.jp/ピンタレストのユーザー名" target="_blank"><i class="fa-brands fa-pinterest fa-fw"></i></a></li>
  <li class="rss-green bg-white"><a href="あなたのブログのURL/rss" target="_blank"><i class="fa-solid fa-rss fa-fw"></i></a></li>
  <li class="mail-orange bg-white"><a href="ブログの問い合わせフォーム" target="_blank"><i class="fa-solid fa-envelope fa-fw"></i></a></li>
</ul>

/* SNSアイコンここから */
.sns-btn-type0 {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  list-style: none;
}
.sns-btn-type0 li {
  margin: 2px;
  border: none;
}
.twitter-blue a {
  color: #1DA1F2;
  display: block;
  padding: 0 10px;
  line-height: 40px;
}
.facebook-blue a {
  color: #1877f2;
  display: block;
  padding: 0 10px;
  line-height: 40px;
}
.insta-pink a {
  color:#DC2E74;
  display: block;
  padding: 0 10px;
  line-height: 40px;
}
.pinte-red a  {
  color:#E60023;
  display: block;
  padding: 0 10px;
  line-height: 40px;
}
.rss-green a  {
  color:#6CC655;
  display: block;
  padding: 0 10px;
  line-height: 40px;
}
.mail-orange a  {
  color: #F58220;
  display: block;
  padding: 0 10px;
  line-height: 40px;
}
.bg-white {
  background-color:#fff;
  border: solid 1px #efefef;
}
.twitter-blue:hover {
  background-color: rgba(29,161,242,.5);
}
.twitter-blue:hover a {
  color: white;
}
.facebook-blue:hover {
  color: white;
  background-color: rgba(24,119,242,.5);
}
.facebook-blue:hover a {
  color: white;
}
.insta-pink:hover {
  color: white;
  background-color: rgba(220,46,116,.5);
}
.insta-pink:hover a {
  color: white;
}
.pinte-red:hover {
  color: white;
  background-color: rgba(230,0,35,.5);
}
.pinte-red:hover a {
  color: white;
}
.rss-green:hover {
  color: white;
  background-color: rgba(108,198,85,.5);
}
.rss-green:hover a {
  color: white;
}
.mail-orange:hover {
  color: white;
  background-color: rgba(245,130,32,.5);
}
.mail-orange:hover a {
  color: white;
}
/* SNSアイコンここまで */

SNSアイコンタイプ1

クリックして表示

<ul class="sns-btn-type1">
  <li class="twitter-blue bg-white"><a href="https://twitter.com/intent/follow?screen_name=あなたのTwitterユーザー名" target="_blank"><i class="fa-brands fa-twitter fa-fw"></i></a></li>
  <li class="facebook-blue bg-white"><a href="https://www.facebook.com/facebookページのユーザーネーム" target="_blank"><i class="fa-brands fa-square-facebook fa-fw"></i></a></li>
  <li class="insta-pink bg-white"><a href="https://www.instagram.com/ユーザーネーム" target="_blank"><i class="fa-brands fa-instagram fa-fw"></i></a></li>
  <li class="pinte-red bg-white"><a href="https://www.pinterest.jp/ピンタレストのユーザー名" target="_blank"><i class="fa-brands fa-pinterest fa-fw"></i></a></li>
  <li class="rss-green bg-white"><a href="あなたのブログのURL/rss" target="_blank"><i class="fa-solid fa-rss fa-fw"></i></a></li>
  <li class="mail-orange bg-white"><a href="ブログの問い合わせフォーム" target="_blank"><i class="fa-solid fa-envelope fa-fw"></i></a></li>
</ul>

/* SNSアイコンタイプ1ここから */
.sns-btn-type1 {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  list-style: none;
}
.sns-btn-type1 li {
  margin: 2px;
  border-radius: 50%;
  border: solid 1px #efefef;
}
.twitter-blue a {
  color: #1DA1F2;
  display: block;
  padding: 0 10px;
  line-height: 40px;
}
.facebook-blue a {
  color: #1877f2;
  display: block;
  padding: 0 10px;
  line-height: 40px;
}
.insta-pink a {
  color:#DC2E74;
  display: block;
  padding: 0 10px;
  line-height: 40px;
}
.pinte-red a  {
  color:#E60023;
  display: block;
  padding: 0 10px;
  line-height: 40px;
}
.rss-green a  {
  color:#6CC655;
  display: block;
  padding: 0 10px;
  line-height: 40px;
}
.mail-orange a  {
  color: #F58220;
  display: block;
  padding: 0 10px;
  line-height: 40px;
}
.bg-white {
  background-color:#fff;
}
.twitter-blue:hover {
  background-color: rgba(29,161,242,.5);
}
.twitter-blue:hover a {
  color: white;
}
.facebook-blue:hover {
  color: white;
  background-color: rgba(24,119,242,.5);
}
.facebook-blue:hover a {
  color: white;
}
.insta-pink:hover {
  color: white;
  background-color: rgba(220,46,116,.5);
}
.insta-pink:hover a {
  color: white;
}
.pinte-red:hover {
  color: white;
  background-color: rgba(230,0,35,.5);
}
.pinte-red:hover a {
  color: white;
}
.rss-green:hover {
  color: white;
  background-color: rgba(108,198,85,.5);
}
.rss-green:hover a {
  color: white;
}
.mail-orange:hover {
  color: white;
  background-color: rgba(245,130,32,.5);
}
.mail-orange:hover a {
  color: white;
}
/* SNSアイコンタイプ1ここまで */

SNSアイコンタイプ2

クリックして表示

<ul class="sns-btn-type2">
  <li class="twitter-blue bg-white"><a href="https://twitter.com/intent/follow?screen_name=あなたのTwitterユーザー名" target="_blank"><i class="fa-brands fa-twitter fa-fw"></i></a></li>
  <li class="facebook-blue bg-white"><a href="https://www.facebook.com/facebookページのユーザーネーム" target="_blank"><i class="fa-brands fa-square-facebook fa-fw"></i></a></li>
  <li class="insta-pink bg-white"><a href="https://www.instagram.com/ユーザーネーム" target="_blank"><i class="fa-brands fa-instagram fa-fw"></i></a></li>
  <li class="pinte-red bg-white"><a href="https://www.pinterest.jp/ピンタレストのユーザー名" target="_blank"><i class="fa-brands fa-pinterest fa-fw"></i></a></li>
  <li class="rss-green bg-white"><a href="あなたのブログのURL/rss" target="_blank"><i class="fa-solid fa-rss fa-fw"></i></a></li>
  <li class="mail-orange bg-white"><a href="ブログの問い合わせフォーム" target="_blank"><i class="fa-solid fa-envelope fa-fw"></i></a></li>
</ul>

/* SNSアイコンタイプ2ここから */
.sns-btn-type2 {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  list-style: none;
}
.sns-btn-type2 li {
  margin: 2px;
  border: solid 1px #efefef;
}
.twitter-blue a {
  color: #1DA1F2;
  display: block;
  padding: 0 10px;
  line-height: 40px;
}
.facebook-blue a {
  display: block;
  padding: 0 10px;
  line-height: 40px;
  color: #1877f2;
}
.insta-pink a {
  display: block;
  padding: 0 10px;
  line-height: 40px;
  color:#DC2E74;
}
.pinte-red a  {
  display: block;
  padding: 0 10px;
  line-height: 40px;
  color:#E60023;
}
.rss-green a  {
  display: block;
  padding: 0 10px;
  line-height: 40px;
  color:#6CC655;
}
.mail-orange a  {
  display: block;
  padding: 0 10px;
  line-height: 40px;
  color: #F58220;
}
.bg-white {
  background-color:#fff;
  border: solid 1px #efefef;
}
.twitter-blue:hover {
  background-color: rgba(29,161,242,.5);
}
.twitter-blue:hover a {
  color: white;
}
.facebook-blue:hover {
  color: white;
  background-color: rgba(24,119,242,.5);
}
.facebook-blue:hover a {
  color: white;
}
.insta-pink:hover {
  color: white;
  background-color: rgba(220,46,116,.5);
}
.insta-pink:hover a {
  color: white;
}
.pinte-red:hover {
  color: white;
  background-color: rgba(230,0,35,.5);
}
.pinte-red:hover a {
  color: white;
}
.rss-green:hover {
  color: white;
  background-color: rgba(108,198,85,.5);
}
.rss-green:hover a {
  color: white;
}
.mail-orange:hover {
  color: white;
  background-color: rgba(245,130,32,.5);
}
.mail-orange:hover a {
  color: white;
}
/* SNSアイコンタイプ2ここまで */

SNSアイコンタイプ3

クリックして表示

<ul class="sns-btn-type3">
  <li class="bg-blue white"><a href="https://twitter.com/intent/follow?screen_name=あなたのTwitterユーザー名" target="_blank"><i class="fa-brands fa-twitter fa-fw"></i></a></li>
  <li class="bg-facebook-blue white"><a href="https://www.facebook.com/facebookページのユーザーネーム" target="_blank"><i class="fa-brands fa-square-facebook fa-fw"></i></a></li>
  <li class="bg-pink white"><a href="https://www.instagram.com/ユーザーネーム" target="_blank"><i class="fa-brands fa-instagram fa-fw"></i></a></li>
  <li class="bg-white pinte-red"><a href="https://www.pinterest.jp/ピンタレストのユーザー名" target="_blank"><i class="fa-brands fa-pinterest fa-fw"></i></a></li>
  <li class="bg-green white"><a href="あなたのブログのURL/rss" target="_blank"><i class="fa-solid fa-rss fa-fw"></i></a></li>
  <li class="bg-orange white"><a href="ブログの問い合わせフォーム" target="_blank"><i class="fa-solid fa-envelope fa-fw"></i></a></li>
</ul>

/* SNSアイコンタイプ3ここから */
.sns-btn-type3 {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  list-style: none;
}
.sns-btn-type3 li {
  margin: 2px;
  border-radius: 50%;
  border: solid 1px #efefef;
}
.sns-btn-type3 a {
  display: block;
  padding: 0 10px;
  line-height: 38px;
  color: white;
}
.pinte-red a {
  color:#E60023;
}
.bg-blue {
  background-color: #1DA1F2;
}
.bg-facebook-blue {
  background-color: #1877f2;
}
.bg-pink {
  background-color:#DC2E74;
}
.bg-red {
  background-color:#E60023;
}
.bg-green {
  background-color:#6CC655;
}
.bg-orange {
  background-color:#F58220;
}
.bg-white {
  background-color:#fff;
  border: solid 1px #efefef;
}
.sns-btn-type3 li:hover {
  opacity: 0.7;
}
.bg-white:hover {
  background-color: rgba(230,0,35,.5);
}

.bg-white:hover a {
  color:#fff;
}
/* SNSアイコンイプ3ここまで */

SNSアイコンタイプ4

クリックして表示

<ul class="sns-btn-type4">
  <li class="bg-blue white"><a href="https://twitter.com/intent/follow?screen_name=あなたのTwitterユーザー名" target="_blank"><i class="fa-brands fa-twitter fa-fw"></i></a></li>
  <li class="bg-facebook-blue white"><a href="https://www.facebook.com/facebookページのユーザーネーム" target="_blank"><i class="fa-brands fa-square-facebook fa-fw"></i></a></li>
  <li class="bg-pink white"><a href="https://www.instagram.com/ユーザーネーム" target="_blank"><i class="fa-brands fa-instagram fa-fw"></i></a></li>
  <li class="bg-white pinte-red"><a href="https://www.pinterest.jp/ピンタレストのユーザー名" target="_blank"><i class="fa-brands fa-pinterest fa-fw"></i></a></li>
  <li class="bg-green white"><a href="あなたのブログのURL/rss" target="_blank"><i class="fa-solid fa-rss fa-fw"></i></a></li>
  <li class="bg-orange white"><a href="ブログの問い合わせフォーム" target="_blank"><i class="fa-solid fa-envelope fa-fw"></i></a></li>
</ul>

/* SNSアイコンタイプ4ここから */
.sns-btn-type4 {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  list-style: none;
}
.sns-btn-type4 li {
  margin: 2px;
  border: solid 1px #efefef;
}
.sns-btn-type4 a {
  color: white;
  display: block;
  padding: 0 10px;
  line-height: 38px;
}
.pinte-red a {
  color:#E60023;
}
.bg-blue {
  background-color: #1DA1F2;
}
.bg-facebook-blue {
  background-color: #1877f2;
}
.bg-pink {
  background-color:#DC2E74;
}
.bg-red {
  background-color:#E60023;
}
.bg-green {
  background-color:#6CC655;
}
.bg-orange {
  background-color:#F58220;
}
.bg-white {
  background-color:#fff;
  border: solid 1px #efefef;
}
.sns-btn-type4 li:hover {
  opacity: 0.7;
}
.bg-white:hover {
  background-color: rgba(230,0,35,.5);
}

.bg-white:hover a {
  color:#fff;
}
/* SNSアイコンタイプ4ここまで */

SNSアイコンタイプ5

クリックして表示

<ul class="sns-btn-type5">
  <li><a href="https://twitter.com/intent/follow?screen_name=あなたのTwitterユーザー名" target="_blank"><i class="fa-brands fa-twitter fa-fw"></i></a></li>
  <li><a href="https://www.facebook.com/facebookページのユーザーネーム" target="_blank"><i class="fa-brands fa-square-facebook fa-fw"></i></a></li>
  <li><a href="https://www.instagram.com/ユーザーネーム" target="_blank"><i class="fa-brands fa-instagram fa-fw"></i></a></li>
  <li><a href="https://www.pinterest.jp/ピンタレストのユーザー名" target="_blank"><i class="fa-brands fa-pinterest fa-fw"></i></a></li>
  <li><a href="あなたのブログのURL/rss" target="_blank"><i class="fa-solid fa-rss fa-fw"></i></a></li>
  <li><a href="ブログの問い合わせフォーム" target="_blank"><i class="fa-solid fa-envelope fa-fw"></i></a></li>
</ul>

/* SNSアイコンここから */
.sns-btn-type5 {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  list-style: none;
}
.sns-btn-type5 li {
  margin: 2px;
  line-height: 40px;
  border-radius: 50%;
  border: solid 1px #efefef;
}
.sns-btn-type5 a {
  color: #fff;
  background-color: #666;
  display: block;
  padding: 0 10px;
  line-height: 40px;
  border-radius: 50%;
}

.sns-btn-type5 a:hover {
  background-color: #333;
}

SNSアイコンタイプ6

クリックして表示

<ul class="sns-btn-type6">
  <li class="white"><a href="https://twitter.com/intent/follow?screen_name=あなたのTwitterユーザー名" target="_blank"><i class="fa-brands fa-twitter fa-fw"></i></a></li>
  <li class="white"><a href="https://www.facebook.com/facebookページのユーザーネーム" target="_blank"><i class="fa-brands fa-square-facebook fa-fw"></i></a></li>
  <li class="white"><a href="https://www.instagram.com/ユーザーネーム" target="_blank"><i class="fa-brands fa-instagram fa-fw"></i></a></li>
  <li class="white"><a href="https://www.pinterest.jp/ピンタレストのユーザー名" target="_blank"><i class="fa-brands fa-pinterest fa-fw"></i></a></li>
  <li class="white"><a href="あなたのブログのURL/rss" target="_blank"><i class="fa-solid fa-rss fa-fw"></i></a></li>
  <li class="white"><a href="ブログの問い合わせフォーム" target="_blank"><i class="fa-solid fa-envelope fa-fw"></i></a></li>
</ul>

/* SNSアイコンここから */
.sns-btn-type6 {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  list-style: none;
}
.sns-btn-type6 li {
  margin: 2px;
  line-height: 40px;
  border: none;
  background-color: #666;
  border: solid 1px #efefef;
}
.sns-btn-type6 li:hover {
  background-color: #333;
}
.white a {
  color: #fff;
  display: block;
  padding: 0 10px;
  line-height: 40px;
}
/* SNSアイコンここまで */

雑感

【覚えたこと】

flexboxは横並びの時に使う(display:flex)
flex-wrapにすると折り返して表示
justify-content:center;で中央に寄せる
Font Awesomeを利用する方法は3つあり、ダウンロードして利用する方法と今回やったCDNを利用する方法とJSを利用する方法がある。JSは会員登録が必要だったので次回に試してみることにする
TwitterやFacebookなどのアイコンを利用する場合は、ロゴに関して細かくガイドラインが定められていて、特に色の指定が細かい。
Twitterのロゴは青か白のみで、印刷物のみ黒がOKらしい。

Twitter #1DA1F2
Facebook #1877f2