WordPressでアニメーションボタンやバナーが簡単にできる方法と作り方

たまにブログやLPで見かける動くボタンやバナー、「なんだこれ！？」って気になってしまった経験はありませんか？
ページを読み進めてゆく中で、突然動くものがあると注目度が上がり、思わずクリックしてしまいたくなりますよね。

ボタンやバナーは、ただ設置しただけはクリックがなかなかされない為、目立たせることでクリック率が何倍にも上がります。
大切なことは『知ってもらう事』なんです。僕も実際に目立たせたことでメルマガの登録率が3倍に増えた経験があるので、かなりおすすめな方法です。

カスタムや専用のボタンもあるのですが・・・「もっと簡単にやりたい！」と言う方に向けて今回はそのやり方を解説します！

こんな悩みを抱えているあなたに！

↑こういうのが簡単にできますよ！

なお、ブログで集客をしたい方に向けて以下の記事で詳しく解説していますので、ぜひ併せてご活用ください！

筆者情報

Unlimited Potential代表佐藤旭
ブログ・Webメディア集客の専門家 / 書籍「UP-BLOG」著者（厚有出版）

広告収益のみを狙う「ブロガー型メディア」ではなく、同一ブログ上にて物販・コンテンツ販売・自社オンラインサロン販売・自社コンサルティングサービス販売を多面展開する「集客用資産メディア」の構築を個人・法人クライアントに指導するこの道10年の専門家。

この記事の目次

アニメーションはプラグイン『Shortcodes Ultimate』で作れます！

アニメーションをさせる為には『Shortcodes Ultimate』というプラグインを使います。
WordPressダッシュボードの『プラグイン』⇒『新規追加』で下図のような画面に切り替わります。

プラグインの設定は以上となります。
後は実際にアニメーション表示させたいところにこれから解説をする方法で設定を行えばすぐにできます！

では、早速アニメーションをさせてみましょう。
アニメーション出来るものはのは以下の3通りです。

今回はサンプルで以下の画像をアニメーションさせてみます。
文字の場合も同じ操作となります。（違いはアニメーション対象が文字か画像かの違いだけです。）

まずは、画面の上に『ショートコード』のボタンが新しく追加されているのでそこをクリックします。

このような画面が表示されます。

主に操作をするのは以下のものです。

基本的に各項目には説明がついています。
また、『プレビュー』機能がついてるので、記事内挿入前に事前に確認ができます！

すると、以下の様な表示なりますのでショートコードの間に『メディアを追加』より、アニメーションさせたい画像を挿入します。
*アニメーションの種類や持続時間・遅延の設定でコードの表示内容は変わります。

これで以下のようになります！

因みに、リンクを貼りたい場合は通常通りに

この手順で行えます！

では次に以下の様に注目度の高いアニメーションするボタンを簡単に作る方法です！

まずは、画面の上に『ショートコード』のボタンが新しく追加されているのでそこをクリックします。

このような画面が表示されます。

主に操作をするのは以下のものです。

すると、以下の様な表示なりますので続いてこのショートコードの間にボタンのショートコードを入れます！
このように、ボタンを設置するところで再び『ショートコードを挿入』をクリックしてください。

基本的に画面に表示されている説明ままなので、特に操作は難しくないはずですが、以下の所は解説をしておきます。
また、『プレビュー』機能がついてるので、記事内挿入前に事前に確認ができます！

アイコン：ボタンにアイコンを入れる事が出来ますが、アイコンでも、指定した画像でもどちらでも設定できるのが最大の特徴です。
中央：画面中央にボタンを設置したいときは、ここを『はい』にします。もし後から追加したい場合は『center=”yes” 』をコードの中に追記すればOKです。
rel 属性：外部リンクであれば基本的に『nofollow』を入力しておいてください。