大変便利なワードプレスのショートコードですが、このショートコードだけで多種多彩な表現が可能なプラグインを紹介します。
プラグインのインストール
導入の仕方は簡単で、プラグインの新規追加から「Shortcodes Ultimate」を検索してインストール>有効化だけで使えるようになります。
もちろん、上記サイトからダウンロードしてインストールでもできます。
ショートコードでなんと50種類もの事ができる!
表題のアニメーションはShortcodes Ultimateで使えるたくさんの機能の中の一つで、その他にも重宝するものがありますので、是非導入したいですね。
ショートコードとは?
ショートコードとは、様々な動作や表現を別のファイルで予め作っておき、それを短いブラケットを用いたコードで投稿や固定ページに呼び出すことができる機能です。
例:[short_code atelier_clef] [/atelier_clef]←こんなやつ
ショートコードは通常 [と]で書きます。前のほうが開始タグ、後ろが終了タグです。
数あるものの中から、超便利なものを少し紹介します。
ボタン
例えばボタンも一発でできてしまいます。
ボタンが簡単に!
実際のショートコードです。
[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″」のサイズを6にしただけです。ボタンの色や、大きさ、リンク先など自由に設定できるので、重宝します。
url:リンク先、background:ボタンの色、color:文字の色、size:ボタンの大きさ等設定可能。もっと簡単にカスタマイズしたい場合は、専用の設定画面も用意されていますので、初心者の方にも非常に使いやすいです。
超簡単に設置ができる
このプラグインをインストールすると、記事の編集画面のツールバーに「[ ]ショートコードを挿入」というボタンが追加されますので、そこから挿入したいものを選ぶと詳細な設定画面が表示されます。
この設定画面で各項目を設定していくだけで、自動的にショートコードが出力されますので、とても簡単にボタンを設置出来ます。
アコーディオン
ショートコードで簡単にアコーディオンが実装できます。最近はスマホで見られることが多くなったホームページ、ブログは油断して文章を書いてしまうとスマホで見た時に「文字まみれ」なことがよくあります。
そんな時にアコーディオンは有効ですね。
アコーディオン1
アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ
アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ
アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツ、アコーディオン1のコンテンツです。
アコーディオン2
アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ
アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ
アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツ、アコーディオン2のコンテンツです。
アコーディオン3
アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ
アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ
アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ、アコーディオン3のコンテンツ。
ただ、デフォルトではバーに色がついていないので、少し手を加えます。プラグインの設定画面に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″に設定
flash
bounce
shake
tada
swing
wobble
pulse
flip
画面に現れるアニメーション効果
flipInX
flipInY
fadeIn
fadeInUp
fadeInDown
fadeInLeft
fadeInRight
fadeInUpBig
fadeInDownBig
fadeInLeftBig
fadeInRightBig
slideInDown
slideInLeft
slideInRight
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
lightSpeedIn
bounceIn
bounceInDown
bounceInUp
bounceInLeft
bounceInRight
rollIn
画面から消えるアニメーション効果
全てduration=”3″ delay=”1″に設定
bounceOut
bounceOutDown
bounceOutUp
bounceOutLeft
bounceOutRight
rollOut
flipOutX
flipOutY
fadeOut
fadeOutUp
fadeOutDown
fadeOutLeft
fadeOutRight
fadeOutUpBig
fadeOutDownBig
fadeOutLeftBig
fadeOutRightBig
slideOutUp
slideOutLeft
slideOutRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
lightSpeedOut
hinge
同プラグインで作ったコンテンツ
この水色の枠の部分は「ボックス」で作っていて、そのボックスにアニメーション効果を加えています。
いかがでしたでしょうか?ワードプレスをお使いの方も多いと思いますが、視覚的に効果のあるアニメーション等を簡単に導入できるのは、嬉しいですね。
簡単に導入できますので、是非お試しあれ!
※ 実績記事での会社名・店舗名等の記載について
ご依頼者様の会社名や店舗名等は、検索サイトでの検索結果に影響するため記載しません。予めご了承下さい。