スポンサーリンク

【つぶやき】ボタンブロックで作ったボタンをキラッと光るボタンにしてみた!

結耶のつぶやき

最近よく見かける「キラッと光るボタン」。

きらり
きらり

キラッと光ってるね~。こういうボタンボクも気になっていたんだよね。

結耶
結耶

よく見かけるでしょ!?それになんだかポチッとしたくなるよね!w

みなさんもこのようなボタンを見たことがあると思います。
テーマによってはこのような光るボタンが作成できるようになっています。

しかし、私が使っているテーマにはありません。そこで光るボタンを作ってみようと思い作り方を調べてみました。

スポンサーリンク

光るボタンの作り方

光るボタンや動くボタンを作成プラグインもあるようですが、私はプラグインを使わずに作りたいと思ったのでHTMLとCSSで光るボタンを作ることにしました。

自分でCSSを書いてみようとしていくつか記事を見ましたが…今の私には解らない部分もあるのでHTML、CSSをコピペさせてもらうことにしました(^^;)w

上記の記事のコードを使用させてもらうことにしました。

ブロックエディタのボタン

キラッと光るボタンは上で紹介した記事のコードをコピペして利用すればすぐに設置することはできます。

しかしそれだとボタンの色や形、大きさを変えたい場合はそれぞれ変えたい部分のCSSを書かなくてはならずちょっと面倒です(^^;)

そこで私は思いました。

結耶
結耶

ブロックエディタのボタンブロックで作ったボタンをキラッとさせることは出来ないのかな?

ブロックエディタにはボタンを簡単に作ることができる「ボタンブロック」があります。ボタンブロックで作成したボタンに光る効果を付けられれば、色や形、大きさをボタンブロックの設定で簡単に変えることができると思ったんです。

そこで上で上で紹介した記事のCSSコードを使わせてもらいボタンブロックで作成したボタンをキラッと光るようにしてみました。

CSS

/*--------------------
  キラッと光るボタン
--------------------*/
.shine-btn {
    margin:2em 1em;
}

.shine-btn a {
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

/* ホバー時ボタンを凹ませる */
.shine-btn a:hover{
    transform: translateY(4px); /*下に動く*/
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); /*影を小さく*/
    border-bottom: none;
}
/* ボタンをキラッとさせる */
.shine-btn a:before{
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 100) 81%, rgba(255, 255, 255, 0) 100%);
    animation: shine 3s infinite; /* inifiniteによりずっと続ける */
}
@keyframes shine {
  33% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

※ここで紹介したCSSコードは以下のサイトのコードを使わせてもらいました。

ボタンの色や形大きさはボタンブロックの設定が適用するように、ボタンスタイルに関係する部分を削除し、クラス名など一部書き換えました。

ボタン作成

上のCSSを設置しただけではボタンは光らないので、ボタンブロックでボタンを作成して光るようにクラスを追加します。

投稿編集画面左上の+をクリックしします。

ボタンに入れるテキストを入力する

ボタンのスタイルを変更する

左上の歯車アイコンをクリックして左側に表示される設定で色や大きさなどを投稿編集画面左上の+をクリックしします。設定してください。

リンクや表示位置は上に表示されるツールバーで設定してください。

クラス名を追加する

ボタンの右横をクリックして、編集画面右上の歯車アイコンをクリックします。

「高度な設定」の中の「追加CSSクラス」にクラス名(shine-btn)と入力してください。

完成です!

Point

ボタンブロックのボタンはdivタグで囲われています。一番外側のdivタフにクラス名を入れないと効果は出ません。なのでクラス名を指定する場合はボタンの右横をクリックして一番divにクラス名を入力してください。

結耶
結耶

これでボタンは完成です。あとはちゃんと光るか確認してください。
またボタンのスタイルはボタンブロックで設定してあるのでいつでも色や大きさなど変更できます。

最後に

今回は「キラッと光るボタン」をプラグインを使わずに導入してみました。

CSSコードを自分で書けず、他の人が書いたものを使い,ボタンブロックで作ったボタンに適用できるようにアレンジしてみました。

きらり
きらり

CSSを設定して置けばボタンブロックでボタンを作ってクラス名を入れるだけだからボクでもできそう。

結耶
結耶

再利用ブロックに追加しておけば使い回しできるし、通常ブロックに変換すればテキストや色とかも変えられて、CSSをいじる必要もないからね(*^^*)

みなさんもポチッとしたくなるようなボタンを設置する場合は参考にしてみてください。

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM