【WordPress】メインビジュアルをアニメーション化してみた

2025年3月13日2026年11月2日

まめすけ

トップページの画像、なんか単調だなあ…もっと目に留まる感じにできないかな？

k-suke

それならメインビジュアルにちょっとした動きをつけてみよう！

WordPressテーマ「SWELL」の標準機能だけで、コピペ数分で「上から落ちてくる」「ポンと弾む」の2種類のアニメーションが追加できますよ。

※本記事は2026年9月時点のSWELLの仕様をもとに更新しています。テーマのバージョンによって画面表示が多少異なる場合があります。

あなたはどっち？

ブログパーツを使ったことがない
→ STEP1から順番にどうぞ

すでにブログパーツの使い方は分かっている
→ STEP2から読み進めてください

STEP1: ブログパーツでメインビジュアル用のパーツを作る

「SWELL」には、メイン画像の上にテキストや画像を自由に配置できる「ブログパーツ」という機能があります。この機能を使ってアニメーションのもとになるパーツを作ります。

1. 「ダッシュボード」→「ブログパーツ」→「新規投稿」を開きます。

2. 任意のブログパーツタイトルを入力し、表示させたいテキストや画像を入れます。

3. アニメーションさせたいブロックを選択し、画面右のブロックタブの一番下にある「高度な設定」→「追加CSSクラス」に、アニメーションの名前を入力します。ここでは「anime-bound」としています。

4. 入力できたら右上の「公開」をクリックします。

5. ダッシュボードに戻ったら、後ほど使うので「呼び出しコード」の数字を覚えておきます(ここでは”1045″としています)。

まめすけ

「追加CSSクラス」って何を書けばいいのか分からなかったよ…

k-suke

ここでは好きな名前でOKだよ。次のSTEPで書くCSSのコードと、この名前を一致させることでアニメーションが紐づく仕組みなんだ

STEP2: アニメーションコードを「追加CSS」に貼り付ける

「ダッシュボード」→「カスタマイズ」→「追加CSS」を開き、下記のコードを貼り付けます。

/*上から落ちてくるアニメーションのコード*/

@keyframes foll{
    0%{
        transform: translatey(-100px);
    }
    100%{
        transform: translatey(0px);
    }
}

.anime-foll{
    font-size: 2rem;
    -webkit-animation: foll 0.5s ease-in 2s forwards;
    animation: foll 0.5s ease-in 2s forwards;
}

/*ここまで*/

/*テキストが弾むアニメーション*/

@keyframes bound{
    0%{
        transform: translatey(0px);
    }
    25%{
        transform: translatey(-40px);
    }
    50%{
        transform: translatey(0px);
    }
    85%{
        transform: translatey(-10px);
    }
    100%{
        transform: translateY(0px);
    }
}

.anime-bound{
    -webkit-animation: foll 1.5s 2.5s forwards;
    animation: bound 0.5s 2.5s forwards;
}

/*ここまで*/

コードの中身を簡単に解説します。

`@keyframes` は「アニメーションの動きの設計図」です。`0%`が開始時点、`100%`が終了時点の状態を表し、その間をブラウザが自動でなめらかに補完してくれます。
`transform: translateY()` は、要素を縦方向に動かす指定です。マイナスの値は「上にずらす」、`0px`は「元の位置」を意味します。`foll`(落下)は上からスタートして元の位置に落ちてくる動き、`bound`(弾む)は元の位置から一度跳ね上がって着地する動きになっています。
`.anime-foll` `.anime-bound` は、STEP1で入力した「追加CSSクラス」と同じ名前のクラスです。ここで初めて、パーツとアニメーションの動きが結びつきます。
`animation: bound 0.5s 2.5s forwards;` のように数字が並んでいる部分は、左から「使うアニメーション名」「動きの所要時間」「開始までの待ち時間」「終了後の見た目を維持する指定(forwards)」の順番です。

まめすけ

呪文にしか見えない…これ、コピペするだけでいいの？

大丈夫、意味が分からなくてもコピペだけで動くよ。数字の部分だけ後で自分好みに調整できれば十分だから、まずはそのまま貼ってみよう