WEB・DTP・ブログ

JINでも使いたい!光るボタンを作ってみた

JINでも使いたい!光るボタン

こんにちは、スズケーです。

このブログはWordpressを使って作っています。
有料テーマの「JIN」でカスタマイズしています。

デザインの仕事などの関係上、
有料・無料問わず、他のWordpressテーマもいくつか使ったことがありますが、
「JIN」は軽くて、
見た目もシンプルでかわいくて、カスタマイズもしやすくて非常に気に入っているテーマです。

一つだけ言わせていただくならば

スズケー
スズケー
光るボタンが欲しいです

ということ…

だって目立つじゃん、光るボタン。

私、他で使っている、WING(affinger5)という有料テーマに標準装備されている光るボタンがすっごく気に入ってるんですね。目立って。

JINにもぜひ欲しい…!
ないなら作るか、ということで、オリジナルの光るボタンを作ってみました。

カスタマイズは自己責任で行ってください。事前にバックアップをとっておくことをおススメします。
コードを記入してもうまく反映されない場合があります。このカスタマイズは、あくまでもスズケーのブログで行ったものです。

 

光るボタン 完成見本

出来上がったのがこれっ!

光るボタン基本(黄色)

光るボタン緑

光るボタン赤

光るボタン青

かわいい…満足です。

光るボタンを実装するためのCSS・HTML

まずはデザインとアニメーションの設定を。

光るボタン CSS

「外観 > CSS編集」を開き、「追加CSS」に以下のコードを記載。

/* ================================
 * 光るボタン *
================================ */
.btn-cv {
  padding: .5em 0;
  overflow: hidden;
  position: relative;
}
.btn-cv a {
  border-radius: 6px;
  box-shadow: 1px 1px 5px 0 #a1a1a1;
  color: #fff;
  display: block;
  font-size: 1.2em;
font-weight: bold;
  line-height: 1.2;
  margin: .4em auto;
  padding: .8em 1em .8em;
  position: relative;
  text-align: center;
  text-decoration: none;
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  width: 60%; /* ボタンの横幅 */
}
.btn-cv.is-fz20 a {
  font-size: 20px;
}
.btn-cv a img {
  vertical-align: middle;
}
.btn-cv a:after {
  content: ' ' !important;
}


/* 2つ連続で並べる場合の余白 */
.btn-cv + .btn-cv a {
  margin-top: 0;
}

