WordPressで簡単に『テキスト』や『画像』をアニメーション表示させる方法!

記事を書いていると、他のサイトと差別化したいときってありますよね。

今日はWordpressでテキストや画像をアニメーション表示させる超簡単な方法を書いていきます。

他のサイトやブログと差別化したいときに是非利用してみてください。それではさっそく解説していきます。



Shortcode Ultimate

『Shortcode Ultimate』というプラグインを使います。

これは記事を書くときに様々な効果や表示方法を簡単に挿入することができる超優れものです。

内容はこんな感じで、画像のスライダー表示カルーセル表示youtubeリンクの挿入を細かく設定できたり、投稿記事一覧を表示させたりと、様々なものが簡単に表示出来てしまいます。

 

プラグインのインストール方法は、

『プラグイン』>『新規追加』>『Shortcode Ultimate』>『インストール』>『有効化』

プラグインを有効化するだけで準備は完了です。

アニメーション

shortcode ultimateをインストール&有効化できたら、記事投稿画面に『ショートコードを挿入』という項目がでてきます。

こんな感じですね。

『ショートコードを挿入』をクリックすると項目一覧が出てきますので、この中の『アニメーション』というのを使います。

赤枠の『アニメーション』をクリックすると、下記のようなポップアップが表れるので、ここでアニメーションの『種類』『持続時間』『遅延時間』『テキスト』を設定してあげるだけで完了します。

 

【アニメーション】

>アニメーションの種類

【持続期間】

>指定したアニメションが持続している時間

【遅延】

>指定箇所が画面に現れた際に、何秒後にアニメーションを開始するかの設定

【コンテンツ】

>実際にアニメーションさせるテキスト

【ライブプレビュー】

>ここを押すと挿入前にアニメーションを確認しながら選ぶことができます。

 

ポイントはこれくらいで大丈夫です。

アニメーションの例

実際にどんなアニメーションになるか、数パターンだけ試してみます。

 

テキストの場合

 

 

 

 

 

画像の場合

 

 

ここでは数パターンしか紹介していませんが、アニメーションの種類はめちゃくちゃたくさんあります。

こんなにたくさんあります。

例えばページ内のタイトルや見出し、商品画像の表示なんかをアニメーションさせたらユーザー「おっ」となり目にとまります。

色々試しながらお好みのアニメーションを見つけてみてください。

 

以上、テキストや画像をアニメーション表示させる方法でした。