この記事では、WordPressテーマ「SWELL」を使って、トップページのメインビジュアルをスクリプト1行追加するだけで、視差効果を持った表現（パララックス化）にする方法を解説します。
また、この記事における解説は、「SWELL」バージョン: 2.6.6.1で動作を確認しています。
- お使いの「SWELL」のバージョンにより、記事中のコードをコピペしても期待どおりに動作しない場合もありますのでご注意ください。
パララックス化したメインビジュアル
完成イメージは以下のとおりです。
このように、トップページに「SWELL」カスタマイザーで配置したメインビジュアルが、コンテンツ部分から少しずれてスクロールすることで、奥行きを持った表現になります。
パララックス化の前提条件
この記事のタイトルとして、「1行でメインビジュアルをパララックス化する方法」と少々煽り気味でお伝えしていますが、実は1行追加する前に次のような前提条件があります（子テーマで自分でJavaScriptを記述できる人はこの限りではありません）。
- ホームページが「固定ページ」であること
- ホームページに設定した固定ページで、SWELL「フルワイド」ブロックのパララックス効果を1箇所以上使用していること
順番に解説していきます。
まず、トップページにスクリプト（JavaScript）を1行追加するために、固定ページ（および投稿ページ）の編集領域下に用意されている、「SWELL」のカスタムCSS & JSの機能を使用します。そのため、WordPressダッシュボードの「設定」→「表示設定」から、「ホームページの表示」を特定の固定ページにする必要があります。
次に、ホームページに設定した固定ページを開き、適当な場所にSWELLの「フルワイド」ブロックを配置します。そして、配置したフルワイドブロックに対して、背景画像を指定し、ブロック設定で「パララックス効果をつける」をONにします。
こうすることで、「SWELL」が元々内包しているパララックス用のJavaScriptライブラリ「Rellax.js」が読み込まれるようになります。
JavaScriptを1行追加する
最後に、ホームページに設定した固定ページのカスタムCSS & JSに、以下のコードを追加します。
new Rellax('.p-mainVisual',{speed: -3});p-mainVisualはメインビジュアルのClass名で、speedの数値はパララックスで移動する速さ(方向)を指定することができます。数値が大きいほど速く、正の数値にすると上方向、負の数値にすると下方向にスクロールするので、実際の動きを見ながらお好みで変えてみましょう。
まとめ
「SWELL」テーマで、トップページのメインビジュアルをパララックス化するには、次の前提条件、
- ホームページが「固定ページ」であること
- ホームページに設定した固定ページで、SWELL「フルワイド」ブロックのパララックス効果を1箇所以上使用していること
をクリアした上で、ホームページに設定した固定ページのカスタムCSS & JSに以下のコードを追加します（数値はお好みで変えてください）。
new Rellax('.p-mainVisual',{speed: -3});メインビジュアルをパララックス化して、印象に残るトップページのカスタムに挑戦してみてください。