WordPress の背景画像をウェブサイトに正しく追加する方法

公開: 2022-01-06

WordPress の背景画像を Web サイトに簡単に追加できますか? テーマがサポートしていない場合を除き、ほとんどの場合、答えはイエスです。

実際のところ、最近の多くの WordPress テーマでは、既存の背景画像を簡単に追加および変更する方法が提供されています。

CSS またはプラグインを使用して WordPress の背景画像を変更することもできます。これにより、ページ、投稿、およびカテゴリに背景画像を設定するオプションが開きます。

この記事では、上記のすべてを実行して、人目を引くルック アンド フィールで Web サイトを目立たせる方法を説明します。

WordPress の背景画像とは?

WordPress の背景画像は、メイン コンテンツの背後に適用される画像です。 ヒーロー画像のようにウェブサイトのメイン フォーカスではなく、より目立たず、ウェブ ページの他のコンテンツを補完することがよくあります。

wordpress-背景画像-1

WP の背景画像は、より良い読書体験を提供する Web ページの作成を支援するだけでなく、Web サイトを競合他社と差別化する多くのデザインの可能性を提供します。

競合他社とは異なるということは、ウェブサイトのデザインに特別な努力を注いでブランドの認知度を高めることを意味しますが、これは必ずしも容易ではありません。 そのような場合は、デジタルエージェンシーにプロの Web デザインサービスを依頼できます。

しかし、なぜ背景を変更したいのですか？ まあ、デフォルトのものはあなたにアピールしないか、あなたのブランドに似ていないかもしれません. あるいは、それはまったくイメージではなく、ただの無地なのかもしれません。 または、最初は既存のものを気に入っていたかもしれませんが、今では飽きてしまいました。

理由が何であれ、それを変更して実験してみましょう。

デフォルトの WordPress カスタマイザーを使用してWordPress の背景画像を追加する

WordPress テーマは通常、背景に色や画像を簡単に使用する方法を提供します。 ほとんどの人は、サイトのブランドやテイストに合うように背景色を変更することを選択します。

このガイドでは、e コマース サイトの素晴らしいテーマである Woostify を使用します。 テーマによっては、方法が若干異なる場合があります。

  1. WordPress ダッシュボードから、 [外観] > [壁紙/背景]または[外観] > [カスタマイズ] > [壁紙]に移動します。
ワードプレスの背景画像-2
  1. [画像の選択] ボタンをクリックして、メディア ライブラリを開きます。
ワードプレス-背景-画像-3
  1. ご希望の画像をお選びください。 コンピューターからアップロードするか、メディア ライブラリーから既存のものを選択できます。
ワードプレスの背景画像-4
  1. 満足したら、[画像を選択] ボタンをクリックします。
  2. プレビューの内容が気に入ったら、[公開] ボタンをクリックします。 それだけです！
ワードプレス-背景-画像-5

さらに、WordPress にはシンプルな背景画像編集ツールが用意されています。 どのサイズや位置などが最適かを試すことができます。

ワードプレスの背景画像-6

何かに引っかかる心配はありません。 いつでも簡単に設定に戻って背景 (および関連するオプション) を変更できます。

Elementor Page Builder を使用して WordPress の背景画像を投稿/ページに追加する

Elementor は、ウェブサイトの制作を劇的にスピードアップする人気のあるページ ビルダーです。 WordPressの背景画像を追加するために使用できる無料のプラグインを提供します.

  1. 開始するには、Elementor プラグインをインストールしてアクティブ化する必要があります。
  2. まず、選択した投稿またはページに移動します。 デフォルトの WordPress ページエディターで、[ Edit with Elementor ] ボタンをクリックします。
ワードプレスの背景画像-7

Elementor エディタが開きます。 左側に、投稿/ページを作成および編集するためのすべてのドラッグ アンド ドロップ ブロックを一覧表示するメニューが表示されます。

  1. ページビルダーの左下隅にある小さな設定アイコンをクリックします。
ワードプレスの背景画像-8
  1. 次に、[スタイル] タブを選択します。
  1. その後、ペイントブラシ アイコンをクリックして、 WordPress の背景画像を追加します。
  1. 次に、[画像の選択] ボタンをクリックして、メディア ライブラリを表示します。
ワードプレスの背景画像-9
  1. ご希望の画像をお選びください。 コンピューターからアップロードするか、メディア ライブラリーから既存のものを選択できます。
  1. 次に、右下隅にある [メディアの挿入] ボタンをクリックします。

