CSSボタンをアニメーション！CSShakeなら簡単にカスタマイズ出来るよ！

開いたページのCSSボタンがこんな感じに震えたら・・

 

 

とっても楽しい（というか目障り）ですよね＼(^o^)／

 

前回CSSボタンでアニメーション記事 を書いたのですが、このサイトのテーマ「Affinger4」だと”オリジナルテーマカスタマイザー”を利用しているとstyle.cssが上手く反映されないっていうオチが・・

 

というわけで今回は

CSSボタンをCSShakeで
簡単にアニメーション化する方法

についてご紹介させていただきます(ﾟ∀ﾟ)！

CSSボタンをアニメーションしてクリック率を上げちゃおうよ！

先にお断りしておきます。

 

CSSボタンをアニメーション化してクリック率が上がるかどうかは・・

 

検証していません！( ･´ｰ･｀)←ｵｲ

 

が、流し読みする際に記事の中でアニメーションがあると

とインパクトはありますよね。

 

あまりアニメーションが多すぎてもアレですが、少なくとも僕はサイトに動く仕掛けがあると

• どういう動きするんだろう？
• 他にも面白い仕掛けはあるのかな？

とついクリックしたり、もっと見てみたくなっちゃいます。

 

 

そんなわけでCSSボタンのアニメーション化を行っていきましょう！

CSSボタンをアニメーション化！CSShakeを設置しよう！

CSShakeはアニメーション機能を拡張することが出来るプラグインです。

 

一口にプラグインとはいっても、WordPressで扱っているプラグインではなく

という使い方をします。

 

 

本来 外部サイトを読み込むにはWordPressであれば「header.php」に設置して使用します。

 

しかし今回は、このサイトのテーマに合わせて「Affinger4」に設置する方法をご紹介させていただきます。

CSShakeをAFFINGER4に実装する手順

Affinger4の管理画面を開きます。

 

ダッシュボード ＞ AFFINGER4管理画面へ

 

AFFINGER4管理 ＞ その他の設定　を選択。

 

上級者向け設定 ＞ "headに出力するコード”を選択します。

 

"headに出力するコード"に「※CSSakeのリンク」を記入してsaveします。

 

 

 

ではCSSボタンにアニメーション指示をしていきます＼(^o^)／