ワードプレスで文字も画像も動く。アニメーション全種類のデモ！プラグインShortcodes Ultimate。 | アトリエクレフ

大変便利なワードプレスのショートコードですが、このショートコードだけで多種多彩な表現が可能なプラグインを紹介します。

プラグインのインストール

導入の仕方は簡単で、プラグインの新規追加から「Shortcodes Ultimate」を検索してインストール＞有効化だけで使えるようになります。
もちろん、上記サイトからダウンロードしてインストールでもできます。

ショートコードでなんと50種類もの事ができる！

表題のアニメーションはShortcodes Ultimateで使えるたくさんの機能の中の一つで、その他にも重宝するものがありますので、是非導入したいですね。

数あるものの中から、超便利なものを少し紹介します。

ボタン

例えばボタンも一発でできてしまいます。

ボタンが簡単に！

実際のショートコードです。

[su_button url="https://hp-clef.com" target="self" style="default" background="#2D89EF" color="#FFFFFF" size="3" wide="no" center="no" radius="auto" icon="icon: hand-peace-o" icon_color="#FFFFFF" text_shadow="none" desc="" onclick="" rel="" title="" id="" class=""]ボタンが簡単に！[/su_button]

入力したのはボタンに表示される文字と「size=”3″」のサイズを６にしただけです。ボタンの色や、大きさ、リンク先など自由に設定できるので、重宝します。

url:リンク先、background：ボタンの色、color：文字の色、size：ボタンの大きさ等設定可能。もっと簡単にカスタマイズしたい場合は、専用の設定画面も用意されていますので、初心者の方にも非常に使いやすいです。

超簡単に設置ができる

このプラグインをインストールすると、記事の編集画面のツールバーに「[ ]ショートコードを挿入」というボタンが追加されますので、そこから挿入したいものを選ぶと詳細な設定画面が表示されます。

この設定画面で各項目を設定していくだけで、自動的にショートコードが出力されますので、とても簡単にボタンを設置出来ます。

アコーディオン

ショートコードで簡単にアコーディオンが実装できます。最近はスマホで見られることが多くなったホームページ、ブログは油断して文章を書いてしまうとスマホで見た時に「文字まみれ」なことがよくあります。
そんな時にアコーディオンは有効ですね。

ただ、デフォルトではバーに色がついていないので、少し手を加えます。プラグインの設定画面にCSSを追加できますので、下記を追加しています。

このプラグインをインストールするとダッシュボードのメニューに現れる、ショートコード→設定にある「Custom CSS code」に次のスタイルを追加しています。

.su-accordion .su-spoiler {
  margin-bottom: 1.1em;
}
.su-spoiler-title {
background-color: #870002;
border: 1px solid #A43247;
color: #fff;
  border-radius:6px !important;
-webkit-border-radius:6px !important;
-moz-border-radius:6px !important;
    font-weight: bold;
  font-size: 16px;
}

.su-spoiler-title:focus {
  outline: currentColor thin;
}

アニメーション効果 全種類ご紹介！

アニメーション効果は、見ている人の注意を引くことができますので、様々なサイトで様々な種類のアニメーション効果が使われています。

最近は、インターネットでホームページやブログを見ていると必ず目にするまでになっていますね。

そんな文字や画像が動くアニメーション効果をご自身のホームページやブログでも使いたいと思う方には朗報です。

このShortcodes Ultimateを利用すれば、超簡単にアニメーション効果を使えるようになります。

実際のショートコードはこんな感じです。下のサンプルの一番最初の「flash」のショートコードですが、「flash」という文字を開始タグと終了タグで挟みます。

[su_animate type="flash" duration="3" delay="0" inline="no" class=""]<!--◀開始タグ -->
flash<!--◀アニメーション効果を加えたい文字や画像等 -->
[/su_animate]<!--◀終了タグ -->

このアニメーション効果は文字だけでは無く、画像や要素にも使えます。

下のサンプル文字は、ショートコード内のtype（アニメーションの種類）の文字です。参考にしてください。

ここからは、ゆっくりとスクロールして下さい。アニメーション効果を見逃したらその場で再読込すると見られると思います。

通常のアニメーション効果

全てduration=”3″ delay=”0″に設定

画面に現れるアニメーション効果

画面から消えるアニメーション効果

全てduration=”3″ delay=”1″に設定

いかがでしたでしょうか？ワードプレスをお使いの方も多いと思いますが、視覚的に効果のあるアニメーション等を簡単に導入できるのは、嬉しいですね。

簡単に導入できますので、是非お試しあれ！

※ 実績記事での会社名・店舗名等の記載について
ご依頼者様の会社名や店舗名等は、検索サイトでの検索結果に影響するため記載しません。予めご了承下さい。