Shortcodes UltimateプラグインでWordPressのサイトに動きを【文字と画像を動かす】
WordPressのサイトで運営している際に、他のサイトのように文字が動く、オシャレなサイトにしたいと思ったことがありませんか？
WordPress本来には、そのような文字に動きのあるアニメーション機能をつける場合はCSSやJSなどの知識が必要です。
ですが、そのような知識がなくても簡単に導入できる【Shortcodes Ultimateプラグイン】をご紹介します。
Shortcodes UltimateプラグインでWordPressのサイトにもっと動きを
Shortcodes UltimateプラグインとはWordPressのサイトの文字や画像にショートコードで簡単にアニメーションをつけることできます。
Shortcodes Ultimateプラグインを使えば、オシャレで動きのあるサイトを作ることができます。
Shortcodes Ultimateプラグインを導入方法
Shortcodes Ultimateプラグインを導入するにはWordPressのプラグインで、Shortcodes Ultimateを検索します。
Shortcodes Ultimateのプラグインをインストールし、有効化するだけで導入できます。
※導入する前に必ず一度バックアップすることをお勧めします。
Shortcodes Ultimateのプラグインの使い方【文字を動かす方法】
Shortcodes Ultimateプラグインを有効化にすると、記事の編集画面のツールバーに [ ]ショートコードを挿入 というボタンが追加されます。
ショートコードを選択し、上記の【 】のようなマークをクリックします。
詳細なアニメーション機能の選択画面が出ます。アニメーション機能は50種類以上と豊富です。
ほぼ、欲しい動きのアニメーションが備わっていると思います。
アニメーション以外の機能も豊富です。
文字を動かす
試しに文字を動かしてみます。
定番のフェードインアップやフェードインダウンもあります。
内容というところに動かしたい文字を入力します。ライブプレビューでどんな感じになるか確認もできます。
あとはショートコードを挿入というボタンを押すだけで動きのある文字が完成します。
[su_animate type="fadeInUp" duration="3"]もっとサイトをオシャレに[/su_animate]
[su_animate type="fadeInDown" duration="3"]もっとサイトをオシャレに[/su_animate]
[su_animate type="fadeInLeft" duration="3"]もっとサイトをオシャレに[/su_animate]
[su_animate type="fadeInRight" duration="3"]もっとサイトをオシャレに[/su_animate]
[su_animate type="fadeInUpBig" duration="3"]もっとサイトをオシャレに[/su_animate]
[su_animate type="pulse" duration="3"]もっとサイトをオシャレに[/su_animate]
その他にも時間の調整なども可能です。
他にもいろいろあるので、ぜひ文字にアニメーションをいれて動きのあるサイトにしたい場合は試してみてください。
ただこちらのショートコードで文字を大きくしたい、文字色を変更したい場合はちょっとしたCSSの知識が必要そうです。
下記のようにCSSを少しいじれば文字をおおきくしたり色をつけたりもできます。
[su_animate type="fadeIn" duration="3" delay="1" class="custom"]いろいろアレンジもできます。[/su_animate]
画像を動かす
ショートコードで画像を挟むとどうやら画像にもアニメーションの効果がつけらるようです。
試しに、弊社ASX株式会社公式キャラクターのコーギューにアニメーションをつけてみました。
フェードイン
[su_animate type="fadeInUp" duration="5" delay="0.5"]
[/su_animate]
フェードインレフト
[su_animate type="fadeInLeftBig" duration="4" delay="0.5"]
[/su_animate]
フェードインアップビック
[su_animate type="fadeInUpBig" duration="3"]
[/su_animate]
ぜひ、サイトの文字や画像を動かしてみたい方は試してみてください。
動かすだけでなく他にもいろいろ機能があるので、そちらも試してみるとデザインが広がります。
