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

2023/07/092024/08/07

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

TOPページを開いた時に画面に動きがあるとサイトがよりリッチに見えますよね！

メインビジュアルへアニメーションを実装するといっても色々方法があり、一番簡単なのは動画を作ってそれをメインビジュアルとして設定することです。（SWELLではメインビジュアルに動画を設定する機能があります）

しかし動画を使うとサイトが重くなりますし、そもそも動かしたいのは部分的なのにな～。なんてことがあります。

そこで今回解説するのは動画によってメインビジュアル全体を動かすのではなく、メインビジュアルの画像の上に置いたロゴや画像のみに動きを付けるといったようなことです。

例えばこんな感じ。

アニメーション付のsvgは自分で用意する必要がありますが、この記事ではCSSによるアニメーションの記述方法までは詳しく解説しません。

しかし！便利なサイトを使えばこういったアニメーションsvgを簡単に作れるので、CSSが分からない方でもご安心ください。

便利サイトを使って作ったsvg↓

※アニメーションが動かない場合は画面を再読み込みしてください。（キャッシュクリアが必要かも？ctrl＋F5）

カスタマイズする際の注意事項

作業前にバックアップを取ることを推奨します。
カスタマイズは自己責任でお願いします。

CONTENTS

事前準備

svgを用意する

まずは動かしたい画像をsvgで用意します。

イラレが使える方はイラレ、そうでない方はCanva（プロのみ）でも作成できます。

素材サイトからダウンロードするのでもOK

イラレで作る場合

アウトライン化してください
ストロークアニメ（線がびゃーって描かれるやつ）を付けたい場合は、線を設定することをお忘れなく

ストロークアニメあり

Canvaで作る場合

画像や文字を配置してデザインを作成し、ダウンロードする際に「SVG」を選択、「背景透過」にチェックをいれます。

svgにアニメーションを付ける

CSSが書ける方

こだわりたい・オリジナルのアニメーションを付けたいなら自分でコードを書きましょう！

注意点としては、js（jQuery）を使ったsvgアニメーションはSWELLでは使えないということです。（そもそもWordpessで使えないのかも？）

jsの外部ファイル化、SVGに含めるに関わらず使えません。私はこれをやろうとして超ハマりました。

時間差でクラス付与するといったことが出来ないので、CSSだけでanimation-delayを調整するなどしてコードを書いてください。

コードを書かない方法

svgアニメーションジェネレーターを使います。

まずはSVG Artistaにアクセス。先程作ったsvgを読み込ませます。

なんとそれだけでsvgにアニメーションが自動で付くんですよ！（神）

線データのあるsvgならストロークアニメあり、塗りのみなら色がふわぁっと付く感じのアニメになります。

アニメーションは左の数値などをいじることで調整出来ます。ストローク、塗りアニメのオンオフも可能！

（ここは個別の説明はしないですが、右の画面を見ながらいじれば直感で出来るはず。むしろ説明を読むよりその方が早い）

アニメーションが完成したら、コードの書き出しをしていきます。「animation type」で「Animation」を選択し、「GET CODE」ボタンを押します。

すると2つのコードが出力されるので

メモ帳アプリを開き、まずは左側のコードを貼り付けます。

次に、貼り付けたコードの</style>のすぐ上に右側のコードを貼り付け保存します。

ファイル名を以下のように変更してください。

〇〇.txt　⇒　〇〇.svg（〇〇は好きな名前）

ちーも

これでアニメーション付のsvgが完成！

</style>がない場合は

恐らくCanvaで作ったsvgを使ってアニメーション付svgを作ると、左側のコード内に<style></style>の記述がないと思われます。

その場合は<defs>を探し、その下に自分で

<style>

</style>

↑を挿入して、その中に右側のコードを貼り付けてください。

Wordpessにsvgをアップロードできるようにする

WordPressのメディアにはそのままsvgをアップロードして使用することはできません。

なのでプラグインを使ってsvgファイルをアップロードできるようにしていきます。

こちらのプラグインをインストールしてください。

WordPress.org 日本語

SVG Support SVG をメディアライブラリに安全にアップロードし、サニタイズ / 縮小し、内部要素を直接スタイリング / アニメーションするためにインラインでレンダリングすることもで…

SVG Supportは無料で使用でき、特に難しい設定は必要ありません。

プラグインを有効化して設定は初期のままでOK

これでsvgがアップできるようになりました！

ブログパーツを作成する

メインビジュアルの上に表示するブログパーツを作っていきます。

作成したアニメーション付svgを挿入しました。

用途などの設定はなんでも

後で見た目をカスタマイズ出来るように、svgに追加CSSクラスを付けておくと便利です。

保存したらブログパーツIDを控えておきます。（数字だけ）

メインビジュアルの上にブログパーツを表示させる

カスタマイザー＞トップページ＞メインビジュアル＞ブログパーツID

こちらに先ほど控えたブログパーツIDを入力します。

これで作業は完了！

「公開」ボタンを押して画面を更新してみてください。

無事にアニメーションが再生されました！

cssで見た目をカスタマイズすることも可能です。

 /* ブログパーツの外側 */
.p-blogParts.post_content {
  background: rgba(87, 87, 87, 0.6392156863);
  padding: 1em;
}

/* svg（ブログパーツ作成時に付けたクラス名を指定） */
.p-blogParts.post_content .mv-svg {
  width: 300px;
  margin: auto;
}

svgのサイズを小さくし、背景をつけてみました。