視差効果とは? WordPressサイトで使用する理由と方法

視差効果は、WordPress Webサイトで一般的に使用されている非常に人気のあるデザイン機能です。この特殊効果は何年にもわたってゲームの世界で取り上げられてきましたが、最近ではWebデザインにも適用されています。そして、これまでのところ、この主要な傾向はどこかへ行っているようには見えません。だから視差効果とは何ですか、そしてなぜあなたはあなたのワードプレスのウェブサイトでそれを使うことを検討すべきですか?


この記事では、視差効果とは何か、それがサイトやビジネスにもたらすメリットについて考察します。次に、無料のプラグインParallax Scrollを使用して、WordPressのWebサイト、ページ、投稿に視差効果をすばやく簡単に追加する方法について説明します.

視差効果とは?

二十一

視差効果には、ウェブページの 前景よりも遅い速度で移動する背景. これにより、ページに奥行きのある錯覚が生じ、視聴者が下にスクロールするときにコンテンツに3D効果が与えられます.

プレミアムWordPressテーマの大半は、ホームページに視差効果が組み込まれています。無料のWordPressデフォルトテーマTwenty Seventeenにも視差機能が付いています。ほとんどのページビルダーには視差効果ツールも組み込まれており、Webサイトの任意のページまたは投稿に効果を追加できます。そしてもちろん、ウェブサイトに視差効果要素を追加するためにインストールできるWordPressプラグインは多数あります.

視差効果を使用する利点は何ですか?

WordPress Webサイトで視差効果を使用することには、いくつかの利点があります。最初の、そして最も明白なのは、視差効果の視覚的側面です。視差効果は 審美的に楽しい, ウェブサイトに新鮮でスタイリッシュでモダンなルックアンドフィールを与える。この すごい効果 コンテンツを本当にポップにし、エキサイティングで興味深いブラウザ体験を作成できます.

サイトで視差効果を使用するもう1つの主な理由は、 ページを分割する, 特にホームページ、読みやすいチャンクに。この効果を使用して、紹介するさまざまなセクションやコンテンツのタイプを強調します。これにより、ウェブサイトのさまざまな側面を宣伝し、重要な情報を明らかにし、ユーザーが選択した方法でサイトに移動してコンテンツにアクセスするように促すことができます.

視差効果はWebサイトの任意のページまたは投稿で使用できますが、特にホームページ、ランディングページ、または1ページのサイトで見られます。見事なビジュアルパララックスが生み出し、それがユーザーエクスペリエンスにプラスの影響を与えることで、訪問者がサイトに長く滞在し、目標に対するサイトのコンバージョン率を改善することができます。.

モバイルの視差

視差は視覚的な関心を追加するのに最適ですが、モバイルデバイスでは常にうまく機能するとは限りません。携帯電話とタブレットは通常、デスクトップのようなスクロールではなくスワイプナビゲーションを使用するため、視差効果が正しくレンダリングされない場合があります。もちろん、これは独自の視差セクションで使用する方法とアニメーションによって異なりますが、使いやすさを高めるために、デバイスで視差を無効にすることを検討することをお勧めします.

視差効果のあるテーマを選択

合計

新しいプロジェクトを始める人は、視差効果機能を含むプレミアムテーマを選択する必要があります。また、ホームページだけでなく、Webサイトのさまざまなページに視差効果を使用する場合は、高度なページビルダーに付属する多目的テーマを検討することをお勧めします。エレガントなテーマからのディビ、Themifyによるパララックス、独自のテーマTotalなどのテーマにはすべて、視差効果ツールを提供するページビルダーが含まれています.

Slider Revolution WordPressプラグインで視差スライダーを追加する

スライダー革命視差

視差効果のあるおすすめのスライダーが必要な場合は、Slider Revolutionプラグインが最適です。このプレミアムプラグインには、フォント、レイヤー、スライダーエフェクト、レイアウト、そしてもちろん視差用の何百もの組み込みオプションと機能が含まれています.

Slider Revolution Parallaxを有効にする

最初にプラグインをインストールしてから、スライダーテンプレートをインポートするか、独自のスライダーを最初から作成します(詳細については、Slider Revolutionの完全なガイドをご覧ください)。.

スライダー革命視差設定

次に、スライドを編集します 主な背景 追加する ソース 背景画像を選択し、 視差/ 3D 視差レベルを割り当てるタブ。次に、レイヤーを追加するときに、 視差/ 3D テキスト、画像、ボタン、その他のレイヤーに動きを追加するための視差深度のレイヤーオプション。とても簡単です!

完了したら、スライダーを保存し、ショートコードを使用して投稿またはページに挿入します。または、Visual Composerなどのページビルダーを使用している場合は、ページビルダーのSlider Revolution要素を使用して、スライダーをすばやく選択して挿入できます。.

パララックススクロールWordPressプラグインを使用してパララックスセクションを追加する

視差スクロール

すでにテーマがあり、組み込みの視差効果オプションが含まれていない場合は、WordPressプラグインを使用して作業を行うことを検討する必要があります. 視差スクロール は、ウェブサイトのページまたは投稿のさまざまな要素に視差スクロールの背景画像を追加できる人気のある無料のオプションです。単純なショートコードを使用して、スクロールする背景を単一の要素、ヘッダーテキスト、またはコンテンツを含むセクション全体に追加します。.

それでは、パララックススクロールをインストールして使い始める方法を見ていきましょう。