これで、選択した背景画像が右側のプレビューに表示されます。 画像やテキストなどのアイテムが正しく表示されるように、他のコンテンツを調整する必要がある場合があります。

  1. 「更新」ボタンを押してすべての変更を保存し、投稿/ページを更新することを忘れないでください。
wordpress-背景画像-10

さらに、Elementor は、Position、Attachment、Repeat などの WordPress の背景画像を調整する機能を提供します。それらを自由に試して、最適な背景を見つけてください。

プラグインを使用してWordPress の背景画像を追加する

WordPress の背景画像を追加できる無料の優れたプラグインがいくつかあります。 たとえば、シンプルなフルスクリーンの背景画像、高度な WordPress 背景、フル バックグラウンド マネージャーなどです。

サイト全体のWordPress 背景画像を追加する

このガイドでは、シンプルな全画面背景画像を使用します。単純であるため、その名前が付けられています。

このプラグインは、Web サイトの WordPress 背景画像の簡単なインストールとセットアップを提供します。 ブラウザで画像を自動的にスケーリングします。 そのため、訪問者が使用しているデバイスに関係なく、常に画面いっぱいに表示されます。

それを実行に移すには、いくつかの簡単な手順が必要です。 機能が追加された有料版もあります。 ただし、必要なのは無料のものだけです。

  1. Simple Screen Background Image プラグインをインストールして有効にします。
  2. WordPress ダッシュボードから、 [外観] > [フルスクリーン BG 画像]に移動します。
wordpress-背景画像-11
  1. [画像の選択] ボタンをクリックして、メディア ライブラリを開きます。
wordpress-背景画像-13
  1. ご希望の画像をお選びください。 コンピューターからアップロードするか、メディア ライブラリーから既存のものを選択できます。
wordpress-背景画像-14
  1. 満足したら、[画像を選択] ボタンをクリックします。
  2. 最後に、[オプションを保存] ボタンをクリックして、Web サイトをチェックアウトします。 画像は、全画面の WordPress 背景画像としてサイトに表示されるはずです。
ワードプレスの背景画像-15

WordPress 背景画像のプラグイン設定は、デフォルトの WordPress カスタマイザーを上書きすることに注意してください。 これは決して悪いことではなく、心に留めておくべきことです。

特定のページ/投稿にWordPress 背景画像を追加する

このガイドでは、前述の Advanced WordPress Backgrounds プラグインを使用します。

このプラグインを使用すると、Gutenberg ブロックを使用して背景を追加できます。 色、画像、さらにはビデオを WordPress の背景として設定できます。 それらはすべてモバイル デバイスで表示できます。 さらに、WordPress の背景画像や動画に視差効果を追加できます。

この場合、コンテンツ領域、特に投稿/ページに静的な背景画像のみを追加します。

これは Gutenberg ブロックで機能するため、必要に応じてクラシック エディター モードから切り替えてください。

  1. プラグインをインストールして有効化します。
  2. 既存の投稿/ページを開くか、新しい投稿/ページを作成します。
  3. 左上隅のプラスボタンをクリックします。 次に、[デザイン] セクションまで下にスクロールし、AWB ブロックを選択します。 上部のアイコン バーとサイド メニューの列がブロックの横に表示されます。
ワードプレスの背景画像-15
  1. サイド カラムの [イメージ] ボタンをクリックします。 次に、その下にある[画像を選択] ボタンをクリックして、メディア ライブラリを開きます。
wordpress-背景画像-16
  1. 希望の画像を選択します。 次に、[選択] ボタンをクリックします。 それが完了すると、背景画像が表示されます。
ワードプレスの背景画像-18
  1. 上部のアイコン バーで、ハンバーガーの形のアイコンをクリックします。 次に、[全幅] オプションを選択して、幅全体をカバーします。 これは完全にオプションです。
wordpress-背景画像-19

サイド カラムでは、WordPress の背景画像のサイズ、間隔、位置などを変更できます。 気軽に試してみてください。

ワードプレスの背景画像-20

あとは、ブロック内にコンテンツを追加するだけです。 既存の投稿/ページを編集している場合は、コンテンツをカット アンド ペーストしてブロックに貼り付けます。

結果に満足したら、忘れずに投稿/ページを保存してください。

CSSを使用してWordPress の背景画像を追加する

次に、 CSSを使用してWordPress の背景画像を変更する方法を探ります。 これは、WordPress カスタマイザーを使用して、サイト全体または特定のカテゴリに対して行うことができます。

  1. WordPress ダッシュボードから、[外観] > [カスタマイズ]に移動して、WordPress カスタマイザーにアクセスします。
