【WordPress】Shortcodes Ultimate【アニメーション】

【WordPress】Shortcodes Ultimateでアニメーションを追加する

 この記事では、プラグイン「Shortcodes Ultimate」を使ってWordPressで作られたサイトにアニメーションを追加する方法を紹介します。

WordPressでサイトを制作する方法はこちら。

Shortcodes Ultimate をインストール

まずはダッシュボードにアクセスしてShortcodes Ultimate をインストールしましょう。ダッシュボードにアクセスするには、独自ドメインの後ろに「/wp-admin」を追加したURLにアクセスします。

プラグインのインストール方法についての詳細はこちら。

アニメーションを追加する

Shortcodes Ultimateをインストールしたら、固定ページや投稿ページのアニメーションを追加したいページの編集画面を開きます。段落に文字を入力して、段落を選択すると段落の上に以下の画像のような「ショートコードアイコン(赤枠)」が確認できます。

この赤枠をクリックします。

すると、以下の画像のように追加可能なショートコード一覧が表示されます。この一覧の中にある「アニメーション」をクリックしてアニメーションをページに追加します。項目「アニメーション」は一番左列の下の方にあります。

「アニメーション」をクリックすると以下のような追加したいアニメーションについての詳細設定が表示されます。

以下で詳細な設定方法についてまとめました。

アニメーション

アニメーションの種類を選択します。以下はフェードインアニメーションの例です。

フェードイン(fadein)のアニメーション例

アニメーションを追加すると自動でショートコードが挿入されます。上記の文字列は、「フェードイン(fadein)のアニメーション例」と表示されているだけですが、編集画面で確認すると以下のようにショートコードが含まれます。

[su_animate type="fadeIn"]フェードイン(fadein)のアニメーション例[/su_animate]

期間

アニメーションが動作する時間を指定します。例えば、期間を3に設定するとアニメーションが始まってから終わるまでに3秒間かかります。以下は期間を3にした例です。

フェードインのアニメーション(期間3秒)

このときのショートコードは以下のようになっています。

[su_animate type="fadeIn" duration="3"]フェードインのアニメーション(期間3秒)[/su_animate]

遅延

アニメーションが始まるまでに必要な時間を指定します。例えば遅延を2秒に設定すると、アニメーションコンテンツが読み込まれてから開始するまでに2秒間のタイムラグが発生します。

フェードインのアニメーション(遅延2秒)

このときのショートコードは以下です。

[su_animate type="fadeIn" duration="0" delay="2"]フェードインのアニメーション(遅延2秒)[/su_animate]

インライン

インラインを設定します。

別のCSSクラス

ショートコードにclass(クラス)を追加します。classと(クラス)は付箋のようなものです。よくわからなければ無視して問題ありません。

内容

アニメーションを追加する内容を記述します。内容欄に記載した文字列に指定したアニメーションが追加されます。なお、文字でなくとも画像にアニメーションを付けることもできます。

ショートコードの使い方

[su_animate type="bounceIn"]アニメーションコンテンツ[/su_animate]

Shortcodes Ultimateのアニメーションは、ショートコードで挟んで使います。

[su_animate type="bounceIn"]

例えば上記のコードを下記のコードの間に文字や画像などのコンテンツを追加することでアニメーションを有効にします。

[/su_animate]

アニメーションのタイプを変更するには

Shortcodes Ultimateで追加できるアニメーションには複数のタイプが存在します。

アニメーションのタイプを変更するには、ショートコードの以下のコードを変更する必要があります。デフォルトでは「bounceIn」に設定されているので、この部分を「flash」などに変更すると別のアニメーションに変更されます。

type="bounceIn"

ショートコードの意味

以下のコードは、アニメーションが継続される時間を表しています。数値が大きいほどアニメーションが終了するまでの時間が長くなります。

duration="1"

以下のコードは、アニメーションが始まるまでの時間を表しています。数値が大きくなるほどアニメーションがスタートするまでの時間が長くなります。

delay="0"

以下のコードは、このアニメーションにclassを追加するコードです。””内に任意のアルファベットもしくは数字を入力することでclassを追加できます。classとは、わかりやすくいうと付箋のようなものです。なれていない方であれば無視してかまいません。

class=""

まとめ

適切にアニメーションをサイトに追加し、サイトを美しく仕上げましょう。