『Shortcodes Ultimate』プラグインでアッという間に簡単アニメーション

スポンサーリンク

ちょっとだけ、テキストや画像に動きを付けて目立たせたい!

そんな時、CSSなどの知識が無くても超簡単にアニメーション化できちゃうオススメのプラグイン『Shortcodes Ultimate(ショートコード アルティメット)』です。

『Shortcodes Ultimate』はスゴイよ♪

このShortcodes Ultimateは、WordPressで使いたい装飾が、CSSの知識がなくても簡単に導入することができる、もの凄く便利で優秀なプラグインで

機能がめっちゃ豊富、見出し、リスト、アコーディオン、ボックス、タブ、などの囲み枠や、画像をスライド表示する機能など・・・まだまだあって紹介できないくらいです。

今回は画像やテキストに、ちょっとだけアクションを加えて、ここぞというところで目立たせたいんだ!できればカンタンに!という方へ向けて

『Shortcodes Ultimate』を使って、文字や画像を簡単にアニメーション化する仕方を紹介します。

スポンサーリンク

Shortcodes Ultimate プラグインをインストール

  • 『Shortcodes Ultimate』をインストールして有効化にすると、記事投稿の編集画面(固定ページ含む)に ショートコードを挿入 ボタンが追加されればインストール完了です。

「ショートコードを挿入」ボタン

テキスト(文字)にアニメーションをつける

テキストエディタも、ビジュアルエディタも同じよに『Shortcodes Ultimate』でアニメーション機能を使うことができます。ここではビジュアルエディタで説明していきます。

「ショートコードを挿入」ボタン

  • ショートコードを挿入 ボタンを押すとメニューが開くので、一覧から「アニメーション」を選びます。

アニメーション

  • 設定画面でお好みのアニメーション種類や表示時間を決めていきます。

アニメーション 設定

  • アニメーションの種類(全61種類) 《動きは下記参照して下さい。》
  • 持続時間=動きを表示させたい秒数。スライドバーか右端の上下矢印で決定します。

アニメーション 設定

  • 遅延=アニメーション部分が画面に表示されてから、アクションが起こるまでの時間です。※あまり遅くすると(数値を大きく)気付かれないうちに、スクロールされてしまう可能性も!
  • コンテンツに、アニメーションしたいテキストを入力します。※予め入力したテキストを選択した状態でショートコードを挿入 ボタンを押してもOK。
  • 動きを確認したい場合は ライブプレビュー ボタンで確認できます。
  • 最後に左下の緑色のボタン ショートコードを挿入 をクリックして下さい。

アニメーション テキスト

このように、記事本文入力欄にショートコードが挿入されます。

※わかりやすくテキストを赤色にしましたが、ここで文字を入力したり変更することも可能です。

ブラウザでプレビューして動きを確認してみましょう。

写真やイラストにアニメーションをつける

  • 画像をメディアライブラリに予め追加しておくと便利です。

メディアライブラリ

  • 画像を表示したい場所でショートコードを挿入 ボタンを押し、お好みのアニメーション、持続時間、遅延を選び、コンテンツを空欄にしたら、左下の緑色のボタン ショートコードを挿入 をクリックします。

アニメーション 画像

  • 記事本文入力欄にショートコードが挿入されるので、開始と終了の間にカーソルを移動します。

アニメーション 開始・終了

  • 「メディアを追加」から画像を選んで投稿に挿入し、ブラウザで動きを確認します。

メディア 追加

スポンサーリンク

よく使う設定を保存しておく

よく使うアニメーションの設定などは、プリセットとして保存しておくと便利です。

  • アニメーション設定画面で右下の「プリセット」ボタンをクリックします。

プリセット

  • 「現在の設定をプリセットとして保存」を押し、名前を付けたらOKで保存します。

プリセットとして保存

保存

まとめ

『Shortcodes Ultimate』は、カンタンにテキストや画像にアクションを加えることができて、本当に便利ですよね。

あまりアニメーションを乱用すると「ウザイ」と思われ、逆効果になってしまうので注意が必要ですが、、

CSSやHTMLが苦手という方も、そうでない方も!

ここぞという時にアニメーションで目を引いてみてはいかがですか?

「蛍光ペン」っぽいアンダーラインマーカーで文字を装飾する
「明るい色」「パステル系の淡い色」「モノトーン」「ダーク」のアンダーラインマーカー(蛍光ペン)を作りました。記事を差別化したりテーマやスキンに合わせて使い分けてみてはいかがですか?スタイルシートにコピペするだけで簡単に使えます。
【CSS】シンプルな囲み枠(ボックス)コピペですぐ使える
飾り枠を使って文中や文末に関連記事・まとめ記事、Pickupなど、さり気なく目立たせたい!シンプルで無難な囲み枠・囲い枠(ボックス)を紹介します。CSS・HTMLをコピペでOK!色や太さをお好みでカスタマイズして使って下さいね。新作『黒板風(チョーク付)』と『ホワイトボード風(マーカー付)』自分で作っておいてナンですが…気に入ってます(笑)
トップへ戻る
タイトルとURLをコピーしました