チカチカ動く・点滅する・キラッと光る！ボタンの作り方

最近、“動く”サイトデザイン、多いですよね。

ふわっと下から現れたり、ボワっとロゴが表示されたり、左右からブロックが登場してきたり・・

特にワードプレスは標準エディタがGutenbergになってから、ブロックパーツで「動かす」要素を簡単に選択できるようになったので、ノーコードで実装でき、使いやすくなったのかもしれません。

“動き”があることで、目が行きますし、下にスクロールしてもらいやすくなる効果があります。

結果、「サイトの離脱防止」や「閲覧時間を延ばす」ことにもつながりますね。

とはいえ、【動かしすぎ】るとやかましくなるので好みが分かれるところですが、「特に目立たせたいパーツ」にのみ導入するのは賛成です。

今日は動かしたいパーツ第1位？ボタンを動かしてみます。

動くボタンを作りたい！

ボタンを動かすには、本来CSS（スタイルシート）を設定するのが本来の方法。

最近は、テーマ側で使えるボタンやブロックウィジェットの機能によって、アニメーションを施すことが可能になっています。

テーマ依存型

例えば、当ブログで使っている「ACTION（AFFINGER6）」には、チカッと光るボタンエフェクトが使用できます。

ボタンの例だからクリックしても何も起こらないよー

無料で人気のワードプレステーマ「Cocoon」にも光らせるボタンがあります。

ただし、「テーマ依存型」は、そのテーマを使っているときしか使えないため、もしテーマを変えた場合は修正しないといけなくなるし、別のサイトで別テーマを使っている場合は、他の方法を探す必要があります。

プラグイン型

一方、プラグインで機能を追加できる場合もあります。Gutenbergでのブロックウィジェットやショートコードで吐き出す仕様のプラグインが多くあります。

プラグインであれば、基本的にはどのテーマでも使えます。ただし、それぞれのプラグインによってデザインや設定方法が異なることや多少テーマとの相性があります。

●例１）Spectra を使った例

ブロックエディタの拡張ができる「Spectra」のボタンです。ボタンの設定で「Animation」が選択でき、ふわっと現れたり、スライドインするようなボタン効果が可能です。
ただ、【ずっと動く】【点滅する】類のものではなく、「ページを読み込んだタイミングで起こるエフェクト」なので効果は1回です。

●例２）ShortcodeUltimate を使った例

例えば、以下は「Shortcodes Ultimate」で作ったボタンの例。Shortcodes Ultimateはショートコードで実装するので、どんなエディタでも使えて便利です。
ボタン自体にはアニメーションはないのですが、アニメーションのショートコードで囲むことで入れ子にしている状態です。アニメーションの種類も豊富です。こちらも効果は読み込み時に1回のみです。

・・・ということで、例えば点滅するとか、ぼよよんするとか、【目立ち続けるタイプのボタン】が欲しい場合はどうたらいいでしょうか？

調べましたら、確かに一部有料プラグインやテーマにはあるようですが、割と高価たったり、テーマ依存だったり・・でした。

また、個別にスタイルシートで実装する手もあります。でもね・・正直面倒なのですよ。

致し方ないので、「配ってもいいよV2」で、こんな↓ボタンを作ったくらいです。

まぁ、HTMLメルマガなどスタイルシート問題がないメディアやワードプレス以外のブログなどには大変便利ではあるのですが、こちらは画像なのでテキストを変えられません。（数種類用意していますが）

希望は「テーマに依存しないプラグインで動き続けるタイプのボタンが作れる」ものが欲しい！でした。

そぉしたら・・・ついに見つけましたぁーー！！パチパチ！！

・・・というのは、「デコプレス」というプラグインです。

有料のプラグインですが、激安。
ボタン以外にもわたくしの欲しいパーツがたくさんありますし、テーマに依存しないのがとてもいいっ！

ショートコードなので、Elementorなどにも使えますしね！

装飾が苦手な初心者さんも、CSSを用意するのが面倒な中級・上級者さんにもめちゃくちゃ便利なのではないでしょうか？

では、早速やってみますね。

そうそう！こういうのが欲しかったの！！動きは全9種類あります。（詳しくはこちらからご確認を！）

ボタンは色やサイズも変えられるし、追加のスタイルも設定できるのでカスタマイズ性も高いです。

LPやフッター固定ボタンなんかにも、コレ相当使える！！

ショートコードなのでリンク先を変えたい場合も、一括で変更できるのも便利です。

ボタンではなくて、リボンとか、文字装飾とか、囲み枠とか・・、なんだかいい感じな装飾がたくさん。

また、ワードプレスのプラグインは海外のものが多く、おしゃれなデザインも多いけれど、なんていうか・・日本語のサイトに合わないというか・・そういったものも多いのですが、「デコプレス」は国産プラグインなので使いやすく、日本語サイトに馴染むなあ・・と思っております。

意外と、こういった装飾で気に入ったものがプラグインで揃っているのはなかなかお目にかかれず、泣く泣くCSSを書いて、テーマとの干渉で一日無駄にしたり・・と遠回りしてきたけれど、もう「デコプレス」だけ使いまわしていればいいかなぁ・・という印象です。

今まで「ボタン　動かす」とかって、検索してがんばってCSSコピペしてた方！ぜひ試してみてください。