パララックス効果とは、ウェブデザインのトレンドのひとつで、背景画像が前景のコンテンツよりもゆっくりとスクロールするものです。これにより、奥行きと動きがあるように見え、サイト上でよりインタラクティブなユーザー体験を生み出します。
私たちの意見では、パララックス効果を使用することは、訪問者の注意を引くための素晴らしい方法です。人々を引き付け、より長く滞在するよう促し、エンゲージメントを高めることができます。あなたのサイトに洗練されたプロフェッショナルな雰囲気を与えるだけでなく、コンバージョンの向上にもつながることがわかりました。
この投稿では、WordPressテーマにパララックス効果を簡単に追加する方法を紹介します。柔軟なオプションを提供するために、プラグインやカスタムコードの使用を含む様々な方法を探ります。
視差効果とは何か？
パララックス効果とは、背景が前景のコンテンツよりもゆっくりスクロールする現代的なウェブデザインのテクニックです。この効果は背景画像に奥行きを与え、よりインタラクティブな印象を与えます。
パララックス効果は、ランディングページ、長編コンテンツ、セールスページ、ビジネスサイトのトップページなどに使用できる。
長いページのさまざまなセクションを強調したり、サイト全体の視覚的な魅力を高めたり、ユーザーエンゲージメントを高めたり、ブログでメッセージを伝えたりストーリーを語ったりする素晴らしいツールになる。
多くのプレミアムWordPressテーマには、ホームページにパララックス効果がビルトインされている。ほとんどのWordPressページビルダープラグインでもこの効果を使うことができる。
しかし、すべてのテーマがこの機能を持っているわけではないし、パララックス効果のためだけにページビルダーを使ってカスタムページレイアウトを作成したくないかもしれない。
それでは、WordPressテーマにパララックス背景効果を簡単に追加する方法を見ていきましょう。いくつかの異なる方法を取り上げますので、以下のクイックリンクから使いたい方法にジャンプしてください：
方法1：プラグインを使用してWordPressテーマに視差効果を追加する
この方法では、WordPressテーマにコードを追加する必要はありません。簡単で、ほとんどのユーザーにおすすめです。
まず、Advanced WordPress Backgroundsプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化したら、WordPressダッシュボードから設定 ” AWB ページにアクセスします。ここで、視差効果を表示したくないブラウザーまたは端末のボックスにチェックを入れることができます。
例えば、モバイル端末のユーザーに視差効果を表示したくない場合は、このボックスにチェックを入れることができます。
その後、「変更を保存」ボタンをクリックして設定を保存します。
次の投稿では、Gutenbergブロックエディターでお好みのページや投稿を開いてください。
画面左上のブロック追加「＋」ボタンをクリックし、ブロックメニューを開きます。
ここから、背景（AWB）ブロックを見つけて投稿に追加する必要があります。
画面右側のブロックパネルを開き、パララックス背景に画像を追加したい場合は「Image」タブに切り替える。
その後、「画像を選択」ボタンをクリックしてメディアライブラリを起動します。また、「アイキャッチ画像を使用」ボタンをクリックすると、自動的にアイキャッチ画像が背景として追加されます。
これらのタブに切り替えることで、エフェクトの背景色や動画を追加することもできる。
画像を追加すると、ブロックパネルからフォーカルポイントを調整し、背景サイズを設定することができます。ただし、背景サイズは「Cover」のままにしておくことをお勧めします。
次に、スライダーを使って画像の不透明度を変更します。
そうしたら、「視差」タブまでスクロールダウンして展開する。
ここから、ドロップダウンメニューからパララックスタイプを選択することができます。一度オプションを選択すると、変更は自動的にブロックエディターに適用され、テストすることができます。
この例では、「不透明度＋スクロール」を使っている。
エフェクトを追加したら、AWBブロックの「+」ボタンをクリックしてブロックメニューを開きます。
段落、画像、動画、引用など、お好きなブロックを追加できます。このブロックは視差効果で表示されます。
最後に、上部にある「更新」または「公開」ボタンをクリックして、設定を保存します。
これで、WordPressサイトにアクセスして、パララックス効果を実際に表示することができます。
方法2：CSSでWordPressテーマに視差効果を追加する
個別画像をサイト全体のパララックス背景として使用したい場合は、この方法が適しています。
まず、メディア ” 新規メディアファイルの追加ページにアクセスして、WordPressメディアライブラリに使用したい画像をアップロードする必要があります。
その際、画像をクリックして「添付ファイルの詳細」プロンプトを開き、画像のURLをコピーする必要があります。
そうしたら、カスタムCSSコードをテーマファイルに追加しなければなりません。しかし、コードをタイプする際のわずかなエラーで、サイトが壊れてアクセスできなくなることがある。
そのため、WPCodeの使用をお勧めします。WPCodeは、CSSを含むカスタマイザーコードを超安全かつ簡単に追加できる、市場で最高のWordPressコードスニペットプラグインです。
まず、WPCodeプラグインをインストールし、有効化する必要があります。詳しい手順については、WordPressプラグインのインストール方法についての初心者ガイドをご覧ください。
注： WPCodeには無料プランもある。しかし、プレミアム・プランを選ぶと、コード・スニペットのクラウド・ライブラリや条件ロジックなどの機能がアンロックされる。
有効化したら、WordPressダッシュボードからCode Snippets ” + Add Snippetのページにアクセスし、’Add Your Custom Code (New Snippet)’オプションの下にある’Use Snippet’ボタンをクリックします。
カスタムスニペットの作成」ページが表示されますので、まずはカスタムコードのタイトルを追加してください。
その後、右側のコードタイプのドロップダウンメニューから「CSS Snippet」オプションを選択します。
次に、以下のカスタムCSSコードを「コードプレビュー」ボックスに追加します：
.parallax {
background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}
.parallax-content {
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px;
}
そうしたら、コードのbackground-image: url行の例のURLを、あなたの画像のURLに置き換えてください。
この画像は、あなたのサイトすべてのパララックス効果の背景として使用されます。
次に、「インサーター」セクションまでスクロールダウンし、「自動挿入」モードを選択する。
スニペットにHTMLコードを追加すると、サイト上で自動的に実行されます。
最後に、ページの一番上までスクロールして戻り、「Inactive」スイッチを「Active」に切り替える。
次に、「スニペットを保存」ボタンをクリックして、設定を保存します。
次に、パララックス効果を追加したいWordPressの投稿またはページを開きます。
画面右上の三点アイコンをクリックするとメニューが表示されます。次に、「コードエディター」モードを選択します。
次に、パララックス効果のためのコンテンツを挟んで、コードエディターに以下のHTMLコードを追加する必要があります：
<div class="parallax">
<div class="parallax-content">
Your content goes here...
</div>
</div>
その後、上部にある「コードエディターを終了」リンクをクリックすれば、簡単にビジュアルブロックエディターに戻ることができます。
その後、ビジュアルブロックエディターでページや投稿の残りのコンテンツを追加します。
最後に、「更新」または「公開」ボタンをクリックして、設定を保存します。
WordPressブログにアクセスするだけで、パララックス効果が表示されます。
おまけ：WordPressでYouTube動画をフルスクリーン背景として追加する
パララックス効果とは別に、WordPressでYouTube動画をフルスクリーンの背景として追加することもできる。
これにより、ユーザーに没入感のある体験を提供し、WordPressサイトの視覚的な魅力を高めることができます。フルスクリーンのYouTube動画を背景にすることで、感情を呼び起こし、視聴者とのより深いつながりを生み出すことができます。
例えば、サイトでプレゼントキャンペーンを開催する場合、YouTubeの背景動画を使ってページを盛り上げ、ユーザーにコンテストへの参加を促すことができます。
同様に、非営利のチャリティ団体をお持ちの場合は、動画背景を使用して、団体の影響力や使命、サービスを提供する個人やコミュニティのストーリーを表示することができます。フルスクリーンの動画背景でサクセスストーリーを紹介することもできるでしょう。
詳しくは、WordPressでYouTube動画をフルスクリーンの背景として追加する方法のチュートリアルをご覧ください。
この投稿が、WordPressテーマにパララックス効果を簡単に追加する方法を学ぶのにお役に立てば幸いです。また、WordPressサイトに無限スクロールを追加する方法についての初心者ガイドと、ウェブサイトのグラフィックに最適なCanvaの代替品リストもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Mrteesurez
I have hearing parallax effect but didn’t understand how it actually works. This guide is helpful as explained it clearly with implementation. I will like to try it out. Thanks.
WPBeginner Support
Glad we could help show what the effect is
管理者
Christer
Maybe I’m stupid but what should I insert under “your own content here” in the shortcode? Is the content the post or what?
Chris
WPBeginner Support
You would insert the content you would want on that page.
管理者
Saswata Baksi
Can I add this on the post header code, i.e. before the title on individual post?
WPBeginner Support
You would likely want a sticky header for what it sounds like you’re wanting, otherwise, you would want to reach out to the support for your specific theme for that customization.
管理者
Jessica
Why not show a live example (URL) of the parallax effect? I can’t even picture it.
WPBeginner Support
Thanks for your feedback, we’ll certainly take this into consideration for any updates to this article
管理者
Andres
Hello and thank your for this guide.
Ive implemented Solution #2 on my site, its working great except for the fact that its not working on mobile. Is there a known issue with that?
Thanks
Chris
Hi, I tried thesecoond code solution but itis not Responsive and gets dinged by google.
I have tryed a few fixes, mostly using media breaks and messing with margins but cannot get to to work.
Or
How do you disable in mobile?
Thanks in advance
Chris
WPBeginner Support
At the moment we do not have the recommended CSS to detect mobile devices.
管理者
Alex
I love this plugin, however, I’m trying to create a full height background image that will fit the whole screen whatever browser window size is opened. Then, once the window is loaded, I can scroll to see the rest of my webpage. I see that the demo nK uses works this way:
I’m wondering what additional css or settings I need to use to create this effect.
Thank you so much!
gayana
i have added the parallax plugin . i have got the Symbol which was in picture but am not getting where to add the code .I have added that in custom css in appearance .I am not getting any picture or effects.
David
Rather than repeat this for every page/post, can I just do it the once using the Additional CSS box?
I want the parallax effect site wide.
Thanks
Mahdi Sadeghi
That was Awesome
Thank You.
Thomas Greenbank
If I use the plugin for this, do I have to leave it active, or can I deactivate the plugin once I’ve set up the parallex effect?
WPBeginner Support
Hi Thomas,
You’ll have to keep using the plugin as long as you want to keep parallax background effects.
管理者
Ed
Is there a way to make the background (its URL) a variable that can be set when the related HTML is added to a post? The alternative of having multiple custom CSS segments (.parallaz1, .parallax2, …..) to cover each possible background is unwieldy at best.
A CSS novice trying to learn. Point me to a site or two and I’ll figure it out for myself, but right now don’t even know what to search for.
Thanks
Ed
WPBeginner?
Anyone??
WPBeginner Support
Hi Ed,
You can add CSS classes using Custom Fields. You can assign a custom field to an article, and then in your theme files look for the custom meta data and then use it as your CSS class.
管理者