WordPressで背景画像を追加する方法（簡単な6つの方法）

背景画像は、WordPressサイトの外観と雰囲気を完全に変えることができます。しかし、引き伸ばされた画像、不適切な配置、またはファイルサイズの小ささの問題が妨げになる可能性があります。特に、どの方法を使用すればよいかわからない場合はそうです。

数十のWordPressサイトを管理してきた経験から、ほとんどの人がこのプロセスを必要以上に難しくしていることを学びました。

幸いなことに、WordPressには背景画像を追加するためのいくつかの組み込みオプションがあり、さらに優れたプラグインがそれをさらに簡単にします。正しい方法を知れば、数回のクリックでサイト全体、個々のページ、または特定のセクションに美しい背景を追加できます。

このガイドでは、あらゆるスキルレベルに対応するWordPressの背景画像追加方法を5つご紹介します。🎨

WordPress の背景画像を追加する理由

WordPressウェブサイトに画像を追加すると、訪問者にとってより魅力的になります。ユーザーの注意をすばやく引きつけ、コンテンツに引き込むことができます。

また、ブランドに合わせてウェブサイトのデザインをパーソナライズすることもできます。たとえば、背景に製品やブランドのマスコットの控えめな写真をアップロードできます。

さらに、YouTube動画をフルスクリーン背景として追加したり、コンテンツを生き生きとさせる画像スライドショーを追加したりすることもできます。

ただし、WordPressブログのコンテンツの読みにくさを引き起こしたり、気を散らしたりしない背景画像を選択することをお勧めします。背景はユーザーエクスペリエンスを向上させ、訪問者にメッセージを伝えるのに役立つはずです。

さらに、ウェブサイトの速度に影響を与えず、モバイルフレンドリーな背景画像を選択することも重要です。そうしないと、WordPress SEOに悪影響を及ぼします。

この記事では、WordPressの背景画像を追加するさまざまな方法を紹介します。

WordPressテーマカスタマイザー、フルサイトエディター、プラグイン、テーマビルダーなど、複数の方法を説明します。下のリンクをクリックするだけで、お好みのセクションにジャンプできます。

• 方法1. WordPressテーマカスタマイザーを使用して背景画像を追加する
• 方法2. フルサイトエディターを使用してカスタム背景画像を追加する
• 方法3. WordPressテーマビルダーを使用して背景画像を追加する
• 方法4. CSS Heroを使用して背景画像を追加する
• 方法5. CSSコードを使用してWordPressのどこにでもカスタム背景画像を追加する
• 追加リソース：WordPressサイトのUXを向上させる画像・メディアファイルガイド

準備はいいですか？始めましょう。

方法1. WordPressテーマカスタマイザーを使用して背景画像を追加する

最も人気のある WordPress テーマには、カスタム背景サポートが付属しています。この機能を使用すると、背景画像を簡単に設定できます。テーマがサポートしている場合は、この方法をお勧めします。

ただし、カスタマイザーのメニューオプションが見つからない場合は、テーマでフルサイト編集が有効になっている可能性があります。次のセクションでは、フルサイトエディターを使用して背景画像を変更する方法を説明します。

一方、「カスタマイザー」を使用するには、WordPress管理画面の外観 » カスタマイズページにアクセスする必要があります。

これにより、WordPress テーマカスタマイザーが起動します。これにより、ウェブサイトのライブプレビューを見ながら、さまざまなテーマ設定を変更できます。

表示されるオプションは、使用しているWordPressテーマによって異なることに注意してください。このチュートリアルでは、Sydneyテーマを使用しています。

別のテーマを使用している場合は、そのテーマのドキュメントを参照する必要があるかもしれません。カスタマイザーで背景画像が見つからない場合は、テーマ開発者に連絡して追加方法を尋ねることもできます。

Sydneyテーマのカスタマイザーオプションでは、左側のパネルにある「一般」をクリックする必要があります。

これを行うと、Sydneyテーマをカスタマイズするためのさまざまな「General」オプションが表示されます。

この時点で、「背景画像」セクションをクリックする必要があります。

次の画面で、背景画像を追加するオプションが表示されます。

「画像を選択」ボタンをクリックしてください。

これにより、WordPressメディアライブラリが表示されます。

ここでは、コンピューターから画像をアップロードするか、以前にアップロードした画像を選択できます。

背景画像を選択したら、「選択」ボタンをクリックする必要があります。

これでメディアポップアップが閉じ、テーマカスタマイザーで選択した背景画像のプレビューが表示されます。

左側のパネルで、画像の配置（上、中央、下、左、右）を調整して、背景にどのように表示されるかを制御できます。「画像サイズ」のドロップダウンメニューを使用して、フィット、フィル、またはカバーするようにリサイズすることもできます。

画像を背景全体に繰り返したい場合は、「背景画像を繰り返す」というチェックボックスをオンにします。「ページと一緒にスクロール」ボックスをオンにすると、画像がページコンテンツと一緒にスクロールするようにすることもできます。

見栄えに満足したら、上部にある「公開」ボタンをクリックして設定を保存してください。