Parallax Scrollのインストール

パララックススクロールをインストールするには、管理者としてWordPressダッシュボードにログインし、 プラグイン>新規追加 メニューから.

新しいプラグインを追加

探す 視差スクロール, 次に選択 今すぐインストール>アクティブ化.

視差スクロールをアクティブ化

WordPressメニューにパララックススクロールタブが追加されました。.

視差スクロールセクションの追加

視差スクロールを開始するには、まず新しい視差セクションを作成する必要があります。そのためには、 パララックススクロール>新規追加 WordPressメニューから.

パララックススクロール新規追加

ここで、新しい視差セクションを作成できます…

新しい視差を追加

スクロール視差背景画像の設定

まず、スクロールする視差の背景に画像を設定する必要があります。これを行うには、 注目画像を設定 画像を[注目画像]セクションに追加します.

注目の画像

各背景セクションに使用する画像について慎重に検討してください。それらがサイトに関連していることを確認し、ブランディングと同期します。この背景画像の上にヘッダーやその他のコンテンツを表示する場合は、写真や注意を引くグラフィックスの代わりに、ブロックカラーまたは微妙なパターンを使用することを検討してください。これにより、コンテンツの邪魔をするのではなく、コンテンツが確実に機能し、コンテンツを宣伝できます。.

写真を使用する場合、画像は高品質である必要があります。目を引く美しい画像は、サイトにプロフェッショナルでユニークな外観を与えるのに役立ちます。これらのビジュアルは視聴者に強い印象を与え、ひいてはサイトを思い出してサイトに戻るよう促します。最高品質の画像をダウンロードできるさまざまなストックWebサイトがあります。パララックスの背景の素晴らしい写真をすぐに見つけることができる無料のプレミアムストックフォトウェブサイトのコレクションをチェックしてください.

視差の背景の上にヘッダーテキストを作成する

ヘッダーを追加

視差の背景を持つヘッダーテキストを作成する場合は、次に投稿のタイトルを入力する必要があります。このタイトルは、選択した視差背景画像の上にヘッダータイトルとして表示されます.

視差セクションにヘッダーが必要ない場合があります。この場合でも、各視差に投稿タイトルを付ける必要があるため、作成する各セクションは簡単に識別できます。次に、タイトルを非表示にして選択する必要があります 視差スクロールオプション (この記事で詳しく説明します)ので、サイトの前面にヘッダーは表示されません.

視差スクロールの背景を持つコンテンツを表示する

視差セクションで、背景画像の上に他のコンテンツを表示したい場合があります。これには、テキストや画像からショートコードまで、サイトに必要なすべてのものを含めることができます。表示するものを決定し、このコンテンツを投稿ボックスに入力します.

視差スクロール設定のカスタマイズ

コンテンツに満足したら、ページに合わせて視差セクションの設定をカスタマイズする必要があります.

視差スクロールオプション

下にスクロールして 視差スクロールオプション. [スタイル]で、視差の高さと画像サイズを変更し、[全幅]を選択して、テーマが背景画像を画面の全幅に表示するように強制します(まだ表示されていない場合)。.

視差の背景のヘッダーの水平位置と垂直位置を変更することもできます。そして、投稿のタイトルを非表示にしたい場合は、ここに入力してください。 表示:なし。ヘッダーのスタイル.

視差設定 視差スクロールの動作をカスタマイズできます。これには、視差背景の速度の変更が含まれます。さまざまな速度を試して、あなたのウェブサイトとオーディエンスに何が役立つかを確認してください.

もあります モバイル設定 モバイルデバイスで視差セクションがうまく機能していないと思われる場合に、モバイルで視差の背景画像やコンテンツを無効にできるオプション.

設定を調整し、視差セクションの作成が完了したら、[公開]をクリックします。.

視差セクションを投稿またはページに挿入する

次に、視差セクションをWebサイトの投稿またはページに挿入する必要があります。 WordPressメニューから[Parallax Scroll]を選択します.

視差スクロールショートコード

表示された表に、作成した視差セクションのショートコードが表示されます。コードをコピーして、適切なページまたは投稿を開きます。コードをページのコンテンツの適切な位置に貼り付けます.

ショートコードを挿入

変更をプレビューし、新しい視差セクションに問題がなければ、[公開]をクリックします。これで、ページを提供するセクションをさらに作成したり、完全な視差効果を投稿したりできます。変更が必要な場合は、視差セクションのページを再度開いて、必要な変更を行ってください.

最終的な考え

テーマに視差効果機能が組み込まれていない場合、またはホームページだけでなく効果を追加したい場合は、視差スクロールを使用して視差セクションをすばやく作成し、ページまたは投稿に追加できます。.

あなたが見たように、あなたのウェブサイトに視差効果を加えることは非常に価値があります。それはあなたのウェブサイトの視覚を大幅に改善するだけでなく、それはあなたの聴衆にアピールするのを助け、彼らが簡単にあなたのサイトをナビゲートしそしてコンテンツにアクセスすることを可能にし、そして彼らがあなたのサイトに費やす時間を増やす。この改善されたユーザーエクスペリエンスは、リピーターを増やす、見込み客を集める、製品やサービスを販売するなど、最終的にはサイトがその目標を達成するのに役立つはずです。.

ホームページ、ランディングページ、投稿、または他の場所に視差効果を追加しますか?以下のコメントであなたの考えを共有してください…

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me