このdtn.jp運営ブログでは、WordPressテンプレートに「emanon Free」を使っています。

無料版ということで、有料版の「emanon Pro」と比べると機能制限のカギマークがけっこう見られますが、無料でこれだけデザインされていればこのブログでは十分だと思ってかれこれ何年も使っています。単に変えるのが面倒という理由もありますけど。

そんな「emanon」にはアニメーションの機能が基本で備わっていました。

Emanonテーマは、wow.jsを使用しており、classに”wow アニメーション名”を指定することで動きを演出できます。

要素にアニメーションを追加したい。 WordPressテーマ Emanon[エマノン]

wow.jsは、アニメーションをCSSのclass指定をするだけで簡単に実現できるjavascriptのライブラリになります。

<img width="350" height="350" src="dtnjp_350x350.jpg" class="wow fadeInLeft animated infinite slower">

たったこれだけでヌルヌルと動かせます。emanonだと記事内に置いたカスタムHTMLでもこのように動かすことができます。

さすがにループしていると邪魔ですね。

dtn.jp運用ブログのトップページを見てもらうと、3個の人気記事を表示する部分がじわっとフェードインしていますが、これもwow.jsを使って実現されています。

そのトップページのフェードイン、最近ブログの更新が増えたために見る機会が増えたことも原因でしょうが、とにかくじわっとするのが遅すぎることが気になるようになっていました。

そこで、これを強引に変更してみた方法をご紹介したいと思います。

emanonテーマのカスタマイズ項目を見てみましたが、アニメーションのON/OFFはあったものの、こんなフェードインの速度設定をする箇所があるわけはありません。

そこで、Chromeで該当箇所のHTMLを見てみると、wowのclass指定がこんなコードでされていることが分かりました。

<ul id="featured-slider" class="featured-list wow fadeInUp slick-initialized slick-slider" data-wow-delay="0.4s">

data-wow-delayに0.4sとの設定があります。

data-wow-delayは表示領域に入ったら指定した秒数だけ遅らせて表示開始する設定ですので、この0.4秒のタイムラグが遅いと感じる原因のようです。

これを更に短くすればイケそうです。

標準のカスタマイズ項目にはないので、テーマエディタでphpを直に修正しようと思って探したところ、かなり奥底にphpが置かれていました。

/lib/modules/sections/section-top-featured.php※テーマphpの直接修正はWordPress破壊の可能性があるのでご注意ください。

奥深くのphpに”0.4s”がありました

この0.4s0.1sに変えてみたところ、フェードインも気にならない程度にふわっとでてくれるようになりました。最近またブログ更新が楽しくなってたので、これでまた更新がはかどりそうです。

興味がわいた方はwow.jsも付いた「emanon Free」でヌルヌル動くブログを作ってみてはいかがでしょうか。セレブの人はemanon Pro版でいきなりどうぞ。