Advanced WordPress Backgroundsの使い方・設定方法

 

もしあなたがWordPressでParallaxエフェクト(視差効果)を加えたい場合、【Advanced WordPress Backgrounds】がオススメです。

このプラグインには

画像や動画に様々なParallaxエフェクトを簡単に追加することができる
・操作がシンプルで初心者にも使いやすい
・画像内に文字を入れることが可能

などのメリットがあります。ここでは【Advanced WordPress Backgrounds】の使い方について説明します。

 

①プラグインを追加後、固定ページより新しく追加されたアイコンにカーソルを合わせると【Advanced WordPress Backgrounds】と表示されるので

 

②背景の種類を選びます。今回の例では、画像を使用します。

※YouTube / Vimeoは2021/02/03時点では音声が出ませんでした

 

 

③使用する画像を選択します。全幅で表示する場合は【Stretch】というチェックボックスをオンにします。

④使用したいエフェクトを選びます。今回はScrollを選択し、隣のSpeedでスクロール速度を設定することができます

⑤上にある【Styles】に移動し、視差画像のサイズと高さを設定することができます。

※このプラグインでは現状、Paddingを指定する必要があり今回は上下にPadding : 300と設定しています。

⑥最後に、【挿入】をクリックします。

⑦ショートコードがエディタに表示されるので、「Your Content Here」という既にある文章を実際のコンテンツ(テキスト、画像など)に置き換える必要があります。ここで【保存】をクリックすることを忘れないでください。

⑧Webサイトにアクセスし、Parallaxを追加した投稿またはページをチェックして、正しく機能しているかどうかを確認します。

正しく表示されているとこのような表示がされていると思います。
[su_highlight background=”#d7bac7″][nk_awb awb_type=”image” awb_stretch=”true” awb_image=”1408″ awb_image_size=”full” awb_image_background_size=”cover” awb_image_background_position=”50% 50%” awb_styles=” padding-top: 300px; padding-bottom: 300px;”] Your Content Here [/nk_awb][/su_highlight]
・まとめ
 

ここまで【Advanced WordPress Backgrounds】の使い方を説明してきたので、最後に作成の流れを確認しましょう。以下の流れです。

  1. まず背景の種類を選ぶ
  2. 使用したいエフェクトを選択
  3. 画像のサイズと高さを設定する
  4. ショートコード内のテキストを実際のコンテンツに置き換える
  5. 最後に、Webページにアクセスして動作を確認する

閲覧ありがとうございました〜。作成お疲れ様でした。