ワードプレスの背景画像-21
  1. 下にスクロールして、[追加の CSS ] セクションをクリックします。
ワードプレスの背景画像-22
  1. 以下の適切なコードをコピーして、CSS フィールドに貼り付けます。
ワードプレスの背景画像-23

サイト全体のWordPress 背景画像を追加する

body { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

プレースホルダー テキスト「imageURL」を実際の画像ファイルの URL に置き換えてください。 これを表示するには、メディア ライブラリで目的の画像を選択して、画像情報を表示します。

また、CSS を知っている場合は、好きなように微調整してください。

ワードプレスの背景画像-24

特定のカテゴリページにWordPress の背景画像を追加する

body.category-categoryid { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

プレースホルダー テキスト「imageURL」を実際の画像ファイルの URL に置き換え、「categoryid」を適切なカテゴリ名に置き換えてください。

カテゴリ ID を確認するには、次の手順に従います。

  1. WordPress ダッシュボードから、 [投稿] > [カテゴリ]に移動します。
ワードプレスの背景画像-25
  1. 参照したいカテゴリの編集テキストにカーソルを合わせます。 ページの左下にカテゴリ ID を示す URL が表示されます。
ワードプレスの背景画像-26

WordPress で背景画像を使用するためのベスト プラクティス

WordPress でカスタム背景画像を設定するのは簡単な作業のように思えます。 はい！ これはほとんどの場合に当てはまりますが、常にそうとは限りません。

したがって、できるだけ多くの問題を排除するために、WordPress の背景画像のベスト プラクティスに従うことをお勧めします。

WordPress テーマを使用する前に背景画像のサポートを確認する

残念ながら、すべての WordPress テーマがカスタム背景画像をサポートしているわけではありません。 これは通常、背景がテーマの全体的なデザインと一致していないことが原因です。 したがって、開発者はそれを完全にオフにすることを選択しました。

したがって、新しいテーマをダウンロードするとき、特にプレミアム テーマの支払いを計画している場合は、機能のリストを確認する必要があります。 テーマを販売している多くの Web サイトでは、WordPress テーマが背景画像をサポートしているかどうかについての情報を提供しています。

ワードプレスの背景画像-27

高品質の画像に固執する

多くの場合、意図した背景画像の解像度によって、その表現がうまくいかなかったり、うまくいかなかったりします。 携帯電話で撮った写真で十分だと思うかもしれません。 しかし、おそらくそれははるかに高い品質である必要があります.

Shutterstock などのサイトからロイヤリティフリーの写真を購入できます。 これらのサイトには、多くの場合、大きな背景画像としてアップロードできるプロ仕様の画像があります。 また、無料のストック イメージ サイトでそれらの多くを見つけることができます。

背景画像のほとんどがコンテンツで覆われているため、WordPress サイトでは背景画像が完全に表示されない場合があります。 ただし、画面全体に表示されます。 したがって、高品質の画像を使用しないと、背景が引き伸ばされて表示されるリスクがあります。

背景画像の最適化

WordPress サイトにアップロードされるすべての写真と同様に、公開する前に背景画像を最適化する必要があります。

背景画像はサイト全体の複数のページに表示されることが多いため、これは特に重要です。 さらに、それらは大きな写真であり、多くの画面スペースを占有します。 さらに、画像が大きいと、サーバーにかなりの負担がかかります。 したがって、サイトがすばやく読み込まれるように、背景画像を最適化することを忘れないでください。

ここには 2 つのオプションがあります。

  • サーバーにアップロードする前に、背景画像 (およびすべての Web サイトの写真) を最適化します。 Photoshop、GIMP、Pixlr などのツールを使用して、この手動プロセスを完了することができます。
  • アップロード時に画像のサイズ変更と縮小を行う WordPress プラグインをインストールして、最適化プロセスを自動化します。

最終的な考え

WordPress の背景画像を Web サイトに追加することは、小さなことのように思えるかもしれません。 しかし、うまく行けば、大きな影響を与えることができます。

さらに、オンライン プレゼンスを新鮮に保つのにも役立ちます。 したがって、訪問者は同じ写真を何度も見て飽きることはありません。

背景画像は意図したとおりに動作するように特別に設計されているため、可能な限り WordPress カスタマイザーを使用して背景画像を追加するのが理想的です。

ただし、上記で示したように、WordPress の背景画像を追加および変更する他のオプションもあります。

それでは、ウェブサイトの背景をクリエイティブにして、訪問者を視覚的に引き付けましょう。