/* 黄色ボタン */
.btn-cv a {
  background: #ffcd44;
  background: -webkit-linear-gradient(#ffcd44, #F2AD00);
  background: linear-gradient(#ffcd44, #F2AD00);
  text-shadow: 0 0 10px rgba(255,255,255,.5), 1px 1px 1px rgba(0,0,0,1);
}

/* 赤ボタン */
.btn-cv.is-red a {
  background: #f28a8a;
  background: -webkit-linear-gradient(#f28a8a, #dd6e6e);
  background: linear-gradient(#f28a8a, #dd6e6e);
}

/* 青ボタン */
.btn-cv.is-blue a {
  background: #79c3ce;
  background: -webkit-linear-gradient(#79c3ce, #54a1ad);
  background: linear-gradient(#79c3ce, #54a1ad);
}

/* 緑ボタン */
.btn-cv.is-green a {
  background: #5dc699;
  background: -webkit-linear-gradient(#5dc699, #45a079);
  background: linear-gradient(#5dc699, #45a079);
}

/* ボタンの光沢 */
.is-reflection a {
  overflow: hidden;
}
.is-reflection a:after {
  -moz-animation: is-reflection 4s ease-in-out infinite;
  -moz-transform: rotate(45deg);
  -ms-animation: is-reflection 4s ease-in-out infinite;
  -ms-transform: rotate(45deg);
  -o-animation: is-reflection 4s ease-in-out infinite;
  -o-transform: rotate(45deg);
  -webkit-animation: is-reflection 4s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  animation: is-reflection 4s ease-in-out infinite;
  background-color: #fff;
  content: " ";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -180px;
  transform: rotate(45deg);
  width: 30px;
}
/* アニメーションを遅延させる */
.is-reflection + .is-reflection a:after {
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}
@keyframes is-reflection {
  0% { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes is-reflection {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/* MediaQuery : スマホ対応 */
@media only screen and (max-width: 767px) {
  /* コンバージョンボタン */
  .btn-cv a {
    font-size: 1.3em;
    margin: 0 auto 1em;
    width: 94%;
  }
}

これで光るボタンのデザイン・アニメーションの設定はOK!

光るボタン HTML

あとはエディタにHTMLを追加すれば表示されるようになります。
手打ちで記載する場合は、テキストエディタで!

<!-- 黄色ボタン(基本色) -->
<span class="btn-cv is-reflection is-trembling">
<a href="#">ここにボタンの内容を記載</a>
</span>

<!-- 緑色ボタン -->
<span class="btn-cv is-green is-reflection is-trembling">
<a href="#">ここにボタンの内容を記載</a>
</span>

<!-- 赤色ボタン -->
<span class="btn-cv is-red is-reflection is-trembling">
<a href="#">ここにボタンの内容を記載</a>
</span>

<!-- 青色ボタン -->
<span class="btn-cv is-blue is-reflection is-trembling">
<a href="#">ここにボタンの内容を記載</a>
</span>

これで、公開された時に光るボタンが表示されるようになります。

私は「AddQuickTag」という、
エディターにタグを追加することができるプラグインを使っているので、
このHTMLを登録して使っています。
ビジュアルエディタからでも、ドロップダウンリストからクリックするだけで呼び出せて便利!

光るボタンの色を変えたい場合

上記の4色のボタンは、このブログで使うために設定している色です。

ちょっと大人しめの色で気に入らない、もっと派手な色にしたいと言う場合は、CSS部分を書き換えてやってください。

ボタンの色を変えたい場合は、ソース中の

/* 黄色ボタン */  /* 赤ボタン */  /* 青ボタン */  /* 緑ボタン */

この部分以下に記載されている#で始まるカラーコードを変更してください。

 

スズケー
スズケー
JINでも光るボタンが使いたいという方、
CSSもHTMLもご自由にコピーして使ってください!
使われたら、一言コメントとかいただけるとウレシイです。

JIN Ver1.82から光るボタンが追加!

2018年12月22日に更新された、Ver1.82からJINにも光るボタンが追加されました!

JINの機能としての光るボタンはこんな感じです。

光るボタンだけでなく、いろんなアニメーションのボタンが追加されました。
光るボタンは、光り方がやや優しめですね。

これじゃ足りないので、もっとぴかっと光るボタンが欲しい…!と言う方は、
ここで紹介しているボタンもぜひ使ってくださいね。
JINのデフォルトの光るボタンより、ピカッとしてると思います!

 

お読みいただきありがとうございました!
コメント欄はちょっと下にあります。承認式ですが、コメントはお気軽にどうぞ。

ABOUT ME
スズケー
スズケー
フンザ出身のパキスタン人と国際結婚しています。 デザイナーとライターとアーティスト、時々通訳をしつつ、 投資もやってます。 お金稼いでパキスタンと日本とインドと、好きに行ったり来たりしたい。
 
にほんブログ村 旅行ブログ パキスタン旅行へ にほんブログ村 海外生活ブログ パキスタン情報へ にほんブログ村 恋愛ブログ 国際結婚(アジア人)へ
目指せブロガー!「旅をしながら稼ぐ」を実現するためのおすすめ教材
ホビリエイト・マスターズカリキュラム ロゴ

「楽しく稼ぐ」をモットーに、趣味や好きなことが仕事・収入に繋がるブログ運営を学べる講座。お手頃価格の参加費で、正統派のブログアフィリエイトのノウハウを0からしっかり習得できる、初心者さんにもおすすめの教材。
  
公式サイトを見る 紹介記事を見る

仮面ブロガーズ ロゴ

ブログで結果を出すための個別指導型オンライン学習コミュニティ。「ブロガー」として自分自身や自分の得意なことを商品にして、少ないアクセスでも好反応・高収入を得られる「資産となるブログ作り」を学ぶことが出来る。

公式サイトを見る 紹介記事を見る

イチ押し!自分のまつ毛をバッサバサに育てる究極のまつ毛美容液

まつ毛が短く、目もとに自信がない方へ。30日で実感、60日で感動できる「まつ毛」「まゆ毛」美容液。1日1回使用して、本当にまつ毛がバッサバサになりました!エクステやつけまつ毛のダメージで抜け毛が多い方にもおすすめ。

公式サイトを見る 紹介記事を見る

 
パキスタン・フンザ 旅行、滞在情報まとめ

パキスタン、フンザ旅行に関する情報記事の一覧はこちらから!
治安、旅行ガイド、両替やATM、フンザへの行き方など、ブログ内のパキスタン旅行や滞在に関する必要情報・便利情報をまとめた目次(サイトマップ)です。

パキスタン・フンザ ガイド
パキスタン・フンザ 旅行、滞在情報ガイドパキスタン、フンザ旅行に関する情報記事の一覧、目次。治安、旅行ガイド、両替やATM、フンザへの行き方など、ブログ内のパキスタン旅行に関する必要・便利情報まとめ。...
ご意見・ご質問などはメールフォームからどうぞ。
デザイナーとライターをしています。お仕事のご依頼やご相談もお気軽に。

コンタクト用メールフォーム

POSTED COMMENT

  1. アバター ななし より:

    これ使いたいのですが、コピーできません・・・

    • スズケー スズケー より:

      JINのテーマの不具合で、一部のブラウザからコピーできなかったようです。
      開発者さんに相談したので、そのうちテーマは改善されると思います。

      テキストファイルをダウンロードできるようにしたので、
      それをダウンロードして使ってください。

  2. アバター ヤマケン より:

    JINで光るボタンが調べてもなかなか作れず困っていました。
    スズケーさんのこのページのおかげで作ることができました!
    感謝いたします。有難うございます!

    話は変わりますが
    かれこれ10年ほど前にバックパックをしていまして、カラコムハイウェイを超えて、中国〜パキスタンに入り、桃源郷のフンザに滞在しておりました。

    切り立った山が「これでもか」というほど山が近く、自然に圧倒されたのを覚えています。
    人も街もよくとても良い印象があります^^

    キラッと光るボタンの作成が嬉しすぎて、コメント書いてしまいました笑

    突然失礼いたしました。

    • スズケー スズケー より:

      ヤマケンさん

      光るボタン、お役に立てたようで良かったでーす。
      今はJINにも光るボタンあるんですけど、
      キラッとじゃなくて、ふわっとって感じで、なんかちょっと違うんですよね。
      ブログ内でバンバン使っちゃってください!

      山が近いというのは、私もフンザに初めて行った時にとても感動しました。
      山はそのままですが、村の様子は10年前とは驚く程変わってますので、機会がありましたらまたぜひ訪れてみてください。

スズケー にコメントする コメントをキャンセル

メールアドレスは非公開です(メルアド入力なしでもコメントできます)。
お気軽にコメントをどうぞ。

テキストのコピーはできません。