SWELLメインビジュアルにアニメーション付SVGを使ってみた

2023-07-092024-03-17

このブログのホームを見ていただけるとわかるように、メインビジュアルにはSVGのアニメーションを使っています。

これ↓

普通にHTMLでサイトを構築するときにSVGを使うのはなんてことないんですが、WordPressで使うのは結構大変でした。

今回はSVGに振り回されながらどうにかなった、SWELLのメインビジュアルをアニメーション付きのSVGにする方法をご紹介したいと思います。

先に結論から言うと

プラグインでSVGファイルをWordPressにアップロードできるようにする
SVG内に直接CSSだけでアニメーションをつける。js（jQuery）は使えない
メインビジュアル用のブログパーツを作成し、作ったSVGを挿入する

失敗例も載せますがそこを詳しく書いてもしょうがないと思うので、特に画像での説明はなくさらっと書いていきたいと思います。

成功例だけ知りたい方は目次から飛んでください。

どういうアニメーションのSVGを入れたかったか

完成形の通りですが、ブラウザのようなデザインで右半分の文字をタイピングをしているように一文字ずつ表示させたい。

本当はもっとタイピングをしている風に見えるように、カーソルバーとかも入れたかったんですが最終的にこの形になりました。
というのも、あんまり複雑なアニメーションはできなくはないけどめちゃくちゃめんどくさかったからです。

失敗例

SVGの描写（？）部分、js、CSSを別ファイルで作成

まずやったのはSVG、CSS、jsを全て別ファイルで作成するという方法です。

今回作りたかったものは一文字ごとに時間差で表示用クラスを付与する必要があったので、クラス付与の処理をjsで、アニメーションをCSSで書く必要がありました。
いつもweb制作をするときはこの方法を取っているので、自然にこれでやっていました。

SVG内に全て書くこともできるのですが、後々管理が楽（な気がしている）なので私はこうしています。

次にSWELLでメインビジュアル部分に任意のコンテンツを表示したい場合ですが、ブログパーツを作成しそれを差し込むという方法が使えます。

なのでSVGを作成した後「メインビジュアル」というブログパーツを作成、カスタムhtmlでSVGのコードを挿入し、CSSとjsはFTPでテーマフォルダにアップしました。

結果は・・・。

最終的な表示自体は思い通りのものになりましたが、スマホ表示だとなぜかアニメーションの開始までに遅延が発生してしまいました。
（ページが読み込まれて（SVGが表示されて）から3秒後くらいにタイピングアニメが動き始める感じ。）

これだとしばらく半分真っ白な画像が表示されてしまうので、サイトの離脱にもつながります。

これは本当に原因がわからなくて、jQuery側のコードに間違いがないか何度も確認したり、処理の記述方法を変えたりしても改善しませんでした。

またSWELLにはjsの遅延読み込み機能があるのでその設定をいじってみる、jQueryではなくjsのみで書いてみるなどいろいろ試してみたが改善はされませんでした。

本当に行き詰まったのでSWELLフォーラムにも質問を投稿しましたが解決には至りませんでした。

全部乗せSVG（js入りSVG）で試してみた

外部jsの読み込みが遅延の原因だと思ったので、ならSVGに全部入れ込めばいい！とのことでSVGに全部乗せバージョンも試してみました。

SVGにCSSを書くのは結構皆さんやっていると思いますが、実はjsも書くことが出来ますよ！

作ってみた結果、ローカルのブラウザ上でSVGファイルを開くと問題なくアニメーションが動いていました。

ただここで一つ問題があり、WordPressのメディアにはそのままSVGをアップロードして使用することはできないようでした。

理由はセキュリティの問題らしい。今までSVGを使う時はカスタムhtmlで直接コードを記述していたので知りませんでした。

ともかくこのままではせっかく作ったSVGを使うことが出来ないのでなんとかせなあかん！と調べたところ、SVGをアップロードできるようにするプラグインがあるようです。

WordPress.org 日本語

SVG Support 独自の無害化および最小化の処理により、SVG ファイルをメディアライブラリに安全にアップロードします。SVG ファイルをインラインでレンダリングし、スタイリングやアニメ…

