【はてな初心者必見】変数でカスタマイズできるはてなブログ読者登録ボタンを作った

100年ぶりにブログカスタマイズした

どうも。へんじにゃ@hengin_blogです。

今回は超久々にブログのカスタマイズとして、「オリジナルの読者登録ボタンを作りました」

読者登録してもらうには前提として良記事を書いていることですが、それに加えて読者になってもらえるように工夫する必要があります

そこで今回は派手めのデザインとなっていますが、変数を用いて作ったので初心者でも簡単にカスタムできるようになっています！

⚠️コードの扱いについて

このボタンのコードをコピペで使用することは可能ですが以下の条件を守ってくださるようお願いします

• ✅このブログの読者登録
• ✅この記事にスターをつける
• ✅（あれば）私のツイッターをフォロー

以上の事項を遵守してご利用ください

ということで実物をご覧ください😊

変数でカスタムできる読者登録ボタン

カスタム方法

コードを編集できるようにしていますので:rootをいじってみて下さい

例：--txtColor: white; 👉 --txtColor: black;

コードレシピ

それぞれ必要なコードを記載していますのでコピペしてお使いください

HTML

<div class="subscribe__wrapper">
  <a class="subscribe" href="https://blog.hatena.ne.jp/hengin_blog/henginya.hatenablog.jp/subscribe">読者になる</a>
  <div class="subscribe__anime"></div>
</div>

CSS

:root {
  --bdWeight: 5px; /*虹色の輪の太さ*/
  --txtColor: white; /*テキスト色*/
  --bgColor: #E94560; /*背景色*/
  --bgColorAfter: #4D77FF80; /*ホバー時の背景色*/
  --rotateTime: 1s; /*虹色の輪の回転速度*/
}

@import url('https://fonts.googleapis.com/css2?family=Stick&display=swap');

.subscribe__wrapper {
  position: relative;
  margin: 20px auto;
  height: calc(50px + var(--bdWeight) * 2);
  width: calc(150px + var(--bdWeight) * 2);
  border-radius: 50px;
  overflow: hidden;
  z-index: 1;
}

.subscribe {
  box-sizing: border-box;
  position: absolute;
  top: var(--bdWeight);
  left: var(--bdWeight);
  height: 50px;
  width: 150px;
  padding: 10px;
  text-align: center;
  border-radius: 50px;
  text-decoration: none !important;
  font-size: 18px;
  color: var(--txtColor);
  font-family: 'Stick' !important;
  background: var(--bgColor);
  transition: .5s;
  z-index: 1;
}
.subscribe:hover {
  background: var(--bgColorAfter);
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}
.subscribe__anime {
  position: absolute;
  top: -50px;
  left: 0;
  z-index: -1;
  width: calc(150px + var(--bdWeight) * 2);
  height: calc(150px + var(--bdWeight) * 2);
  background: 
    linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
  animation: rotate var(--rotateTime) linear infinite
}

• css変数
• position: absolute;
• background: linear-gradient(xxxdeg, #xxxxxx, #xxxxxx);
• animation: xxx, ..;

特に背景のグラデーションをいい具合にするのに苦労しました…

参考

developer.mozilla.org

最後まで閲覧頂きありがとうございました😂😂

参考になったら読者登録よろしくお願いいたします！！
読者登録返しします！！

読者になる