WPワークス

ダウンロードコンテンツやワードプレスのカスタマイズ方法を配信中。

テーマ「ShapeShifter」☓ プラグイン「Magic Template Holder」の組み合わせ術1

両方僕が作成したテーマとプラグインですが、自分で使ってもいるので、実践しながら覚えた便利な使用方法について紹介します。

既に利用されている方もいらっしゃるかもしれませんが、このプラグインは保存したテキストを簡単にエディターに貼り付けたりすることが出来るコンテンツ編集用のプラグインで、広告なども簡単にストックできますから人によって使い方は様々です。

ただ、テーマ「ShapeShifter」と一緒に使用することで便利な使い方も出来るので、他のテーマでは使わない方法を紹介してみようと思います。

今回はCSSアニメーションについてです。

アニメーション付きのHTMLタグをストック

テーマ「ShapeShifter」では、テーマカスタマイザーの設定で「見出し」や「テキスト」、「イメージ」などにCSSアニメーション効果を付けるが出来ます。

ただ、実はコンテンツ内のHTMLに直接CSSアニメーション用の属性値を書き込むことで、そちらの設定が優先されますので、部分的にCSSアニメーションで動きを付けることが出来るんです。

テーマ「ShapeShifter」で採用しているCSSアニメーションで動かす仕組みについては「スクロールして徐々にテキストを表示する方法」を参照してください。

Magic Template Holder 下から上にスライド・インする見出し(H2)
Magic Template Holder 下から上にスライド・インする見出し(H2)
フェイド・インするパラグラフ
フェイド・インするパラグラフ

ですので、プラグイン「Magic Template Holder」では、右のようにストックしておきます。

この真下に右の2番目のスクリーンショットにある「フェイド・インするパラグラフ」を貼り付けます。分かりやすいように色を付けました。

「フェイド・イン」するパラグラフ

このように一度作成しておけば、使いたいタグを簡単に貼り付けるだけでCSSアニメーション付きで出力できますので、いくつかのタグのセットにしてストックしておけば便利ですよ。

テーマ「ShapeShifter」でのCSSアニメーション付きHTMLの書き方

覚えれば非常に簡単です。そして、一度ストックしてしまえばマウス操作で簡単に貼り付け可能ですから、寧ろ覚える必要さえありません。

ホバーには「hover-animated」クラスを与えて「data-animation-hover」属性値にアニメーション名を指定します。スクロール時に入ってくるアニメーションは、「shapeshifter-hidden enter-animated」クラスを与えて「data-animation-enter」属性値にアニメーションを指定します。

ええ、これだけです。

注意点としては「DIV」タグに使用する場合、コンテンツ内では「DIVタグ内のDIVタグ(CSSセレクターで言う「div div」)」にクラスなどを与えても作用しないことです。JavaScriptでそれらは対象外にしていますので、少なくともテーマ「ShapeShifter」のバージョン1.0.18では、アニメーションが反映されなくてもエラーではないと記しておきます。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

メニュ
ホーム
トップへ