こちらは無料で使用でき、特に難しい設定はいりません。
プラグインを有効化して設定は初期のままでOKです。

プラグインをインストール。これでSVGがアップできるようになりました。

しかし全部乗せSVGは無事アップロードが出来てもタイピングアニメ自体表示されず。
確認したところ、入れ込んだjs部分は削除されてしまうのでダメなようです。

成功例

それならば！と最終手段（本当の成功例）

惜しいとこまで来てんな～と思いつつ、次に思いついたのが
「jsを含められないなら遅延アニメーションを全部CSSで手書きすればいいじゃない！」（ヤケクソ）です。

それまでのSVG、js、CSSのコードはこんな感じ（簡略化してます）

<g class="typing">
    <path d="..."/>
    <path d="..."/>
    <path d="..."/>
    ・・・
</g>
<g class="typing">
    <path d="..."/>
    <path d="..."/>
    <path d="..."/>
    ・・・
</g>
<g class="typing">
    <path d="..."/>
    <path d="..."/>
    <path d="..."/>
    ・・・
</g>

SVG自体のフェードインの後にタイピングを開始したかったのでCSSで１秒遅延しています。

.typing path.fadeIn {
    animation: fadeInAnime .1s forwards 1s;
}

@keyframes fadeInAnime {
    from {opacity: 0;}
    to {opacity: 1;}
}

jQuery(window).on('load', function () {
    var element = jQuery(".typing");
    jQuery(element).children("path").each(function (index) {
        var target = this;
        // 0.1s毎にずれて表示
        setTimeout(function () {
            jQuery(target).addClass("fadeIn");
        }, 100 * index);
    });
});

あとはこんな感じにクラスtyping内の文字にjsで0.1秒ずつずらしてクラスを付与していました。

しかし今回それが使えないのでこの最終手段では全54文字分のパスすべてに異なるクラスを付け

同じアニメーションの表示を地味に遅延秒数で調節しました。

ちーも

単純だけどただただめんどくさい

そしてjsは消してあります。

できたSVGをアップロードし、画像ブロックでブログパーツ内のSVGも差し替えます。
（なんかエディタだとSVGめっさちっさかった）

プレビューで確認。とりあえず動いた！
スマホの実機でも確認。

・・・

遅延もなく、思い通りにアニメーションが動いています。

ひとまずこれでようやく完成という事になりました。

ちーも

（嬉泣）

結論としては冒頭に書いた通りではありますが、jsを使わない単純なアニメーションならここまで苦労することもなかったはずなのに、無駄な自己満の為に結構な時間を使ってしまいました・・・。

しかもこのブログはTwitterから記事へのダイレクト流入が多いので、HOMEは表示回数が少ないです。
なので本当に自己満の世界。こだわりだしたらとことんやるタイプなので仕方ないですね。

ちなみに、こんな地味めんどい作業をしなくても世の中にはSVGアニメーションを簡単に作れるツールがあります。
便利なSVGツールをまとめている記事を見つけたのでリンクを貼っておきます。

まとめ

最後に手順だけもう一度簡単にまとめたいと思います。

アニメーション入りのSVGを用意する。（※js・jQueryは使えないからジェネレーターを使うか、完全オリジナルがいい場合は気合でCSSを書く）
SVGをWordPressで使えるようにするプラグインをインストール（今回使用したのはSVG Support）
SVGをメディアにアップロードする
メインビジュアル用のブログパーツを作成し、SVGを挿入。メインビジュアルに作成したブログパーツを表示させるように設定する。

メインビジュアルの設定方法

カスタマイズ＞トップページ＞メインビジュアル＞ブログパーツID[1]の欄にブログパーツIDを入力

今回のタイピングアニメは自動生成してくれそうなサイトがなかったので手書きしましたが、ジェネレーターを活用すれば簡単にアニメーション付きのリッチなサイトが作れそうですね。

もちろんメインビジュアルだけでなく、好きなところにSVGを差し込むことが可能ですのでみなさんも是非お試しください！

この記事が気に入ったらシェアしてね

URLをコピーしました！