背景色アニメーションを設置する方法
login_userウェブサイトのセクションやボタンなどに背景色のアニメーションを付けると、視覚的に目立たせることができます。ここでは、CSSを使って簡単に実装する方法を紹介します。
1 CSSだけでアニメーションのHTML例
<div class="bg-animate" style="padding:15px; text-align:center; border-radius:6px;">
<a href="/contact" style="color:#fff; text-decoration:none; font-weight:bold;">お問い合わせはこちら</a>
</div>
2 汎用CSS
CSSだけで簡単にアニメーションさせる方法です。クラシックエディタのテキストモードに貼り付け可能です。
/* -----------------------------
* 背景の簡単アニメーション
----------------------------- */
/* 共通クラス */
.bg-animate {
background-color: #ff4081; /* 初期状態の背景色をピンク色に設定しています */
transition: background-color 1.5s ease-in-out; /* 背景色が変わるときのアニメーションを設定。1.5秒かけて滑らかに変化する */
}
/* ホバーで色を変化 */
.bg-animate:hover {
background-color: #2196f3; /* マウスを乗せたときに背景色を青色に変更 */
} /* この中括弧は .bg-animate:hover のスタイル終了を示します */
このクラスを使うと、ホバーしたときに背景色が滑らかに変化します。
2.1 完成イメージ
3 PHPでクラスを自動追加（任意）
WordPressで特定の投稿やページに自動でクラスを追加したい場合、functions.phpに以下を追加します。
//-------------------------------------------
// 特定ページで動く背景の自動アニメーション
//-------------------------------------------
add_filter('the_content', function($content){
if( is_front_page() ) { // トップページ判定
$content = '<div class="bg-animate">' . $content . '</div>';
}
return $content;
});
WordPressでページの種類を判定するとき、以下の関数を使います。
固定ページ： is_page()
「固定ページ」の場合に処理を行います。スラッグ、ID、タイトルで指定可能です。
例：if (is_page('about')) { ... }
トップページ（HOME）： is_front_page()
トップページとして設定されたページ（HOME）に処理を行います。
投稿一覧ページをトップにしている場合も適用されます。
例：if (is_front_page()) { ... }
投稿一覧ページ： is_home()
投稿一覧ページ（ブログページ）の場合に処理を行います。
例：if (is_home()) { ... }
投稿ページ（通常の記事）： is_single()
「投稿（記事）」ページの場合に処理を行います。スラッグ、ID、タイトルで指定可能です。
例：if (is_single('hello-world')) { ... }
その他の関連判定：
- カテゴリ一覧ページ：is_category()
- タグ一覧ページ：is_tag()
- アーカイブページ：is_archive()
- トップページ：is_front_page()
- 投稿一覧（ブログページ）：is_home()
もし固定ページと投稿ページの両方に共通でクラスを適用したい場合は、is_page() || is_single() のように条件を組み合わせて処理することも可能です。
4 ポイント
- CSSだけで簡単にホバーアニメーションが可能
- PHPで特定ページに自動適用も可能
- クラシックエディタでも貼り付けるだけで動作
5 まとめ
背景色アニメーションは、ユーザーの目を引く簡単な演出です。ホバーアニメーションで、サイトに動きとアクセントを加えることができます。