これで完了です。WordPressサイトに背景画像を正常に追加しました。ウェブサイトにアクセスして、実際に確認してください。

方法2. フルサイトエディターを使用してカスタム背景画像を追加する

ブロックベースのWordPressテーマを使用している場合は、フルサイトエディター（FSE）を使用してカスタム背景画像を追加できます。

フルサイトエディターを使用すると、ブロックを使用してウェブサイトのデザインを編集できます。これは、WordPressブロックエディターを使用してブログ投稿やページを編集するのと同じです。

このチュートリアルでは、デフォルトの「Twenty Twenty-Two」テーマを使用します。フルサイトエディターを起動するには、WordPress管理エリアから外観 » エディターに移動するだけです。

フルサイトエディターに入ったら、テンプレートに「カバー」ブロックを追加して背景画像をアップロードする必要があります。

上部にある「+」記号をクリックして、「カバー」ブロックを追加するだけです。

「カバー」ブロックに背景画像を追加するには、「アップロード」または「メディアライブラリ」ボタンをクリックしてください。

これにより、WordPressのメディアアップローダーポップアップが開きます。

次のステップは、ウェブサイトの背景として使用したい画像を選択することです。

画像を選択したら、「選択」ボタンをクリックするだけです。

画像が「カバー」ブロックに追加されたら、それをページの背景として設定する必要があります。

これを行うには、上部にある「リストビュー」アイコン（3本のダッシュのアイコン）をクリックするだけです。これにより、サイトヘッダーやフッターなどのテーマ要素のアウトラインビューが開きます。

その後、リストビューの「カバー」ブロックの下にあるすべてのテンプレート要素をドラッグアンドドロップするだけです。

それらがすべて下にあると、「カバー」ブロックの画像がサイトの背景として表示されます。

その後、「Cover」ブロックをクリックし、画面右上隅の歯車アイコンを選択して背景画像を調整できます。これにより、「Block」設定パネルが開きます。

ここでは、画像を固定背景にする、オーバーレイを調整する、色を編集するなどのオプションが見つかります。

完了したら、「保存」ボタンをクリックすることを忘れないでください。

これで完了です！フルサイトエディターを使用して背景画像を正常に追加しました。

方法3. WordPressテーマビルダーを使用して背景画像を追加する

ウェブサイトにカスタム背景画像を追加する別の方法は、SeedProdのようなWordPressテーマビルダーを使用することです。これは、コードを一行も触ることなくウェブサイトのデザインを簡単にカスタマイズできるドラッグ＆ドロップ機能を持つ最高のWordPressランディングページプラグインです。

私たちは、いくつかのブランドサイトでもSeedProdを使用しており、非常にうまく機能しています。私たちの経験の詳細については、当社の包括的なSeedProdレビューをご覧ください。

このチュートリアルでは、テーマビルダーが含まれているSeedProd Proバージョンを使用します。無料で試せるSeedProd Liteバージョンもあります。

まず、SeedProdプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法をご覧ください。

有効化すると、WordPressダッシュボードにSeedProdウェルカム画面が表示されます。

次に、ライセンスキーを入力し、「キーの検証」ボタンをクリックしてプラグインのプロバージョンを有効化します。ライセンスキーはSeedProdのアカウントエリアで見つけることができます。

設定が完了したら、WordPress管理画面のSeedProd » Theme Builderに移動する必要があります。

上部にある「テーマ」ボタンをクリックしてください。

SeedProdは、複数のテーマテンプレートから選択できるようになります。

使用したいテンプレートにカーソルを合わせ、クリックすることができます。このチュートリアルでは、「スターター」テーマテンプレートを使用します。

ここから、SeedProdはホームページ、シングル投稿、シングルページ、サイドバー、ヘッダーなどのさまざまなテンプレートを生成します。

ウェブサイト全体およびすべてのテーマテンプレートに表示される背景画像を追加するには、「Global CSS」の下にある「Edit Design」オプションをクリックしてください。

次の画面で、変更できるグローバル CSS 設定が表示されます。

「背景」オプションをクリックするだけでカスタマイズを開始できます。

その後、「背景画像」オプションが表示されます。

「独自の画像を使用」をクリックして、画像をアップロードしてください。または、「ストック画像を使用」ボタンをクリックして、ウェブサイトの背景として使用するストック画像を検索することもできます。

背景画像を追加すると、SeedProd ビルダーにライブプレビューが表示されます。

必要に応じて背景の位置を調整できます。また、フルスクリーンカバーを使用するか、繰り返し表示するかなど、他のオプションも選択できます。

さらに、「背景を暗くする」スライダーを移動することで、背景画像の暗さを編集できます。スコアが高いほど、画像は暗くなります。

背景画像の編集が完了したら、上部にある「保存」ボタンをクリックしてグローバルCSS設定を閉じます。

ウェブサイトのさまざまな部分にカスタム背景画像を追加したい場合は、SeedProdで個々のテーマテンプレートを編集できます。詳細については、カスタムWordPressテーマを簡単に作成する方法に関するガイドをご覧ください。

