【Shortcodes Ultimate】プラグインで文字や画像をアニメーションさせよう

こんにちは、ふわりゆらりのakiです。
aki
このように、視覚的にユーザーに訴える装飾をすると言うのもいいかも。
ただのテキストばかりのブログよりも、少し遊びを効かせた記事の方が、書き手にもユーザーにも楽しめるのではないかと思いますね。
ということで、今回は「Shortcodes Ultimate」というプラグインの紹介です。
色んな機能満載のプラグインなのですが、今回は「アニメーション」についての説明です。
「Shortcodes Ultimate」インストールから有効化
ダッシュボードのプラグインから「新規追加」をクリックします。
キーワードにShortcodes Ultimateと入力します。
Shortcodes Ultimateが表示されたら「今すぐインストール」をクリックします。
インストールが完了したら「有効化」をクリックします。
これで「Shortcodes Ultimate」の導入と有効化の完了です。
スポンサーサイト
文字にアニメーションをつける
「Shortcodes Ultimate」のインストールと有効化ができていると、記事投稿画面に「ショートコードを挿入」という項目ができていると思います。
記事中にアニメーションを入れたい場所を選択し、「ショートコードを挿入」をクリックします。
次の画面にある「アニメーション」をクリックします。
するとこのような画面が現れます。
- アニメーション・・・ここで、アニメーションの選択ができます。
- 持続時間・・・この数値をスライドで変更します。アニメーションの持続する時間を変更します。1.5~3.0くらいまでがお勧めです。
- 遅延・・・文字や画像が表示されてから何秒後に動かすかという設定ができます。あまり遅くするとスクロールされてしまいます。0.5~2.0くらい。
「アニメーション」の▼をクリックして、アニメーションを選択します。
英語表記なので、分からない場合は、「ライブプレビュー」をクリックしましょう。
すると、プレビューが現れて、選んだアニメーションの動きか確認できます。
アニメーションが決まったら「ショートコードを挿入」をクリックします。
記事にアニメーションのコードが挿入されます。
文字の部分を削除して、文字を入力します。
そのままではアニメーションが見れないので「プレビュー」をクリックして確認してください。
これで、文字にアニメーションをつける方法は完了です。
先に文字を入力して、その文字をマウスで選択した状態にして、アニメーションを挿入することもできます。
画像にアニメーションをつける
画像も基本的に、文字と同じです。
先ほどのように、アニメーションをを選択してコードが挿入されたら文字の部分を削除して「メディアを追加」をクリックして好きな画像を選択して挿入しましょう。
画像のURLをコピーして貼り付けでも大丈夫です。
「メディアを追加」画面の添付ファイルの詳細にあるURLをコピーして貼り付けでOKです。
これでアニメーションの説明は完了です。
まとめ
「Shortcodes Ultimate」というプラグインは、非常に多機能で便利です。
今回はアニメーションについての説明だけでしたが、便利なので是非使ってみてください。
記事を書くのが楽しくなればいいですね。
ここまでお疲れ様でした。
動きがあると、つい目が行っちゃうね
aki