背景パララックスを設置する方法

この記事では、「背景パララックス（スクロールに合わせて背景画像がゆっくり動く）」の実装方法を紹介します。お知らせ、カテゴリー、アーカイブページなどには一切影響しない安全な方法です。

1 実装のポイント

背景パララックスとは、ユーザーがページをスクロールする際に、背景画像が本文よりもゆっくりと動く演出効果のことです。主にビジュアルセクションや見出し背景に利用されます。WordPressでは、CSSと少しのPHPを組み合わせることで簡単に実装できます。

2 汎用CSS

/* ------------------------
 * 背景パララックスの基本設定
 * --------------------- */

.parallax-bg {                      /** パララックス用の共通クラス **/
  position: relative;               /** 通常の位置関係を維持 **/
  background-attachment: fixed;     /** 背景を固定してパララックス効果を実現 **/
  background-size: cover;           /** 背景画像を全面に拡大・縮小 **/
  background-position: center;      /** 背景画像を中央に配置 **/
  height: 400px;                    /** セクションの高さを設定 **/
  display: flex;                    /** コンテンツを中央寄せ **/
  align-items: center;              /** 垂直方向に中央揃え **/
  justify-content: center;          /** 水平方向に中央揃え **/
  color: #fff;                      /** テキスト色を白に設定 **/
  font-size: 2rem;                  /** 見出しサイズ **/
  text-shadow: 0 2px 8px rgba(0,0,0,0.4); /** テキストに影を付ける **/
}

/* -----------------------------
 * 背景画像例（テーマ画像パス指定）
 * -------------------------- */

.parallax-bg.sample {               /** サンプル背景クラス **/
  background-image: url('https://sample.com/wp-content/uploads/20××/××/parallax-bg.jpg'); /** 背景画像の指定 **/
}
    

3 HTML構造例（記事中に挿入）

以下のように投稿本文にショートコードやブロックHTMLとして挿入します。

<div class="parallax-bg sample">
  パララックス背景セクション
</div>
    

4 完成イメージ

代用プラグイン

プラグインを使いたい場合は、以下のような無料プラグインを利用できます。

• Simple Parallax Scroll – コード不要でパララックスを設定可能
• Elementor の「モーション効果」 – セクション単位で背景を動かせる

5 まとめ

CSSだけでシンプルなパララックス効果を実装することで、軽量かつモバイル対応も可能です。background-attachment: fixed; を使うだけで見た目の印象が大きく変わります。