方法4. CSS Heroを使用して背景画像を追加する

CSS Heroは、コーディングなしでテーマに変更を加えることができるWordPressプラグインです。

数ステップで背景画像をすばやく追加できます。ただし、まずCSS Heroをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するガイドをご覧ください。

それが完了したら、ウェブサイトのカスタマイズを開始できます。

まず、ブラウザでホームページを開く必要があります。そこに、管理バーの「Customize with CSS Hero」リンクが表示されます。

リンクをクリックするだけで、CSS Heroのオプションが開きます。

入ったら、画像を追加したい領域にマウスをホバーする必要があります。次に、領域をクリックして左側のサイドバーにある「背景」オプションにアクセスします。

画像を追加するための設定を表示するには、「背景」をクリックしてください。

そこから、「画像」をクリックするだけです。

次に、Unsplashから画像を選択するか、独自の画像をアップロードして背景を作成できます。

使用したい画像をクリックすると、「画像を適用」ボタンが表示されます。

次に、画像のサイズを選択したい場合があります。ページ全体に引き伸ばされるように、大きなバージョンを選択することをお勧めします。

最後に、下部にある「保存して公開」をクリックして、サイトの背景画像を保存します。

方法5. CSSコードを使用してWordPressのどこにでもカスタム背景画像を追加する

デフォルトでは、WordPressはサイト全体にわたるさまざまなHTML要素にいくつかのCSSクラスを追加します。そのため、これらのWordPress生成CSSクラスを使用して、個々の投稿、カテゴリ、著者、その他のページにカスタム背景画像を簡単に追加できます。

たとえば、ウェブサイトに「TV」というカテゴリがある場合、誰かがTVカテゴリページを表示すると、WordPressは自動的にこれらのCSSクラスをbodyタグに追加します。

<body class="archive category category-tv category-4">

インスペクトツールを使用して、WordPressがbodyタグに追加するCSSクラスを確認できます。例を次に示します。

このカテゴリページのみを個別にスタイル設定するには、category-tvまたはcategory-4のCSSクラスを使用できます。

例えば、カテゴリアーカイブページにカスタム背景画像を追加してみましょう。

テーマのfunctions.phpファイルを変更してCSSコードを追加するのは一般的な方法ですが、安全ではなく、初心者にはあまり親切ではありません。わずかな間違いでも、ウェブサイトが壊れる危険があります。

だからこそ、私たちは常にWPCodeの使用を推奨しています。これは、カスタムコードスニペットを簡単に簡単に追加できる最高のプラグインです。

私たちはWPCodeを使用して、ブランド全体でコードスニペットを追加および管理しています。整理を維持し、物事をスムーズに進めるためのシンプルで効果的な方法でした。詳細については、WPCodeの詳細レビューをご覧ください。

これを行うために、WPCode プラグインをインストールして有効化しましょう。ヘルプが必要な場合は、WordPress プラグインのインストール方法に関するガイドをご覧ください。

有効化したら、WordPress管理エリアからコードスニペット » +新規追加 に移動するだけです。

次の画面で、「カスタムコードを追加（新規スニペット）」オプションにカーソルを合わせ、「スニペットを使用」ボタンが表示されたらクリックします。

次の画面で、カスタムCSSスニペットのタイトルを追加することから始めることができます。後でコードを認識するのに役立つように、シンプルで関連性の高いものを選ぶと良いでしょう。

その後、「コードプレビュー」ボックスに次のカスタム CSS を入力または貼り付けることができます。

body.category-tv {
background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

背景画像のURLとカテゴリクラスを、ご自身のサイトのものに置き換えるのを忘れないでください。

WPCodeエディターではこのようになります：

次に、ドロップダウンメニューから「CSSスニペット」を選択して、「コードタイプ」を設定する必要があります。

すべてがうまくいったら、トグルを切り替えてコードスニペットをアクティブにし、「スニペットを保存」をクリックできます。

さらに、個別の投稿や固定ページにカスタム背景を追加することもできます。

WordPressには、投稿またはページのIDがbodyタグに含まれるCSSクラスがあります。同じCSSコードを使用し、.category-tvを投稿固有のCSSクラスに置き換えるだけです。

詳細については、WordPressでカスタムCSSを追加する方法に関するチュートリアルをご覧ください。WordPressでカスタムCSSを追加する方法。

追加リソース：WordPressサイトのUXを向上させる画像・メディアファイルガイド

この記事が WordPress に背景画像を追加する方法を学ぶのに役立ったことを願っています。また、次のガイドも参照してください。

• WordPressに画像を正しく追加する方法
• WordPress で画像ギャラリーを作成する方法
• WordPress スライダーを動画と画像で作成する方法
• WordPressで前後の投稿リンクにサムネイルを追加する方法
• WordPressにSpotifyを埋め込む方法
• WordPressにApple Podcastsを埋め込む方法
• 最適なウェブサイトデザインソフトウェア
• 品質を損なわずにWebパフォーマンスのために画像を最適化する方法

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。