WordPressにアニメーションを付ける3つの方法｜重さ・壊れにくさで比較

結論: まず自分のテーマの機能を確認し、無ければ無料プラグインを1ブロックで試す。細かく作り込むのはそのあとです。

• テーマにアニメーション機能がある → テーマの機能を使う
• 無い・すぐ試したい → 無料プラグイン
• 動きを細かく決めたい・プラグインを増やしたくない → CSSやHTMLの貼り付け

クライアントから「見出しをフワッと出せませんか」と頼まれて、プラグインを探し始めたところ。検索で上に出てくる記事は、ほとんどが同じプラグインの使い方です。

ただ、方法は3つあります。どれが合うかは「あとで外したとき何が残るか」で決まります。公式ドキュメントとプラグインの公式ページをもとに比べました。

この記事の目次

1. 3つの方法、結局どれがいいのか
2. コードを書かずにフェードインを付けるなら
3. テーマを変えたら消える？外したら何が残る？
4. WP7.0以降、CSSはどこに書けばいいのか
5. 貼ったコードのscriptが消える・保存できない
6. 自分でCSSを書くならこの形（AIに頼むときも）
7. よくある質問
8. この記事のまとめ

3つの方法、結局どれがいいのか

手軽さならプラグイン、自由度ならコード、見た目のそろい方ならテーマの機能です。

← 表は横にスクロールできます →

選び方の基準：公式ドキュメントに書かれた動き方と、外したときに何が残るかの2点で比べました。

コードを書かずにフェードインを付けるなら

無料プラグインを1つ入れて、ブロック設定のサイドバーから選びます。 名前が挙がりやすい2つは、向いている人が違います。

← 表は横にスクロールできます →

Animations for Blocksは、読み込むファイルがCSS 2.8kB、JS 5.2kB、初期化用1.3kBと公式に書いてあります。合計で約9kB。読み込むファイルの大きさまで載せているプラグインは少ないので、ここは見ていてうれしいポイントでした。

選ぶ前に確認しておくと安心なのは、外し方です。Animations for Blocksの公式ページには、止めるとアニメーションを付けたブロックが「無効なブロック」になることがあると書かれています。止める前にアニメーションを外すか、「ブロックのリカバリーを試行」を使ってください。

テーマを変えたら消える？外したら何が残る？

3つとも「何かを替えたとき」に影響が出ます。替えるものが違うだけです。

• 追加CSS：使っているテーマに結び付いています。テーマを切り替えると効かなくなり、元に戻すとまた効きます
• テーマのファイルを直接編集：次のテーマ更新で消えます。触るなら子テーマ（親テーマの上に重ねる、自分用の小さなテーマ）に書きます
• テーマの機能：そのテーマ専用で、テーマを替えると使えなくなります
• プラグインのブロック（例：VK Blocks）：VK Blocksはテーマではなく、ブロックを増やすプラグインです。アニメーションブロックを「グループ解除」で外すと、中のブロックはそのまま残ります

VK BlocksのアニメーションはPro版だけの機能です。お使いのテーマにアニメーション機能があるかは、テーマの公式マニュアルで確かめるのがいちばん早いです。

WP7.0以降、CSSはどこに書けばいいのか

ブロック1つだけなら、ブロック設定の「高度な設定」にある「カスタムCSS」欄です。 WordPress 7.0から使えるようになりました。

← 表は横にスクロールできます →

ブロックごとの欄は、edit_css権限が無い人には表示されません。カスタムHTMLブロックや再利用ブロックなど、使えないブロックもあります。

1つ詰まりそうなところがあります。公式の解説記事のコメント欄で、この欄ではメディアクエリ（画面幅で切り替える書き方）が効かないと報告されています。開発者は7.1で安定させる予定と答えていました。スマホだけ止めたいなら、いまのところ追加CSSに書くほうが確実です。

貼ったコードのscriptが消える・保存できない

原因はたいてい「権限」か「サーバーのWAF」のどちらかです。

• 権限：7.0からカスタムHTMLブロックにHTML・CSS・JavaScriptの入力欄が分かれました。CSSとJSの欄はunfiltered_html権限がある人にしか出ません。権限の無い人（寄稿者など）が保存すると、<script>は消されます
• WAF（サーバー側の不正アクセス防止機能）：たとえばエックスサーバーのWAFには、scriptタグが入ったアクセスを止める項目があります。設定を変えてから反映まで、新サーバーパネルで最大30分程度かかります

WAFを切るのは、原因を切り分けるための一時的な手段にとどめてください。確かめたら元に戻します。

自分でCSSを書くならこの形（AIに頼むときも）

transformとopacityだけで動かし、「動きを減らす」設定の人には止めます。 これが基本の形です。

.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}
.fade-up.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
}

スクロールで見えたときにis-inを付けるには、短いJSが要ります。カスタムHTMLのJS欄に入れる例です。

const io = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); }
  });
});
document.querySelectorAll('.fade-up').forEach((el) => io.observe(el));

対象のブロックには、「高度な設定」の「追加CSSクラス」にfade-upと入れます。ここが一番見落としやすいのですが、JSが動かないと要素は透明のまま残ります。Animations for Blocksの公式ページにも同じ注意が書いてあり、プラグインでもコードでも起きることだと分かります。

生成AIに頼むなら、こう書くと手直しが少なくて済みます。

transformとopacityだけで動かすフェードインのCSSを書いてください。prefers-reduced-motion: reduceのときは動かさないでください。topやleftは使わないでください。

← 表は横にスクロールできます →

web.devでは、CLSは0.1以下が「良好」とされています。transformで動かせば、このずれは起きません。

よくある質問

Q. スマホだけアニメーションを止められますか？ VK Blocksには、スマホ幅でアニメーションを止めるオプションがあります。それ以外は、追加CSSにメディアクエリを書いて止めます。

Q. 動きを減らす設定って、対応したほうがいいですか？ したほうがいいです。iPhoneの「視覚効果を減らす」やMacの「動きの抑制」などがこの設定です。Animations for Blocksは、初期設定でこの人たちにはアニメーションを見せません。

Q. プラグインとテーマの機能を両方使ってもいいですか？ 同じブロックに重ねると、動きがぶつかることがあります。1ブロックにはどちらか1つにしておくと、外すときも迷いません。

この記事のまとめ

• 方法はプラグイン・コード貼り付け・テーマの機能の3つ。違いは「何を替えたとき影響が出るか」
• プラグインは止める前にアニメーションを外す
• 追加CSSはテーマに結び付く。テーマのファイルを直接いじるなら子テーマに書く
• scriptが消えるなら、権限とWAFを確認する
• 動かすのはtransformとopacityだけ。prefers-reduced-motionで止める

次にやることは1つです。いま使っているテーマのマニュアルで「アニメーション」を検索してみてください。プラグイン選びはそのあとで間に合います。

この記事は、Webサイトの動く部品集 AETHER Motion の制作チームが書いています。