開いたページのCSSボタンがこんな感じに震えたら・・
とっても楽しい（というか目障り）ですよね＼(^o^)／
前回CSSボタンでアニメーション記事 を書いたのですが、このサイトのテーマ「Affinger4」だと”オリジナルテーマカスタマイザー”を利用しているとstyle.cssが上手く反映されないっていうオチが・・
というわけで今回は
CSSボタンをCSShakeで
簡単にアニメーション化する方法
についてご紹介させていただきます(ﾟ∀ﾟ)！
今回CSShakeの実装方法は、WordPressテーマ「Affinger4」に向けた構成になっています。
CSSボタンをアニメーションしてクリック率を上げちゃおうよ！
https://pixabay.com/users/geralt/
先にお断りしておきます。
CSSボタンをアニメーション化してクリック率が上がるかどうかは・・
検証していません！( ･´ｰ･｀)←ｵｲ
が、流し読みする際に記事の中でアニメーションがあると
とインパクトはありますよね。
あまりアニメーションが多すぎてもアレですが、少なくとも僕はサイトに動く仕掛けがあると
- どういう動きするんだろう？
- 他にも面白い仕掛けはあるのかな？
とついクリックしたり、もっと見てみたくなっちゃいます。
そんなわけでCSSボタンのアニメーション化を行っていきましょう！
CSSボタンをアニメーション化！CSShakeを設置しよう！
CSShakeはアニメーション機能を拡張することが出来るプラグインです。
一口にプラグインとはいっても、WordPressで扱っているプラグインではなく
- 外部CSShakeのリンクをサイトに設置
- アニメーション要素をCSSで呼び出す
という使い方をします。
本来 外部サイトを読み込むにはWordPressであれば「header.php」に設置して使用します。
しかし今回は、このサイトのテーマに合わせて「Affinger4」に設置する方法をご紹介させていただきます。
CSShakeをAFFINGER4に実装する手順
Affinger4の管理画面を開きます。
ダッシュボード ＞ AFFINGER4管理画面へ
AFFINGER4管理 ＞ その他の設定 を選択。
上級者向け設定 ＞ "headに出力するコード”を選択します。
"headに出力するコード"に「※CSSakeのリンク」を記入してsaveします。
※CSShakeを呼び出すリンクは以下
|
1 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/csshake/1.5.2/csshake.css"> |
"headに出力するコード"の枠に「CSShakeを呼び出すリンク」を設置することで、サイト全体でアニメーションを呼び出すことが出来ます。
注意
「CSShakeを呼び出す設定」が出来ていないと次ページからご紹介するボタンアニメーションが動きません。
間違えないようにリンクを設置しておきましょう！
ではCSSボタンにアニメーション指示をしていきます＼(^o^)／
