WordPressの設定

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

投稿日:

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

 

 

とっても楽しい(というか目障り)ですよね\(^o^)/

 

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

 

というわけで今回は

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

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

今回CSShakeの実装方法は、WordPressテーマ「Affinger4」に向けた構成になっています。

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

https://pixabay.com/users/geralt/

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

 

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

 

検証していません!( ・´ー・`)←オイ

 

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

アヒルン
な、なんだこれ?めっちゃ動いてるw

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

 

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

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

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

 

oyakun
アニメーションを施すことでクリック率を上げるというよりも、滞在率を上げる方に効果的かもです。

 

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

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

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

 

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

  1. 外部CSShakeのリンクをサイトに設置
  2. アニメーション要素をCSSで呼び出す

という使い方をします。

 

アヒルン
ダウンロードしておしまいではなくて、設置して自分のサイトからCSShakeを呼び込むんだね。
うちゅうじん
そういうことだ。さらに任意の場所をアニメーション指示して使うのだ。

 

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

 

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

CSShakeをAFFINGER4に実装する手順

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

 

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

 

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

 

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

 

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

※CSShakeを呼び出すリンクは以下

出典元:https://cdnjs.com/

 

POINT!

"headに出力するコード"の枠に「CSShakeを呼び出すリンク」を設置することで、サイト全体でアニメーションを呼び出すことが出来ます。

 

注意

「CSShakeを呼び出す設定」が出来ていないと次ページからご紹介するボタンアニメーションが動きません。

間違えないようにリンクを設置しておきましょう!

 

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

次のページへ >



  • この記事を書いた人
  • 最新記事
oyakun

oyakun

30代半ば♂妻・子3人の5人で日々激戦中。Google app script&VBA初心者が自分の備忘録を兼ねて「スプレッドシート、Excel、WordPress、plugin」の設定等、主にブログやアフィリエイト周辺のtipsを背伸びしながらご紹介しています。

-WordPressの設定
-, , , , , , ,

Copyright© OYAKUDACHI.XYZ , 2018 All Rights Reserved.