wildhawk
WordPressのショートコードで
アニメーションを使った動きのあるWebページにしよう
アニメーションを使った動きのあるWebページにしよう
「Shortcodes Ultimate」のアニメーション
WordPressで動きのあるWebサイトを作る場合、CSSやJavaScriptを使う方法がありますが正直、覚えることも多く、設置や調整も面倒なため、諦めている方も多くいると思います。
そこで今回は、CSSやJavaScriptを書くことなく、WordPressでタイトルや画像を動かし、勢いのあるサイトにする無料プラグイン「Shortcodes Ultimate」を使い、簡単にアニメーションを設置する手順を詳しく解説いたします。
「Shortcodes Ultimate」のインストールはこちらをご確認ください。
こんな人にオススメ
WordPressで動きのあるサイトを簡単に作りたい
WordPressで他とは異なるデザインのサイトにしたい
WordPressで目立つサイトを作りたい
CSSやJavaScriptを覚えるのは面倒。。。でもセンスの良いデザインのサイトは作りたい。そんな方にショートコードのアニメーションはオススメ
WordPressで動きのあるサイト（アニメーションやインタラクティブな動きのあるデザイン）を作る方法はいくつかあります。
- アニメーション対応のテーマを使う（初心者向け）
- アニメーション系プラグインを使う（ノーコード）
- カスタムCSS/JavaScriptを使う（中〜上級者向け）
- アニメーションGIF画像を使う
- 動画・背景アニメーションを使う
それぞれの方法について説明します。
WordPressのプラグインを使って動きのあるサイトを作る方法です。それぞれのプラグインで出来ることが異なります。
WordPressでアニメーションが仕えるプラグイン
| プラグイン | 主な機能 |
|---|---|
| Shortcodes Ultimate | 色々なアニメーションを作れます 詳しくはこの後、説明します。 |
| Animate It! | スクロールやホバーでアニメーションを追加できる |
| WPBakery Page Builder | 要素ごとに動きの設定ができるビルダー |
| Elementor（無料/Pro） | 動きや効果をドラッグ＆ドロップで簡単に追加できる有名なビルダー |
WordPressのテーマやプラグインを使わず、自力でCSSやJavaScriptを使い、動きのあるサイトにする方法です。
複雑な動きのサイトも作りことが可能になりますが、まずは簡単なコードから初めて、色々と試して経験を積む必要があります。
マウスオンで画像が拡大するCSSの例
See the Pen css/fade-in by wildhawk (@hezfscev-the-looper) on CodePen.
アニメーションGIF（ジフ）とは、複数の画像（フレーム）を連続して再生することで、動いているように見せる画像形式のことです。動画よりも容量が軽く繰り返し表示できるので、手軽に動きのあるサイトができます。デメリットは画質があまり良くないことです。画質を上げることも可能ですが、ファイル容量が大きくなるので、画質を求めたり、長い動画を使うならMP4などの動画が適しています。
私はAdobe Photoshopで昔から作っているが、コマ毎に画像を作ってタイムラインに並べるのは、結構面倒なので、最近だとCanvaなどで作る方法をオススメします。
背景にYouTubeやMP4ファイルなどの動画を埋め込む方法です。
埋め込み方法は、テーマによっては設定で簡単に埋め込むことができ、プラグインでも対応することが可能です。もちろんCSSで埋め込む方法もあります。
ショートコードは、エディタのHTMLに、以下の様なコードを入力することで、実行することが可能です。
[su_animate type="bounceIn" duration="1"]Animated content[/su_animate]
Animated content
| type | アニメーションの種類を設定（動きを見たいときはブラウザを再読み込みしてね）
Default value: bounceIn |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| duration | アニメーションの長さを0〜20秒で指定 Default value: 1 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| delay | アニメーションのスタートを0〜20秒で指定 Default value: 0 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| inline | 「yes」を指定すると、アニメーションの要素をDIVではなくSPANでラップします。ボタンなどのインラインアニメーションで利用します。 Default value: no |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| class | class属性を設定 |
今回はWordPressで動きのあるサイトを作る方法を紹介し、具体的な方法として無料プラグインの「Shortcodes Ultimate」のアニメーションの設定方法について説明しました。
ただ、アニメーションの数が多いので、こちらのサイトを参考に使っていただければ幸いです。
どうしてもWebサイトは、印刷物のように文章と画像が並ぶだけになってしまうので、ワンポイントで動きがあると、読む人が飽きずに読んでくれると考えています。（私のサイトは多すぎると言われる）
個人的にパララックスデザインを使っているサイトは意識が高いように感じていたので、WordPressのテーマ「Customizr」を使って、このサイトを作りました。ただ、最近は他のテーマでもパララックスデザインが使えるようになったので、パララックスデザインが一般的になったと感じています。
素材サイトのご紹介
このサイトでも活用しているオススメの素材サイトです。
是非こちらのバナーからご利用ください。
wildhawkからも写真素材を提供しています。是非ご活用ください