テーマ「ShapeShifter」☓ プラグイン「Magic Template Holder」の組み合わせ術１
両方僕が作成したテーマとプラグインですが、自分で使ってもいるので、実践しながら覚えた便利な使用方法について紹介します。
既に利用されている方もいらっしゃるかもしれませんが、このプラグインは保存したテキストを簡単にエディターに貼り付けたりすることが出来るコンテンツ編集用のプラグインで、広告なども簡単にストックできますから人によって使い方は様々です。
ただ、テーマ「ShapeShifter」と一緒に使用することで便利な使い方も出来るので、他のテーマでは使わない方法を紹介してみようと思います。
今回はCSSアニメーションについてです。
アニメーション付きのHTMLタグをストック
テーマ「ShapeShifter」では、テーマカスタマイザーの設定で「見出し」や「テキスト」、「イメージ」などにCSSアニメーション効果を付けるが出来ます。
ただ、実はコンテンツ内のHTMLに直接CSSアニメーション用の属性値を書き込むことで、そちらの設定が優先されますので、部分的にCSSアニメーションで動きを付けることが出来るんです。
テーマ「ShapeShifter」で採用しているCSSアニメーションで動かす仕組みについては「スクロールして徐々にテキストを表示する方法」を参照してください。
ですので、プラグイン「Magic Template Holder」では、右のようにストックしておきます。
この真下に右の２番目のスクリーンショットにある「フェイド・インするパラグラフ」を貼り付けます。分かりやすいように色を付けました。
「フェイド・イン」するパラグラフ
このように一度作成しておけば、使いたいタグを簡単に貼り付けるだけでCSSアニメーション付きで出力できますので、いくつかのタグのセットにしてストックしておけば便利ですよ。
テーマ「ShapeShifter」でのCSSアニメーション付きHTMLの書き方
覚えれば非常に簡単です。そして、一度ストックしてしまえばマウス操作で簡単に貼り付け可能ですから、寧ろ覚える必要さえありません。
<p>通常のパラグラフ（テーマカスタマイザーで設定済みであれば、そちらが反映される）</p> <p class="hover-animated" data-animation-hover="アニメーション名">ホバー時にアニメーション効果のあるパラグラフ</p> <p class="enter-animated shapeshifter-hidden" data-animation-enter="アニメーション名">スクロール時にアニメーション付きで入ってくるテキスト</p> <p class="hover-animated enter-animated shapeshifter-hidden" data-animation-hover="アニメーション名１" data-animation-enter="アニメーション名２">両方のCSSアニメーション効果を持つパラグラフ</p>
ホバーには「hover-animated」クラスを与えて「data-animation-hover」属性値にアニメーション名を指定します。スクロール時に入ってくるアニメーションは、「shapeshifter-hidden enter-animated」クラスを与えて「data-animation-enter」属性値にアニメーションを指定します。
ええ、これだけです。
注意点としては「DIV」タグに使用する場合、コンテンツ内では「DIVタグ内のDIVタグ（CSSセレクターで言う「div div」）」にクラスなどを与えても作用しないことです。JavaScriptでそれらは対象外にしていますので、少なくともテーマ「ShapeShifter」のバージョン1.0.18では、アニメーションが反映されなくてもエラーではないと記しておきます。
