WordPressの背景画像には様々な形式のものがあります。サイト全体の背景画像をアップロードすることもできれば、ボタンの背景に使用したり、ログイン画面に単色の背景を設定したりすることもできます。どのような形で使用するにせよ、背景画像を含め、画像をアップロードする時の基本を理解することが重要です。
今回は、背景画像とは何かをご説明し、より美しく使用するための編集方法をご紹介します。また、背景画像を素早くサイトに適用する方法と、その中で発生する可能性のある問題を解決する方法も解説します。
それでは早速見ていきましょう。
WordPressの背景画像とは？
WordPressの背景画像はサイトの背景全体を担います。
背景は単色である場合もあります。
どのような背景を選ぶにせよ、functions.phpファイルがWordPressのテーマ内の背景画像を制御します。また、WordPressの header.phpファイルによって表示することもできます。
そのため、WordPressのテーマにおいて独自の背景を設定できるかどうかは、テーマの開発者次第です。機能のオン/オフを切り替えることはできますが、通常、デフォルトの設定はサイトのテーマが決定します。
WordPressで設定できる背景にはいくつか種類が存在します。標準的なサイト全体の背景も設定できれば、サイドバーやページなど、特定の要素の背景のみ設定することもできます。
例えば、次のようなWordPressサイトの細かい箇所にピンポイントで背景画像を設定可能です。
- WordPressの固定ページや記事の背景
- WordPressのカテゴリーページ
- 固定ページや記事内のコンテンツブロックの背景
- ログイン画面
- ナビゲーションメニューの背景
- 「メンテナンス」、「近日公開」ページ
基本的に、テーマが背景画像に対応していれば、サイトの背景全体に適用される画像をアップロードしたり、色を指定したりすることができます。
設定はWordPressダッシュボードの「外観」＞「カスタマイズ」＞「背景画像」から変更できます。しかし、ドラッグ&ドロップページビルダーやプラグインなど他の方法で設定できる種類の背景も存在します。
ダッシュボードでの背景画像のアップロードは手順のほんの一部にすぎません。その後、背景画像の設定を指定しなければなりません。そのままの設定で問題ないこともありますが、画像が美しく表示されるよう、設定を調整しなければならないこともあります。
WordPressの背景画像の設定には次のようなものがあります。
- 背景色
- サイズ
- 画像の位置
- 画像を繰り返し表示するかどうか
- 全画面表示もしくは画像の引き伸ばしの設定
まずはWordPressで背景画像を使用する際のベストプラクティスからご紹介します。その後、様々な状況での背景画像の設定方法をご説明します。
背景の様々なスタイル
WordPressの背景は必ずしも静的な画像でなくてもOKです。動画や写真のパターン、スライドショーなど、様々な種類の背景が存在します。
通常、カスタムCSS、もしくはプラグイン（またはその両方）を使用して独自の背景を設定することができます。今回はその両方の方法をご紹介します。
背景のスタイルの例をいくつかご紹介します。
- 標準的な背景画像： サイトのスペース全体に表示される、メインのコンテンツの背景となる静的な画像（PNG、JPGなどの形式）です。こちらを利用するメリットは、シンプルさ、高解像度の写真が利用できること、そしてWordPressコアで標準対応していること。デメリットは前面の要素が見づらくなってしまう可能性があること、サイズの大きな高解像度の画像がサイトの読み込みを遅くする可能性があること。
- 単色の背景： 単色の背景画像はブランドに合った画像や背景に適した画像がないものの、サイトに彩りを添えたい場合に便利です。また、単色の背景はよりすっきりとした本格的な印象を与える上、設定も簡単です。カスタムコードやプラグインを使用せずにブランドイメージに合った背景を設定したい時に最適です。
- グラデーション背景： グラデーション背景は一つの色から別の色へと徐々に変化する背景です。単色よりも魅力的で、設定にもそれほど時間がかからず、多くのプラグインで設定が可能です。主な欠点は、グラデーションのいずれかの端ではコンテンツが見やすくとも、もう片方の端では見づらくなってしまう可能性があることです。
- パターンやテクスチャの背景： パターンやテクスチャの背景は全て写真を使用しますが、画像の繰り返し、木製のパネルや芝生など、接写を意識した模様にするのが一般的です。画像が大きすぎなければ、その模様に切れ目があることに誰も気がつかないものです。
- 画像スライドショーの背景： 画像スライドショーでは、背景に複数のデザインや写真を表示することができ、訪問者がサイト上でスクロールすると、異なる雰囲気を演出することができます。しかし、スライドショーは注意を逸らしてしまったり、サイトの速度を遅くしてしまったりする可能性があります。
- 動画の背景： 動画の背景は魅力的で、楽しく、ブランドの特徴を伝えやすいという利点があります。しかし、正しく設定されていないと、こちらもパフォーマンスの問題を引き起こす可能性があります。また、セールスファネルから潜在顧客の注意を逸らしてしまう恐れもあります。さらに、背景の動画は最適な寸法、最適な時間で再生する必要があります。無料の動画素材を使用しないと高額になる恐れもあります。
WordPressの背景画像使用のベストプラクティス
独自の背景画像を設定するのは一見簡単な操作のように感じるかもしれません。画像を正しい箇所にアップロードしてフロントエンドに表示されるのを確認するだけだとお思いの方も多いでしょう。
通常はその通りです。しかし、時に背景画像はなかなか厄介な場合もあります。そのため、問題が起きるのをできる限り防ぐために、背景画像に関するWordPressのベストプラクティスに従うことをお勧めします。
高品質な画像のみ使用する
背景画像の解像度はその表示の美しさを左右します。スマートフォンで撮影した写真であれば問題なく背景画像に使用できると思っている方も多いはず。しかし、実際にはもっと高画質にしなければならないこともあります。
Shutterstockなどのサイトでロイヤリティフリーの画像を購入してもいいでしょう。このようなサイトでは、通常、大きな背景画像としてそのままアップロードできる高品質な画像を提供しています。無料の写真素材サイトで、このような画像はたくさん入手できます。
背景画像はコンテンツで隠れるので全体が見えるわけではありませんが、画面全体に表示されることには変わりありません。
高品質な画像を使わなければ、背景に引き伸ばされた画像が表示されてしまう恐れがあります。
背景画像が適正なサイズであるか確認する
解像度と同じくらい画像の寸法も重要です。
スクリーンはそれぞれアスペクト比が異なります。モバイル端末により、一層複雑になっています。しかし、重要なのは最も大きなスクリーンで美しく表示されるかどうかです。そうでなければ、先ほどと同様に画像が引き伸ばされて表示されたり、適切に表示されなかったりする可能性があります。
WordPressの最小背景画像サイズである、1024 x 768ピクセルに合わせれば概ね問題ないでしょう。ただし、1920 x 1080ピクセルなど、もう少し大きな画像を推奨する人もいます。これらを加味すると、表示される場所に応じて、幅1000から3000ピクセル程度を意識するといいでしょう。
もう一つ意識すべきなのはアスペクト比です。背景画像はサイト全体に表示されるでしょうか？それとも上部の四分の一程のスペースのみに表示されるでしょうか？
ウェブサイトは縦長のアスペクト比になっています。そのため、縦長の写真を使うといいでしょう。ただし、ヘッダーやバナー広告など、部分的に背景を使用する場合、横長の画像を使用しましょう。
また、現在のデスクトップの最も一般的なアスペクト比は 16:9です。こちらを念頭においておくとアスペクト比を決めやすいはずです。レスポンシブ対応のテーマやプラグインは、モバイル端末での表示に適したサイズに画像を自動で調整してくれます。
使用したいサイトで実際に背景画像を適用してみて、複数の端末で表示を確認するのが一番です。
WordPressの背景画像を設定する前に最適化する
WordPressにアップロードする他の画像と同様に、背景画像も公開前に最適化しないと大変なことになります。背景画像は通常複数のページで表示されるため、これが特に重要です。しかも、背景画像は大きく、スクリーンの大きなスペースをカバーします。
大きな画像はサーバーに大きな負荷をかけます。画像の解像度は保たなければなりませんが、サイトが素早く読み込めるサイズに最適化しましょう。
写真の最適化には二つの方法があります。
- 背景画像（また他の全ての画像）をWordPressにアップロードする前に最適化する。Photoshop ExpressやGIMP、Pixlrなどのツールを利用し、手動で行う。
- 写真をアップロードすると自動でリサイズ、縮小してくれるWordPressのプラグインをインストールし、プロセスを自動化する。
画像を最適化し、ウェブパフォーマンスを改善する方法はこちらの画像最適化に関する詳細記事をお読みください。
テーマをインストールする前に背景画像の変更に対応しているか確認する
残念ながら、全てのテーマが独自の背景画像に対応しているわけではありません。これはテーマの全体的なデザインに背景画像が適していないため、開発者がこの機能自体を無効にしてしまうことがあるからです。
サイトの背景に画像をどうしても利用したいという方は、新しいテーマをダウンロードする前に機能の一覧を事前に確認することをおすすめします。有料のテーマの購入を検討している場合なおさらです。多くのテーマ販売サイトでは、テーマが背景画像に対応しているかどうか記載されています。
例えば、WordPressのテーマライブラリに掲載されたテーマでは、背景画像に対応している場合タグでその旨が示されます。また、テーマの説明の欄でも背景画像について触れられています。
他のテーマ販売サイトでも通常、同じように背景画像に関する情報が記載されています。記載されていない場合は、開発者に問い合わせて、背景画像ブロック（以下にて詳しく説明します）を優先させた場合、テーマに何らかの問題が発生するかどうか確認してみましょう。
ビジュアルページビルダーを利用し、より簡単に背景画像を設定する
Gutenberg、WPBakery、Divi、Elementorなどのページビルダーでは通常、画像やテキストボックスなどの要素を簡単に挿入できる様々なブロックが利用できます。
ドラッグアンドドロップビルダーが備わっていないと、背景画像の設定が若干複雑になります。また、問題が発生した時に解決するのも少し面倒です。
また、ページビルダーの設定は多くの場合WordPressの標準の背景画像機能よりも優先されます。テーマに制限があったり、背景画像を表示するのに必要な要素が無かったりする場合は、上書きすることができます。
背景画像が合法であることを確認する
画像を使用する際は必ず合法性が問題となります。インターネット上で公開する場合はこれがなおさら重要になります。ソーシャルメディアでは、写真にクレジットさえ入れれば問題なく使用できると考える人が増えています。
しかし、これは大きな間違いです。
写真の所有権は撮影者にあります。例えiPhoneでさっと撮った写真であっても、アメリカをはじめ、多くの国々では、撮影した瞬間からその人に著作権が発生します。
他人の撮影した写真を合法的に使用したい場合、著作権の所有者から画像の使用許可を書面で取得する必要があります。シンプルなメールでも構いません。さらに、使用許可が得られたとしても、所有者からの要望があればクレジットを明記する必要があります。
こちらのサイト上の画像を保護するための包括的なガイドでは、他人の撮影した写真を使用したい場合に役立つ情報もご紹介しています。
背景画像の難しいところは、クレジット表記するのに適した場所がないところです。WordPressには背景画像に見やすいキャプションを追加できる場所がありません。ブログ記事や固定ページの一つに画像の所有者の名前を表示し、サイト全体の背景画像のクレジットを表記したとみなすことはできません。
あなた自身の身を守るとともに、写真の撮影者の権利も守るために、WordPressで背景画像を使用する際は次のいずれかの方法を検討しましょう。
- 自分で写真を撮影する。他人の著作権を侵害しないもっとも確実な方法です。
- ShutterstockやiStockPhotoなどのサイトから写真を購入する。少しお金がかかってしまうこともありますが、背景画像を一つ購入するだけであれば、予算に収まる可能性が高いでしょう。
- UnsplashやPexelsなどの無料の画像サイトを利用する。ただし、クレジットの表記が必須でないことを念のために確認しましょう。これらのサイトでは、クレジットの表記が必須ではなく、任意である画像もいくつか存在します。
- 写真の撮影者、アーティストに問い合わせ、無料で使用しても問題ないか問い合わせる。当人に対して何かしらの「見返り」や「うまみ」がある場合は特に、これだけで済むこともあります。
- 背景画像の使用を諦めるか、写真ではなく、単色の背景を検討する。
WordPressで背景画像を設定する方法
WordPressで背景画像を設定するのには様々な方法が存在します。その方法は、通常、画像を挿入したい箇所によって異なります。
例えば、サイト全体に同じ背景画像を適用したい場合もあるでしょう。もしくは、ページ毎に異なる背景画像を使用したい場合もあるはず。
可能性は無限にありますが、次の箇所に背景画像や背景色を適用する場合についてご紹介します。
- サイト全体
- WordPressの固定ページ
- WordPressの投稿
- 個別のコンテンツブロック
- WordPressのヘッダー
- カテゴリーアーカイブページ
- WordPressのログイン画面
- ナビゲーションメニュー
- メンテナンスページ
始める前に：WordPressで背景画像の設定を有効にする（必要な場合）
サイトの背景画像設定の可否はテーマの開発者が決めます。WordPressには標準でこの機能が搭載されていますが、テーマの開発者が無効にしている場合、ダッシュボードにこの設定を切り替える機能が表示されません。
設定手順を進める中で、テーマが原因で背景画像の機能が利用できないことに気がついた場合、次の手順をお試しください。
WordPressの背景画像に関する設定の大部分はfunctions.phpファイルが制御しています。ファイルを開き次のコードが抜けている場合、追記しましょう。
$defaults = array(
'default-color' => '',
'default-image' => '',
'default-repeat' => '',
'default-position-x' => '',
'default-attachment' => '',
'wp-head-callback' => '_custom_background_cb',
'admin-head-callback' => '',
'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );背景画像の設定を実際に有効にしている要素はadd_theme_support()関数とその中の一連のコードです。これらが、今回の記事の中で何度も登場するWordPressダッシュボードの中の背景に関する設定を有効にしています。
functions.php ファイルからテーマ全体のデフォルトの背景画像を設定することも可能です。先ほどのコードのdefault-imageの部分の =>の後にある' ' の間に画像のURLを記載するだけです。
こちらがWordPressダッシュボードで背景画像を設定できるようにする簡単な方法です。
ただし、そもそもテーマが背景画像に対応していない場合、テーマ自体を変更することをおすすめします。背景画像が設定できないようになっているのには何らかの理由があるはずです。もしくは、背景画像の設定によりデザイン上の問題が発生すると開発者が判断した可能性もあります。
背景画像をWordPressサイト全体に適用する方法
テーマで背景画像の設定ができる場合（多くの場合、設定が可能です）、手順はいたって簡単です。
まずは、WordPressダッシュボードから「外観」＞「カスタマイズ」をクリックします。
すると、WordPressテーマカスタマイザーが開き、設定画面が左側に、ウェブサイトのプレビューが右側に表示されます。
ここで、「背景」のタブを探し、クリックします。
もしくは、「外観」＞「背景」をクリックし、直接設定を開くこともできます。
「背景」の設定画面では、サイト全体の背景の設定が可能です。
次に「画像を選択」をクリックします。
「画像を選択」の画面では、ブランドやウェブサイトのデザインに合った画像を選びます。一般的に、黒や白、グレーであれば、テキストやコンテンツが見づらくならないで済みます。
画像を選択したら、「画像を選択」のボタンをクリックします。
選択した背景画像がウェブサイトのプレビューに表示されます。
画像を挿入してもコンテンツが見やすいかどうか確認しましょう。場合によっては、背景を完全に変えるか、テキストやリンクの色を変更しなければならないこともあります。
「設定」パネルには、画像が適用されたことを示す背景画像の小さなサムネイルが表示されます。
WordPressでは「プリセット」など、他にもいくつか背景に関する設定が可能です。
「プリセット」をクリックすると、既存のデザインや配置で画像の形式を変更することができます。
次のプリセットから選択することができます。
- デフォルト：こちらは通常「繰り返し」と同じ表示になりますが、テーマによって異なる可能性があります。通常はデフォルトが最適な設定になりますが、使用する画像にもよります。
- フルスクリーン：こちらは画面全体が画像でカバーされるよう画像を引き伸ばします。高解像の写真であれば美しく表示されますが、解像度が低い場合、画像がぼやけてしまうことがあります。
- 画面に合わせる：元の写真のアスペクト比を維持したまま、画面に合わせてリサイズされます。元の画像に近い状態を維持できるという利点がありますが、背景をすべてカバーできないことがあります。
- 繰り返し：「フルスクリーン」と同じように、画像を拡大し引き伸ばしますが、画面全体をカバーできなかった場合、画像が繰り返し表示されます。パターンの場合、通常美しく表示されますが、画像の場合、繰り返される画像の間の線が目立ってしまいます。
- カスタム：こちらは背景画像の設定を最も細かく調整できます。背景画像のサイズ、ページでどのように繰り返し表示されるか、引き延ばし方、ユーザーがスクロールした時の移動の仕方などが設定できます。
画像のサイズや解像度、内容はそれぞれ異なるので、万能なプリセットというものは存在しません。そのため、まずは「デフォルト」を試し、他のプリセットも試し、どれが選択した背景画像に合っているかを見てみましょう。
どれもいまいちだった場合は、「カスタム」を選び、詳細な設定を行いましょう。
この画像の場合、「画面に合わせる」の設定はあまり適していません。元の画像が縦長すぎて、右側に大きなスペースが空いてしまいます。「画像の位置」を中央に変更することはできますが、その場合、やはり両側に余白ができてしまいます。
もう一つの設定は「画像の位置」です。矢印をクリックして背景画像を動かし、画像を中央に配置するか、画面を覆うように配置するかを決めましょう。
「プリセット」と同様に「画像の位置」も元の画像の性質によって見え方が異なるので、試行錯誤が必要です。
次に、背景画像を「ページと一緒にスクロール」させるかどうかを選ぶチェックボックスがあります。
こちらにチェックを入れると、閲覧者がページをスクロールする際に背景画像が前面のコンテンツと一緒に移動します。
チェックを外すと画像の全体的な配置が変わってしまうことが多いですが、その主な役割はユーザーが画面をスクロールしても背景画像が動かないようにすることです。
前面のコンテンツ（例えば商品など）が背景画像の上を滑るように表示され、魅力的な見え方になります。
プリセットの「カスタム」設定
「カスタム」以外のプリセットを選択した場合、設定すべき項目はほとんどありません。
しかし「カスタム」を選択した場合、様々なことを検討する必要があります。
例えば、「フルスクリーン」または「画面に合わせる」を選び、画像の繰り返しの有無など、他のプリセットの要素と組み合わせることができます。また、「ページと一緒にスクロール」のオプションはこちらでも選択できます。
まずは元の画像を編集したり、設定を変更したりせずに使用できるかどうかを確認してみましょう。元の画像が背景画像として最適である場合、下手にいじる必要はありません。
しかしサイトに載せるにはサイズが大きすぎたり、アスペクト比が適していなかったりする場合もあります。いずれにせよ、これらの設定を色々試して、最適なものを見つけてください。
最適な背景の設定が決まったら（今回の場合「デフォルト」設定が最適でした）、「保存して公開」ボタンをクリックし、変更をサイトに反映します。
サイトのフロントエンドを開き、実際に適用された背景を確認しましょう。
まずはトップページから始めてみましょう。ヘッダーエリアと「Welcome」の部分には背景がないことに気づくはず。これは、サイト上部の「Welcome」の部分（画像）が、フルスクリーンとして設定されており、すでに画面の水平部分全体を覆っているからです。
ヘッダーやメニューについては、設定方法を後述します。
一般的なWordPressのカスタム背景は、ウェブサイトのすべてのページと投稿で有効になります。これは、自分のサイトを素早くブランディングして、華やかさを加えたい人に便利な、サイト全体に適用される機能です。
例えば、このサイトの「Shop」ページに移動すると、商品選択画面の背景に適用されていることがわかります。
ウェブサイト全体に画像ではなく背景色を設定する方法
ウェブサイト全体に背景色を設定する方法は、背景画像を設定する場合とあまり変わりません。まず、ダッシュボードの「外観」＞「背景」を選択し、「背景色」フィールドを探します。
「色の選択」ボタンをクリックすると、背景の色を選択したり、切り替えたりする設定が増えます。
カラーパネルには、色を決定するための複数の選択肢が用意されています。1つ目は、カラーコードを入力したり、貼り付けたりする方法です。すべての色には固有のカラーコードがあり、インターネットで検索すれば、特定の色のコードを見つけることができます。
2つ目の方法は、カラーパネルをクリックして、背景に最適な色を見つけること。シンプルな色をお好みであれば、パネルの下にあるものから選べます。
背景色を確定するには、その色が選択され、「色の選択」プレビューに表示されていることを確認します。
WordPressカスタマイザーのプレビューに、選択した色の背景が表示されているはずです。表示されない場合は、色の背景を上書きするかたちで、画像の背景が設定されている可能性があります。
その場合には、色の背景が見えるようにするために、「背景画像」のプレビューの下にある「削除」ボタンをクリックしてください。
これで、サイト全体のコンテンツの背後に色が表示されるようになります。画像の背景の場合と同様に、すべてのテキスト、画像、リンクが表示されていることを確認するために、ウェブサイトに目を通しておくのが賢明です。
WordPressサイトの特定のページに背景画像を追加する方法
それでは、WordPressサイトの「特定のページの背景」として画像を表示させたい場合は、どうすればよいでしょうか？前のセクションでは「サイト全体」の背景画像を設定、変更する方法を扱いました。
ページに背景を追加すると、コンテンツに応じたテーマや雰囲気を取り入れることができます。例えば、会社案内のページでは─会社がロサンゼルスにある場合─ロサンゼルスの景色を使うといった具合です。また、本の紹介ページでは、物語のテーマに合った背景を選ぶことができます。
そこで、このセクションでは、WordPressの背景画像をページに追加する方法を、1つの主要な方法と、（プラグインやページビルダーにお金をかけたくない場合の）いくつかの代替手段を使ってご説明します。
補足：Gutenbergエディターでもクラシックエディター（WordPress Editor）でも、問題なくこの方法が利用できます。
ページ固有の背景については、以下の方法が最も便利です。
- 独自CSSで特別なページ背景を追加する
- 個別にページ背景を設定できるプラグインを使用する
- ページビルダーを利用して、各ページに固有の背景を組み込む
ページにCSSを適用するには、ページ設定にあるカスタムCSSから、対象ページのクラスIDを見つけ、背景URLを呼び出す必要があります。実際、ページのクラスIDを調べるのはそれほど難しくありません。簡単に確認できますし、既にご自分のサイトのものを知っている人もいるでしょう。
まずは、背景を設定したい特定のページに移動します。
ページ上（どこでも大丈夫です）で右クリックすると、ドロップダウンメニューが表示されます。下の方にある「検証」を選択します。
「検証」画面には、ページ自体のコードと、ウェブサイト全体に適用されているカスタムCSSが表示されます。ここから、サイトの固定ページや投稿に関する情報を簡単に探すことができます。
「検証」画面にはページのコードが表示されますが、ここでは特にこのページに割り当てられているクラスタグに注目します。補足ですが、WordPress の各ページには、それを識別するコードとして「class」タグがあります。
検索機能を使い、bodyまたはclassと入力して、page-idタグのある部分を探します。
この例では、IDはpage-id-352ですが、当然、サイトごとに違います。
page-id-#を、ダッシュも含めて全部コピーします。
ページIDを保存した後、WordPressのダッシュボードに戻り、「外観」＞「カスタマイズ」の順にクリックします。
WordPressカスタマイザーの「追加CSS」タブを選択します。
ここに、ウェブサイトに適用したいカスタムCSSを入力・貼り付けできます。デフォルトの背景画像を上書きしたり、あるページだけ背景画像を有効にして他のページでは無効にしたりするのに便利です。
以下のコードを「追加CSS」の欄に貼り付けます。ただし、「#」の部分は、前のステップでページIDとして確認した実際の数字に置き換えます。また、例としてのURL（http://YOURIMAGEURL.jpeg）の代わりに、実際の画像のURLを入力する必要があります。
body.page-id-# {
background-image: url("http://YOURIMAGEURL.jpeg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}この例では、ページIDを352と記入し、メディアライブラリから背景画像のURLを貼り付けています。
背景画像がうまく画面に収まらない場合は、必要に応じて設定を変更してください。たとえば、WordPressの背景画像のサイズ、画像ファイルそのもの、位置などの要素を変更することができます。問題がなければ、すべてサンプルコードのまま利用しても大丈夫です。
カスタムCSSに問題がなければ、「公開」ボタンをクリックしてください。
このカスタムCSSにより、指定されたページに（サイズや位置を規定した状態で）背景画像が組み込まれます。ページIDを変えてCSSを繰り返さない限り、他のページに同じ背景が表示されることはありません。
先に触れたように、WordPressのページに固有の背景を追加するために、ページビルダーやそれ専用のプラグインを使うこともできます。
しかし、個々のページに背景画像を配置する最も「安価」で「素早い」方法となると、今ご紹介したCSSです。
WordPressサイトの特定の投稿に背景画像を追加する方法
ほとんどの背景画像関連の設定により、背景画像はWordPressサイトの全てのページに挿入されます。
WordPressのデフォルトのカスタム背景機能は（この背景がブログ記事にも表示されるという事実以外に）個々の記事とは何の関係もありません。これは、ブログ記事によってトピックが大きく異なることがあるため、すべてのサイトにとって理想的とは言えません。
そのようなブログでは、独自の背景画像を使用することができます。しかし、WordPressの投稿における独自の背景画像の設定がないため、少々面倒です。
そこで、記事に固有の背景画像を追加する方法を見てみましょう（お気づきの通り、ページ固有の背景画像を追加する場合と同じです）。
- 独自CSSで特別なページ背景を追加する
- 個別にページ背景を設定できるプラグインを使用する
- ページビルダーを利用して、各ページに固有の背景を組み込む
前述の「固定ページ」の場合と同様に、ページビルダーやプラグインを使って、投稿に固有の背景を追加することができます。
投稿固有の背景を設定する作業は、ページ固有の背景を設定することとあまり変わりませんので、ここでは、違いとなる部分のみを説明します。
CSSを使用して投稿固有の背景を実装する場合、固定ページの背景と同じコードを使用するのですが、1つだけ異なる点があります。それは、ページIDではなく、投稿IDを見つけることです。
まずは、WordPressサイトの対象となる投稿をフロントエンドから開きます。
投稿内のどこかを右クリックして、「検証」を選択します。コード内を検索して、body classへ移動し、postid-#の部分を探します。これが、カスタムCSSに挿入する投稿IDです。
この例では、投稿IDの形式がページIDとは若干異なることがわかります。postid-#タグでは（page-id-#とは違い）「post」と「id」の間にダッシュがありません。ちなみに、これは厳密に決められたルールではありません。さまざまなタグの書き方が存在し得ます。
次に、WordPressのダッシュボードに移動し、「外観」＞「カスタマイズ」をクリックします。「追加CSS」タブに移動します。
カスタムCSSフィールドに以下のコードを貼り付けます。
body.postid-# {
background-image: url("http://YOURIMAGEURL.jpeg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}そして、先に対象の投稿から見つけておいた投稿ID（の数字）を使います。CSSコードの中の「#」をその数字に置き換えます。また、http://YOURIMAGEURL.jpegを、表示したい背景画像の実際のURLに（引用符で囲んだまま）変更してください。
「追加CSS」タブを離れる前に、「公開」ボタンを押してください。これにより、ウェブサイト上での変更が保存され、フロントエンドで背景を確認することができます。
CSS適用後、投稿をフロントエンドからチェックしてみましょう。新しい背景画像が表示されているはずです。他のブログ記事や固定ページに影響が出ていないことも、テストとして確認しておきましょう。コードに別のIDを記述しないかぎり、他の記事に背景が適用されることはありません。
個別のコンテンツブロックに背景画像を追加する方法
WordPressのGutenbergブロックエディターを使えば、テキストボックス、画像、ギャラリーなど、幅広いコンテンツの表示が可能です。
これらは、コンテンツを個別のセクションに分割します。そのため、そのブロック固有の背景色や画像を設定することができます。
例えば、アパレル小売業界の現状についてブログ記事を書いている場合─その記事の最初か最後に、ウェビナーへの申し込みを促すCTA（コールトゥアクション）を掲載したいとします。背景色や画像を使って目立たせるのが良いでしょう。
残念ながら、WordPressのブロックエディターには、どのブロックにも背景を追加できる包括的な設定はありません。しかし、いくつかのブロックでは、背景に色を付けることができます。
また、カバーブロックと呼ばれる、投稿やページ内の特定のブロックに背景画像を追加することができるブロックもあります。カバーブロックでは、テキストや一部のメディアアイテムをオーバーレイすることができ、今回の目的に適しています。
以下に、WordPressの個々のブロックに画像や色の背景を設定するためのテクニックをご紹介します。
特定のブロックの背景に色を付ける
特定のブロックにアクセントを加える簡単な方法として、色付きの背景が使えます。画像を用いた背景のような派手さはありませんが、WordPressのブロックエディターで標準的なブロックの背景に適用できる唯一の選択肢です。
補足：ブロックによっては、背景の設定が一切ないものもあります。その場合は、カバーブロックを使用して（後述するように）その上に他のブロックを重ねるのが最善です。
例えば、「段落」ブロックには、背景に色を付ける設定があります。
これを利用するには、ブロックを選択して、右側の「ブロック」タブにある「色設定」を探します。
展開すると、「文字色」と「背景色」フィールドが現れます。
「背景色」で、好みの色を選択します。また、「カスタムカラー」リンクから、独自のカラーコードを挿入したり、細かく色を指定したりすることもできます。
ご覧のように、この設定を行うと、「段落」ブロックの背景が別の色（この場合は青）に変わります。
その他のWordPressブロックの背景に色を付ける
前述の通り、すべてのWordPressブロックにこの背景機能が組み込まれているわけではありません。背景設定機能のないギャラリーやその他のブロックでは、どうすればいいでしょうか？
一番手っ取り早いのは、WordPressの「グループ」機能を使うことです。
具体的には、すでにコンテンツ内にある複数のブロックを選択します。今回の例では、「段落」ブロックと「ギャラリー」ブロックを同時に選択します。
表示されたメニューで、四角が重なったアイコンをクリックします。
ドロップダウンメニューで「グループ」を選択します。
これにより、現在選択されているブロックがすべてグループ化され、別々のブロックではなく、まとめて移動や編集ができるようになります。
これで「グループ」が独自のブロックとして機能します。つまり、ページの右側にある「ブロック」タブでその設定を確認することができます。
「色設定」タブを探して、それをクリックします。
「グループ」ブロックには、「段落」ブロックと同様に、「背景色」設定機能があります。
ここで色を選択すると、グループ内のすべてに背景色が適用されます。
グループブロックの優れた点は、ギャラリーブロックのように背景機能を持たないブロックでも背景色を指定できることです。
特定のWordPressブロックに背景画像を追加する
WordPressブロックは、固定ページにも投稿にもあります。そのため、この手法はどちらにも利用できます。グループ化したブロック、または、標準的なブロックの背景の上に、あらゆるコンテンツを挿入することができます。
「ブロックを追加」または「+」アイコンをクリックして、「カバー」ブロックを探します。
そのブロックを選択して、投稿またはページに挿入します。
その後、「アップロード」または「メディアライブラリ」をクリックして、背景に使う画像を指定します。
画像を選び、「選択」ボタンをクリックします。
これで、その画像が「カバー」ブロックの背景として表示されます。
主な役割はテキストを画像の上に配置することなので、ブロックをクリックして文字を入力してみてください。
「カバー」ブロックの優れた点は、いくつかの表示形式が用意されていることで、見出しから段落形式へと瞬時に移行することができます。
この背景の上に他のブロックを追加するには、「カバー」ブロック自体の中にある「+」アイコンをクリックします。このアイコンが表示されない場合には、Enterキーを1回押してみてください。
通常のページにコンテンツブロックを追加するのと同じように、「カバー」ブロックでは、WordPressのあらゆるコンテンツブロックを組み込めます。
つまり「カバー」ブロック内に、画像、ギャラリー、カラムなど、あらゆるタイプのWordPressブロックを配置し、個別のブロックを使い簡単に背景画像を設定できます。
この例では、画像を挿入して、「カバー」ブロックに馴染むように少し手を加えています。
背景に組み合わせる各ブロックには、それ専用の設定項目が付随します。「カバー」ブロックに合うように、右側の「ブロック」タブから適宜調整するようにしてください。
背景画像そのものを編集またはカスタマイズしたい場合もあるでしょう。そのような時には、「カバー」ブロックを選択し、ページ右側の「ブロック」タブを開きます。
すると、背景画像を調整するための以下のような設定が表示されます。
- 固定背景
- 繰り返し背景
- 焦点ピッカー
- サイズ
- オーバーレイ
- 不透明度
設定項目の中でも重要なものは、「ブロック」パネルの下部にあります。
下にスクロールして「オーバーレイ」セクションをご覧ください。このセクションを開くと、複数の色が表示され、それを「単色」または「グラデーション」にするオプションがあります。
これは、ブランドイメージに合わせて背景色を少し変えたり、手前にあるコンテンツを強調したりするのに便利です。また、不透明度を調整することで、カラーオーバーレイの具合を加減できます。
また、Stackable Page Builder Gutenberg Blocksプラグインを使えば、個々のブロックの背景に、より高度な設定を適用することができます。
WordPressサイトのヘッダーに背景画像を追加する方法
ここまでは、WordPressサイト全体にわたり背景画像を追加する方法と、WordPressのブロックや投稿、ページなど特定のエリアに背景を設定する方法をご紹介してきました。続いては、メニューやロゴです。
ヘッダーに背景を設定する場合を考えてみましょう。
ヘッダーに背景画像を設定するだけで、サイトに新たな雰囲気がもたらされます。特に、祝日や大きなセールがある場合には、それを強調できます。
まずは、WordPressのダッシュボードで「外観」＞「ヘッダー」を選択します。
補足：ヘッダーの設定は、「外観」＞「カスタマイズ」＞「ヘッダー」でも確認できます。
画面の右側にトップページのプレビューが表示され、その左側にヘッダーの設定が表示されているはずです。
ヘッダーモジュールには、ヘッダーの背景画像に適したサイズが記載されています。アップロードする前に画像のサイズを調整するか、WordPressにアップロードされているものの中から適切な画像を選択しましょう。
「現在のヘッダー」下にある「新規画像を追加」ボタンをクリックします。
ヘッダーでは、背景画像の上に、ロゴはもちろん、すべてのリンクやテキストが鮮明に表示されるようにする必要があるため、扱いには注意が必要です。
そのため、背景画像を試してみて、落ち着いた色や模様にすることをお勧めします。とにかくメニューやロゴが見えにくくなるのは避けたいところ。
画像を選び、「選択して切り抜く」ボタンをクリックして次に進みます。
WordPressのトリミング機能は、ヘッダーの背景画像に適した寸法に自動的に調整してくれるので便利です。Photoshopなどで事前に編集するのに比べて、格段に手間が省けます。
切り抜き範囲を指定します。角をドラッグして調整することもできます。
範囲を決定したら「画像切り抜き」ボタンをクリックします。
これで、ヘッダーの背景画像がWordPressカスタマイザーのプレビューに反映され、どのように表示されるか確認できます。
ヘッダーの背景画像は、ページの他のコンテンツにはみ出すことはありません。ロゴやキャッチコピー、メニュー、検索バーなど、現在ヘッダーに配置されている要素の後ろに表示されます。
ヘッダーの背景に複数の画像をアップロードして、それらをランダムに表示するという方法もあります。
これを行うには、まず、ヘッダー設定画面から複数の画像をアップロードします。「新規画像を追加」ボタンをクリックして複数画像を追加しましょう。
アップロードしたら、「アップロード済みヘッダーをランダム表示」ボタンをクリックして、表示される画像をランダム化します。
ヘッダーに背景画像を追加すると、メニューやショッピングカートなどが見づらくなることがあります。
そのような場合でも、焦ってヘッダー画像を削除する必要はありません。「テキストカラー」と「リンクカラー」の項目を調整するのがお勧めです。
テキストカラーの設定により、内部または外部の他のページにハイパーリンクされていないヘッダーのテキストを制御できます。多くの場合、キャッチフレーズがある場合は、事実上「それのみ」が対象になりますが、ショッピングカートの中身の合計やソーシャルメディアアイコンなど、テキストに合わせて色が変わる要素もあります。
リンクカラーでは、他のページにリンクしているすべてのメニューアイテムが対象になるため、この色を調整するとイメージがガラッと変わります。
試しに「テキストカラー」と「リンクカラー」の両方に新しい色を選択したパターンをご紹介します。キャッチフレーズとサイト名、そして、メニューが白に変わり、ショッピングカートのアイコンなど、他のほとんどのヘッダー要素も変わっているのがわかります。
ヘッダーに背景画像を使用したくない場合は、無地の背景も選べます。
先ほどと同じヘッダー設定画面の「背景色」フィールドに移動します。
「色を選択」ボタンをクリックして、カラーパネルから色を選択すると、プレビューが確認できます。また、（背景画像の場合と同じように）背景色とあわせてテキストの色を変更することもできます。
ヘッダーの見た目をテストし、最適な背景画像の設定が終わったら、「公開」ボタンをクリックして、変更内容を反映します。
また、フロントエンドでの表示に問題が見られた場合には、WordPressのキャッシュをクリアしてみることをお勧めします。
WordPressのカテゴリーに背景画像を追加する方法
WordPressにおけるカテゴリーアーカイブページとは、特定のカテゴリーに属するすべての投稿をまとめたものです。例えば、多くのサイトに「商品」などのカスタム投稿タイプのためのカテゴリーがあります。デフォルトで、すべてのWordPressサイトに投稿を整理するためのカテゴリーが存在します。カテゴライズされていないものは、「未分類」カテゴリーとして扱われます。
カテゴリーアーカイブページには似たようなコンテンツが集約されています。見栄えを良くするために、ページに関連する背景画像を設定してもいいかもしれません。例えば、「ウェブデザイン」カテゴリーにはテクノロジーを想起させる背景を、「旅行」カテゴリーには貝殻やビーチの背景を設定することができます。
カスタムCSSを使うのが（以下参照）最も安上がりなやり方です。または、ページビルダーやプラグインから、カテゴリーページの背景を設定することもできます。
CSSでこの作業を行うには、WordPressのダッシュボードを開き、「外観」＞「カスタマイズ」へと進みます。
「追加CSS」タブを選択すると、独自のCSSを記述するためのスペースが開きます。
WordPressサイトのカテゴリーアーカイブページのいずれかを開きます。通常、「https://ドメイン名.com/category/travel」のようなURLになっています。もちろん「ドメイン名.com」（ドメイン）と「travel」（カテゴリー名）の部分をご自身のサイトにあわせて変える必要があります。
対象のカテゴリーページで右クリックし、「検証」をクリックします。ブラウザの検証機能により、そのページのコードが表示されます。
「body」や「class」を検索すると、カテゴリーページのCSSクラスと、このカテゴリーのクラスが確認できます。
ここでは、サイトに「travel」というカテゴリーがあり、CSSクラスは「category-travel」となっています。
このCSSタグは後で使うので、どこかにメモしておきましょう。
その後、WordPressカスタマイザーの「追加CSS」セクションに戻ってください。
そこにあるボックスに以下のコードを貼り付けます。category-travelクラスを自分のものに変更し、http://YOURIMAGEURL.jpegの代わりに実際の画像URLを指定します。
body.category-travel {
background-image: url("http://YOURIMAGEURL.jpeg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
「公開」ボタンをクリックすると、変更内容が保存されます。
最後に、WordPressサイトのフロントエンドから、カテゴリーアーカイブページに戻ってください。先ほどと同じページが表示され、CSSコードで指定した背景が表示されているはずです。背景画像の表示に問題がある場合は、「追加CSS」に戻って、位置、サイズ、繰り返しなどの要素を調整してください。
WordPressログインページに背景画像を追加する方法
WordPressのログインページには、サイト訪問者が登録・ログインするためのものと、管理者やライターなどの内部ユーザーのためのものがあります。
これらのログインページは、サイトのメインの構造とは異なります（ほとんどのファイルはwp-login.phpファイルにあります）。そのため、サイトで背景画像を設定してもここに影響は出ません。
これにはCustom Login Page Customizerというプラグインが使えます。まずは、このプラグインをWordPressサイトにインストールして有効化します。
左側に「LoginPress」という新しいメニューが表示されます。
「LoginPress」＞「Settings」へと進みます。
ここでは、背景を追加しログインページをカスタマイズする前に、プラグインの設定を調整することができます。
例えば、ユーザーを自動的に記憶する、カスタムパスワードフィールドを表示する、一定期間後にセッションを失効させるなどの設定が可能です。
ログインページで背景画像を利用するには、「LoginPress」>「Customizer」をクリックします。
WordPressカスタマイザーに、LoginPressのページが追加されています。テーマ、ロゴ、背景などのタブがあります。
また、プレビュー内のボタンをクリックすることでも、ログインページをカスタマイズできます。
ここでは背景の設定が主題ですので、その他の設定については割愛します。
「Background」タブをクリックして次に進みます。
最初に、背景色を設定するか画像を設定するかを決めます。
背景色を設定したい場合は、「Background Color」欄から「Select Color」をクリックします。すると、カラーパネルが表示されます。ここから、好きな色を選択してください。
ご覧の通り、この変更はWordPressカスタマイザーのプレビューにも反映されています。
「Background Color」設定のすぐ下に「Background Image」の項目があります。
「Enable Background Image」をオンにすると、あらかじめ用意された背景画像のバリエーションが表示されます。
無料版にはあまり多くの種類はありませんが、有料版にアップグレードすると、多くの選択肢が追加されます。
ブランドイメージに合うかどうか、まずは既製の背景画像を試してみてはいかがでしょうか。
ログインページの背景に独自の画像をアップロードすることもできます。
「Background Image」の項目から「Select Image」をクリックします。
WordPressのメディアライブラリが表示されますので、コンピュータから写真をアップロードするか、WordPress内にすでにある写真を選択します。
希望の写真を選択して、「Choose Image」ボタンをクリックします。
設定した背景画像が、カスタマイザー画面のプレビューに表示されます。
ここで「公開」ボタンをクリックして、画面に表示されている内容を反映できます。または、下にある追加設定で微調整をしてみることもできます。
「Background Repeat」ドロップダウンフィールドをクリックすると、「Repeat」、「No-repeat」、「Repeat-x」などが表示されます。
写真のサイズによっては、画像の表示され方が少し変わったりします。
次に、背景画像の位置をさらに調整したい場合には、「Select Position」の項目を見てみましょう。
デフォルトでは、画面の中央に配置されていますが、右下や左上など、どこかに配置した方が見栄えが良くなるかもしれません。色々と試して、最適解を見つけてください。
「Background Image Size」ドロップダウンでは、画像が画面をどのように覆うかを設定できます。
これらの設定を試してみて、どれが最適か判断してください。「Auto」や「Cover」ではなく、「Contain」で見た目がさらによくなることも。
以上で、ログインページの背景画像をアップロードして有効にする方法の説明は終了です。
最後にある設定項目は、背景に画像ではなく動画を表示させたい場合に使います。サイトへのログインという本来の機能の邪魔にならないぴったりのビデオがあるなら、使ってもいいかもしれません。
すべての作業が完了したら、「公開」ボタンをクリックすると、ログインページの背景が変更されます。ユーザーがサイトに登録またはログインしようとするたびに表示されるようになります。
ナビゲーションメニューに背景画像を追加する方法
背景画像やアイコンを使った派手なメニューのサイトを見たことがあるはずです。これは、ECサイトでよく見られる手法です。カテゴリーごとに分けた大きなメニューで、それぞれに背景画像を設定している場合があります。
メニューへの背景追加であれば、WordPressのおすすめメニュープラグインをご覧ください。ここでご紹介しているメニュープラグインの多くで、背景画像や色を入れることができます。
ナビゲーションメニューに背景画像を追加するプラグインはいくつかありますが、ここでは2つのプラグインの使い方を扱います。片方はサブメニューに背景画像が追加できるもので、もう一方では、モバイルメニューに背景を追加できます。
複数のサブメニューに背景画像を追加するには、WP Mega Menuプラグインをインストールして有効にします。このプラグインを使うと、複数のドロップダウン階層のあるメガメニューを作成、管理できます。大規模なオンラインストアに最適ですが、特に背景画像やアイコンを追加したい場合には、シンプルなメニューであっても便利です。
まず、WordPressダッシュボードで「WP Mega Menu」へ移動します。
そして「テーマ」メニューをクリックします。
ここでは、プラグインによるメニュー用のデフォルトテーマの一覧が確認できます。
好きなテーマをクリックして編集することも、独自のデザインを一から作ることもできます。
テーマはそれぞれ独自の設定があり、テーマのタイトル、メニューバーの設定、ブランドロゴなどの要素を編集できます。ドロップダウンメニューからサブメニューまで、メニューのあらゆる部分が調整できます。
ただし、メニューの背景画像に関して言えば、どのテーマにするかを選ぶだけでOKです。
ダッシュボードから「外観」＞「メニュー」をクリックします。
「 Mega Menu Settings」という新たなメニューが追加されているはずです。
「Enable」をクリックし、メガメニューを有効化し、自分のサイトに合ったテーマを選択します。
最後に「Save」ボタンをクリックします。
次に「Menu Structure」の設定に移ります。
全てのメニュー項目に「WP Mega Menu」ボタンが表示されます。こちらからそれぞれのドロップダウン部分のレイアウトとデザインを調整できます。
好きなメニュー項目の「WP Mega Menu」ボタンをクリックします。今回は、「Shop/ショップ」タブにドロップダウンメガメニューを追加します。
補足: ここでは既にWordPressサイトでメニューを設定済みであるという前提で解説を進めます。メニューの設定方法については「WordPressのドロップダウンメニュー」をお読みください。
ポップアップ画面から、該当するメニューの「Mega Menu」を有効化します。
次に、ドロップダウンの列を追加し、左側のウィジェットを列にドラッグします。例えば、商品の一覧など。すると、サイト訪問者がショップのメニューにカーソルを合わせた際にそれが表示されるようになります。
ドロップダウンに背景を追加するには、左下の「Options」をクリックします。
「Upload Background Image」の欄を探します。
「Upload」ボタンをクリックし、メディアライブラリから背景に使用したい画像を選択します。
メディアライブラリから画像を選択すると、画像のサムネイルが表示されます。
他にもいくつか設定ができますので、必要に応じて調整してみましょう。
最後に「Options」パネルの下部にある「Save Changes」ボタンを忘れずにクリックしましょう。
また、WordPressダッシュボードの「メニュー構造」でも「メニューを保存」ボタンをクリックする必要がありますのでご注意ください。
完了したら、サイトのフロントエンドを開き、メニューの表示を確認してみましょう。設定を行ったメニューのアイテムにカーソルを合わせると、背景付きのドロップダウンが表示されるはずです。
メニューに背景画像を適用する方法はもう一つあります。訪問者がモバイル端末からサイトにアクセスした時に表示されるモバイル対応のレスポンシブメニューを使用するパターンです。
プラグイン「WP Mobile Menu」を使用すると、モバイルメニューに背景画像を追加できます。
「WP Mobile Menu」をインストールし、有効化したら、WordPressダッシュボードから「Mobile Menu Options」をクリックします。
プラグインでは、いくつかの方法でモバイルメニューを設定することができます。基本的な設定方法は、いずれかのメニューの形式を有効化し、そのモバイルメニューをどのWordPressメニューに適用するかを選ぶというもの。
例えば、「Enable Left Menu」をオン（画面の左側にモバイルメニューを表示）にして、「Left Menu」項目のドロップダウンから「Main Menu」を選択します。すると、現在この例で利用している「Main Menu」がモバイルメニューとつながることで、サイト訪問者にも同じタブが表示されます。
作成したモバイルメニューの種類によって操作は異なりますが、今回は左側のメニューを作成したので、「Left Menu」のタブをクリックして、背景を追加するための設定画面を開きます。
「Panel Background Image」の項目までスクロールし、「+」をクリックしてメディアライブラリを開きます。
メディアライブラリから画像を選択し、フィールドに追加します。
確認のため、背景画像のサムネイルが表示されるはずです。
「Save Changes」ボタンをクリックすると背景が有効化されます。
プラグインがモバイルメニューを生成する仕組みの性質上、メニューはブラウザが狭い幅で設定されている場合か、スマートフォンやタブレットでサイトを訪問した場合にしか表示されないことがあります。
新しいメニューはハンバーガーメニューのアイコン（水平な三本の線）に集約されます。
アイコンをクリックして新しい背景付きのメニューを確認してみましょう。
スクリーンショットをご覧いただくと分かるように、背景はモバイルメニュー全体に適用されます。
WordPressサイトのメンテナンスページに背景画像を追加する方法
どのようなサイトでも時折メンテナンスが必要となります。そしてそのメンテナンスの期間が長くなる場合には、メンテナンスページの表示が必要になることも。
メンテナンスページの作成において、背景画像は非常に重要な役割を果たします。多くのメンテナンスページは全画面表示の背景画像と、場合によってはテキストやリンクなどで構成されます。
メンテナンスページを既に作成済みで、背景画像を適用していないという方は是非、次の手順を参考にしてみてください。一定期間サイトをシャットダウンしなければならい場合でも、美しい画面を表示することができます。
プラグイン「Maintenance」（※操作画面には日本語と英語が混在）を利用することでメンテナンスページに背景画像を追加することができます。まずはプラグインをサイトにインストールし、有効化します。
有効化したら、ダッシュボード上部の「メンテナンスis On/Off」を探します。
これをクリックし、プラグインの設定画面を開きます。
ダッシュボードのサイドメニューから「メンテナンス」をクリックして、設定画面を開くこともできます。
プラグイン「Maintenance」の設定画面にはたくさんの設定項目がありますが、最も重要な部分は「基本設定」の部分です。この項目から、これから挿入する背景の上に表示される「見出し」や「説明」を記述することができます。
「Page Title」（ページのタイトル）はブラウザのタブに表示されるタイトルですので、こちらも必要に応じて設定しましょう。
「Maintenance」プラグインはメンテナンスページや「近日公開」ページなどに使えます。「ただいまメンテナンス中です」などと記載してもいいですし、会社の情報を掲載し、訪問者がメールアドレスを入力できるフォームを設置してもいいでしょう。
さらに、このプラグインでは背景画像の上に表示されるロゴもアップロードすることができます。
「ロゴをアップロード」をクリックしロゴを選択すると、ダッシュボードにサムネイルとして表示されます。
最後に、「Background Image」の欄には「背景のアップロード」ボタンがあります。
パソコンから画像をアップロードするか、メディアライブラリからメンテナンスページの背景に適した画像を選択しましょう。
補足: メンテナンスページの背景として適しているのは、大きく、解像度が高い、横長の画像です。「Portrait Mode」（縦長画面用）の背景はこの後ご紹介する設定で利用できます。
背景画像を選択すると、ダッシュボードに小さなサムネイルのプレビューが表示されます。
パソコンや幅の広い画面の場合、横長の背景画像が適していますが、多くの人はスマートフォンを縦にした状態など、サイトを縦方向に閲覧します。
そのため、横長の背景画像では美しく表示されないことがあります。そのため、このプラグインでは「Background Image (portrait mode)」が設定できます。こちらは、ユーザーが縦長の画面でサイトを閲覧した際に、レスポンシブに画像を切り替えてくれます。
この欄に画像を追加しておくのは非常に重要です。「Upload image for portrait device orientation」ボタンをクリックします。
ここでは、縦長の画像をアップロードします。元の背景画像を縦長にトリミングしてもいいですし、サイズが適した全く別の画像を選んでもいいでしょう。
適用したい画像を選択して、「Select Image」ボタンをクリック。
ここまで行ってきた設定は、「メンテナンスモード」を「ON」にしなければ意味がありません。
このモードを有効化するには、設定画面の一番上にある「メンテナンス」から「ON・OFF」のスイッチを切り替えます。
スイッチを「ON」に切り替えて、「Save Changes」をクリックします。
サイトのフロントページを開き、背景画像とメンテナンスページが適切に表示されているかどうか確認しましょう。
正しく表示されていない可能性も大いにあります。
これには2つの原因が考えられます。まず、メンテナンスモードのサイトを表示するにはWordPressの管理者アカウントからログアウトする必要があります。また、コンテンツの変更を反映するには、サイトのキャッシュを削除しなければならないことがあります。
例えば、管理者アカウントからログアウトすると、このようにどのページを開いてもメンテナンスページが表示されるようになりました。
背景画像が、設定したロゴや説明文とともに表示されます。
また、縦長のブラウザで閲覧すると、縦長モードの背景に切り替わります。
スマートフォンやタブレットから閲覧した場合も、縦長モードで表示されます。
プラグインには「Page Preloader Image」という背景画像の設定項目も存在します。実際のメンテナンスページ、背景、コンテンツを表示する前に、簡易的な画像がアニメーション効果付きで表示されます。
通常の背景画像と同様に、「Upload Preloader 」ボタンをクリックし、背景に適した画像を選択、追加します。
先ほどと同様に、「Save Changes」をクリックし、キャッシュを削除。
デフォルトでは、「Page Preloader Image」エフェクトは画像がしばらく回転するというもので、やがてそれが消えて、実際のメンテナンスページと背景画像が表示されます。
このエフェクトはお好みに応じて適用するかどうか選択してください。
プラグイン「Maintenance」の設定画面では他にもいくつかの設定が可能です。
例えば、背景画像ではなく背景色を設定することもできます。
その場合、「Background Color」からサイトに合った色を選択しましょう。
背景色は他の背景画像を無効化するまでメンテナンスページには表示されません。
そのため、適用したい場合は背景画像をすべて削除するようにしましょう。
「portrait mode」の背景画像も削除する必要があります。
変更を保存し、キャッシュを削除します。フロントエンドを開き、背景色を確認してみましょう。
他にも、フォントの色、フォントの種類、背景のぼかしなどの設定ができます。
また、フロントエンドにログイン画面を設置するかどうかも検討してみましょう。設置すると、ユーザーはアカウントにログインすることができ、必要に応じてプロフィール画面にアクセスできます。
すべての設定が完了したら、「Save Changes」をクリックします。
「Maintenance」プラグインでは、美しい背景画像と本格的なレイアウトやテキストがあらかじめデザインされた、既存のテーマも用意されています。
メールアドレスを記入できるフォーム付きのものや、お問合せ先情報などが記載された「近日公開」ページやメンテナンスページがレイアウトされたテーマが利用できます。
利用にはテーマの購入が必要です。
予算次第ですが、比較的お手頃な料金で美しいテーマが利用できます。
テーマを購入しない場合は、これまでご紹介した設定はすべてご自分で設定します。また、「カスタムCSS」モジュールからメンテナンスページや背景画像を自由に設定することも可能です。
繰り返しになりますが、メンテナンスページの設定は管理者アカウントからログアウトし「Clear Cache 」ボタンをクリックしないと通常表示されません。
Kinstaをご利用の場合、「Clear Cache」ボタンはダッシュボードの右側上部に表示されます。他のレンタルサーバーをご利用の方は様々なキャッシュ系プラグインが存在しますので、そちらの利用をご検討ください。
キャッシュを削除し、設定を保存したらメンテナンスページを彩る美しい背景画像が表示されるはずです。
サードパーティ製ページビルダーでWordPressサイトに背景を追加する方法
おすすめのページビルダーに関する記事では、ドラッグアンドドロップ機能付きのページビルダーの一覧をご紹介しています。WordPressにはGutenbergエディターが既に備わっていますが、他のツールを利用したい方も多いはず。
ここからは、Elementor、Beaver Builder、Page Builder by SiteOriginなど、人気のページビルダーを利用して背景画像を設定する方法をご紹介します。
ElementorでWordPressの背景画像を追加する
まずは、サイトの構築を飛躍的にスピードアップしてくれる人気のページビルダー「Elementor」から。無料のプラグインを利用して、背景画像の設定などが行えます。
また、Elementorでは背景画像をサイト全体だけではなく、様々な箇所に柔軟に適用することができます。例えば、背景画像をあらゆるブロックに適用し、ページ毎に異なる背景画像を表示することも可能です。
まずは、プラグイン「Elementor」をインストールし、有効化します。
Elementorでは、ビルダーの至る所で背景画像を設定できるため、好みに応じて簡単に背景を調整可能です。どの固定ページや投稿の画面を開いても背景画像のアップロードボタンがあります。
今回は、テストサイトのトップページを開きます。「固定ページ」＞「固定ページ一覧」からお好きなページを開きます。投稿に関しても同じ手順で操作できます。
標準のWordPressの固定ページ編集画面を開いたら「Elementorで編集」をクリックします。
すると、画面の表示がElementorのエディターに切り替わります。左側にはページを作成、編集するためのドラッグアンドドロップ式モジュール付きのメニューが表示されます。
背景画像は特定のセクションやブロックではなく、ページ設定として編集します。
エディターの下部左側にある設定の小さなアイコン（歯車）をクリックします。
一般設定の画面が表示されます。
「ページ設定」セクションの「スタイル」タブをクリックします。
「スタイル」タブ内の「背景タイプ」の項目で、ブラシのアイコンをクリックすると標準的な背景が設定できます。
次に、表示したい背景の種類を選択します。例えば、「色」の項目では、単色の背景を設定できます。また、お好みで「背景タイプ」の項目でグラデーションを選択することも出来ます。
「画像を選択」をクリックすると、メディアライブラリからページに適した背景画像を選ぶことができます。
これまでと同様に、最適な寸法とベストプラクティスに従い（多くの場合、高解像度の縦長画像が最適）、背景画像を色々と試してみましょう。最適な画像を選択し、「メディアを挿入」をクリックします。
すると、選択した背景画像が右側のElementorのウェブサイトプレビューに表示されます。テキストや画像などが背景にのせた際にうまく表示されるよう、コンテンツの他の部分を調整しなければならないこともあります。
Elementorでは、「位置」、「添付」、「繰り返し」、「サイズ」などの設定も可能です。背景画像を固定したり、右側に配置したり、サイズを変更したりと、背景画像の表示方法を調整することができます。
最後に「更新」ボタンを押すと、変更を保存し、サイトの新しい背景画像を公開できます。
Elementorで特定のセクションに背景画像を追加
Elementorではページの中の大半のセクションに背景画像を追加できる高度な機能が備わっています。
Elementorのページ上の特定のセクションを選択し、背景画像の設定を変更するだけで、該当の箇所だけ背景を変更できます。
例えば、「テキストエディター」のセクションを選択すると、テキストの部分の設定が変更できます。
「高度な設定」タブから「背景」という項目を探します。
「背景」では、「背景タイプ」、「色」、「画像」など、ページ全体の背景画像の設定と同様に様々な設定が可能です。唯一の違いは、設定の対象が該当の箇所に限定されるという点です。
「背景タイプ」のブラシのアイコンを選択し、「画像」の欄の「画像の選択」ボタンをクリックします。
「メディアライブラリ」から画像を選択し「メディアを挿入」ボタンをクリックします。
ご覧のとおり、該当のセクションの範囲だけ、作成済みのコンテンツの背景に画像が適用されます。
「位置」、「添付」、「繰り返し」、「サイズ」の設定を変更し、セクション内の画像の表示方法を変更してみましょう。
最後に「更新」ボタンをクリックし、変更を保存します。
Beaver Builderで背景画像を追加する
プラグイン「Beaver Builder」には基本的な背景画像関連の機能が利用できるLite版が存在します。こちらは、動画、画像、段落などのコンテンツモジュールが利用できる、人気なページビルダーの一つです。
それに加え、視覚的なツールやCSSを用いて背景の要素をサイト全体、特定のページ、またはページ内の特定の箇所に追加できる背景画像、背景色、背景動画の機能も備わっています。
まずは、プラグイン「Beaver Builder」をインストールします。
お好きなページ、または投稿を開きBeaver Builderで編集を開始します。
編集するには既に作成したページをBeaver Builderの形式に変換する必要があります。または、ページをBeaver Builderで一から作成し、編集することも可能です。
既存のページをBeaver Builderに変換するには、該当のページエディターを開き、右上にあるドットが3つ並んだアイコンをクリックし、「表示」タブを開きます。
下へスクロールし、「Convert to Beaver Builder」をクリックします。
するとページ上の全てのコンテンツが、Beaver Builderのモジュールに変換されます。
ページを一から作成する場合は、「固定ページ」＞「新規追加」をクリックします。
次に「Launch Beaver Builder」をクリックします。
するとBeaver Builderにより、ウェブページのフロントエンドビューが表示されます。画面の大部分を占める完全なフロントエンドエディターになり、要素をクリックし、ボックスをマウスで移動することができます。
Beaver Builderで背景画像を追加する最初の方法は、セクションブロックに背景画像をアップロードすることです。セクションブロックのサイズによって、ページの大部分を占める場合も、ほんの一部の場合もあります。
選択したら、「行の設定」を探します（レンチのアイコン）。
アイコンをクリックし、行の設定画面を開きます。この操作はセクションやカラムなど、他のブロックでも行うことができます。
ウェブサイトのプレビューの上部に設定パネルが表示されます。「スタイル」タブをクリックし、「背景」を探します。
「背景」の項目で、ドロップダウンメニューをクリックし、全ての背景タイプを表示しましょう。
背景タイプには画像以外にも次の種類があります。
- 色
- グラデーション
- 動画
- 埋め込みコード
様々な背景の種類を試してみましょう。
例えば、画像よりもグラデーションの背景の方が合うこともあります。また、背景タイプ毎に個別の設定が可能です。グラデーションの場合、両端の色を選択することができます。
背景画像を選択する場合、メディアライブラリから画像を選ぶか、画像のURLを貼り付ける欄が表示されます。「画像を選択」をクリックすると、メディアライブラリの画像が表示されます。
お好みの背景画像を探し、「画像を選択」ボタンをクリックします。
選択した画像が背景に適用されます。設定の欄では、画像の形式が選べます。「サイズ」、「繰り返し」、「アタッチメント」などの設定をしましょう。
Beaver Builderで全ページ共通の背景画像を設定する
Beaver BuilderはWordPress標準のデザイン機能と連携しているため、既存の背景画像機能も活用できます。
そのため、「外観」＞「背景」のタブを開き、写真の背景画像をサイト全体に適用することもできます。
もしくは、Beaver Builderから任意のウェブページを開き、上部左側にある「ツール」のドロップダウンメニューを展開します。
そこから「グローバル設定」をクリックします。
グローバル設定では、WordPressの標準のコードを上書き、または変更し、サイト全体の設定を変更できます。ここでは、サイト全体の背景画像を一括で変更するCSSコードブロックを挿入してみます。
グローバル設定の「CSS」タブをクリックし、入力欄に次のコードを貼り付けます。
body {
background-image: url("URL to Image");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
background-color: #0f1066;
}「URL to Image」という箇所に使用したい背景画像のURLを記述します。その他、「repeat」、「attachment」、「background size」の部分もCSSコードで変更することができます。
Beaver Builderでは各ページに個別の背景画像を指定できるため、別々に設定したい場合にも便利です。方法は以下をご覧ください。
ページエディターから「ツール」メニューを再度開きます。
「Layout CSS & Javascript」を選択します。
CSSタブに同じコードを貼り付け、「URL to Image」の箇所を実際のURLに変更し、設定をお好みで調整しましょう。
body {
background-image: url("URL to Image");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
background-color: #0f1066;
}ご覧の通り、ページの背景がCSSコードで指定したURLの画像に変更されました。なお、「Layout CSS & Javascript （CSS / Javascriptのレイアウト）」では、該当のページの設定しかできないことを覚えておきましょう。ここで指定した画像は、他のページには適用されません。
Page Builder By SiteOriginでシンプルな列やウィジェットの背景を追加する
Page Builder by SiteOriginもまた、ドラッグアンドドロップ形式の視覚的なウェブサイト構築ツールです。こちらはサイト全体に同じ背景画像を適用する、または、行とウィジェットに背景画像を追加する機能に限定されます。
まずは「Page Builder by SiteOrigin」をインストールし、有効化します。
新しいページを開くか、既存のページにSiteOriginの列を追加します。
SiteOriginでは各セクションで「ウィジェットを追加」、「列を追加」のボタンが表示されます。デザインを一から作成するのが面倒な方は、既存のレイアウトから選ぶこともできます。
SiteOriginではウィジェットにも列にも背景画像を追加できます。
「ウィジェットを追加」または、「列を追加」ボタンをクリックします。
今回の例では、ウィジェットのライブラリを閲覧します。
ここではナビゲーションメニュー、固定ページ、投稿、商品リストなど、SiteOriginにより用意された様々なウィジェットを選ぶことができます。
今回、例として「商品」ウィジェットを選択しますが、ご自分のデザインのニーズに合わせて好きなものを選びましょう。また、これらのウィジェットを列に統合し、列に背景画像を追加すると、複数のウィジェットに背景画像が適用されます。
新しいウィジェットもしくは列は、SiteOriginのページエディターに表示されます。SiteOriginの大部分はWordPressダッシュボードに組み込まれており、他のページビルダーほどフロントエンドエディターの要素は多くありません。
SiteOriginのアイテムに背景画像を追加するには、要素の上にカーソルを合わせ、「編集」をクリックします。
今回は「商品」ウィジェットを選択しましたが、全てのウィジェットでそれぞれサイト上の表示を設定できます。
背景画像に関する機能は、「デザイン」というドロップダウンメニュー下にあります。こちらをクリックしてください。
「背景画像」にある「画像を選択」ボタンをクリックします。
「External URL」欄に背景画像のURLを貼り付けることもできます。
メディアライブラリに、最近WordPressにアップロードした画像が表示されます。背景画像に適した画像を選択、「Done」をクリックし、SiteOriginのモジュールに挿入します。
背景画像の欄に選択した画像のサムネイルが表示されます。
設定画面をさらにスクロールすると「背景画像表示」や背景にのせて表示するテキストの「フォント色」なども設定できます。
一般的には「カバー」が便利です。SiteOriginではデフォルトで「画像のタイル化」が選択されていますので、好みで変更してください。
背景画像の設定が完了したら忘れずに「終了」をクリックしましょう。
ウィジェット（今回の場合「商品」ウィジェット）は該当するページのSiteOriginエディターに追加されます。この要素はページ上の好きな箇所にドラッグでき、上下に新たなウィジェットや列を追加することもできます。
変更内容を確認するには、「プレビュー」または「公開」ボタンをクリックして、ページのフロントエンドを開きましょう。
追加した背景はウィジェットの範囲内に適用されます。こちらの背景はもう少し工夫が必要かもしれませんが、はじめの一歩としては上出来でしょう。
Brizyでユニークな背景画像を追加する
最後にご紹介するページビルダーはBrizyです。Brizyはスタイリッシュなテンプレートと、独特なデザインを簡単に作成できる高度なフロントエンドインターフェースが特徴です。
ページビルダー「Brizy」では既存のウェブサイトに様々なドラッグアンドドロップモジュールを追加できます。また、空白のテンプレートを使用し、ウェブサイトを一から構築することも可能です。
Brizyにはページのあらゆる要素に適用できる背景画像機能も備わっています。さらには、繰り返し再生される動画、マップなど、独特な背景を適用することもできます。
これらを利用するには、プラグイン「Brizy」をインストールし、有効化します 。
Brizyのデザイン作成の多くは空白のテンプレートから開始します。Brizyには既存のデザインをBrizyのモジュールに変換する機能も備わっていますが、一から作成することをおすすめします。
WordPressダッシュボードから「固定ページ」または「投稿」を開き、ページ内のタイトルやコンテンツを作成し始めます。
「Edit With Brizy」というボタンが表示されているはずなので、そちらをクリックすると、ページビルダーが開きます。
Brizyではボタン、テキスト、画像などを含め、サイト全体のプレビューが表示されます。ページが空白になっている場合、「ページの構築を始めましょう」ボタンをクリックします。
上部のメニューバーには「Layouts」、「Blocks」などがあります。
「Layouts」では自分のコンテンツをデザインするのに便利なデモとして、いくつものテンプレートが利用できます。「Blocks」はウェブページを細かく区切ったものですが、あらかじめデザインが作成されているので、ブロックを一から作るよりも簡単です。
どちらを選んでも構いません。「Layouts」や「Blocks」から自由に選び、好きなようにページを構築しましょう。これらが、ウェブページ全体を構成する要素となります。
ウェブページにブロックやレイアウトをいくつか追加したら、エディター画面に戻り、内容を確認します。
各ブロックには右上に設定用のアイコンが表示されているはずです。多くの場合、セクションにカーソルを合わせるとアイコンが表示されます。
編集したいブロックのアイコンをクリックします。ここからブロックに背景を追加することができます。
「Block Settings」の画面は右上に表示されたままになります。メニューアイコンにカーソルを合わせ、機能をそれぞれ確認してみましょう。
設定の一つは背景色を設定する「Colors」です。単色やグラデーションの背景を適用したい場合は、こちらを変更したりグラデーションを追加したりしてみましょう。
その左にあるアイコンからは「Background」（背景画像）が設定できます。
ボタンをクリックすると、ブロックに背景画像をアップロードするためのポップアップが開きます。
Brizyでは背景に次の三種類のメディアを設定できます。
- 画像
- 動画
- マップ
まずは画像を試して、現在のレイアウトに合っているかどうか確認してみましょう。
「雲と上向き矢印」のアップロードアイコンをクリックし、メディアライブラリから画像を選択し、背景画像に追加します。
ここでは木製パネルの写真を適用。パララックス効果はつけない（「画像」の下のドロップダウンメニューから選択可能）ことにしました。
背景色がオーバーレイの役割を果たしつつ、木の質感も背後に残るので素敵な印象です。
パララックスの欄を調整することで、背景画像を固定したり、アニメーションをつけたり、スクロールする背景にしたりできます。
これがBrizyの背景画像の挿入方法です。
Brizyの最も便利なのは、デザインを行ったり来たりしながら、それぞれのセクションの設定アイコンをクリックして編集できる点です。
別のセクションでも同じように、簡単に背景画像を挿入することができます。
背景として別のメディアも選択できます。「ピンのアイコン」を選択し、住所を入力すると、コンテンツの背景にその住所の地図が表示されます。
マップは全画面に表示されます。デフォルトの表示が気に入らなければ、ズームを調整することもできます。
最後に、Brizyで背景に動画を表示する機能も試してみましょう。こちらも、今までと同じセクションにあります。動画のURL（YouTubeやVimeo）を挿入すると、コンテンツの背景全体に動画が表示されます。動画を繰り返し再生する設定もでき、ユーザーがセクションの上をスクロールした際にどの時点から再生するかも指定できます。
次のGIFは動画（まだ編集の余地がありますが）再生の様子です。
背景画像のサイズ、用意、基本的な編集
既にご紹介したとおり、万能な背景画像サイズというものは存在しないものの、ひとまず1024 x 768 ピクセル以上で16:9などの一般的なアスペクト比のものを使用することをおすすめします。アスペクト比は画像の実際のサイズや解像度ほど重要ではありません。画像をトリミングしたり、WordPressにより自動で調整したりすることができるからです。
また自分で写真を撮るのでないならば、適切な場所でWordPressの背景画像を購入、または借りることも重要です。
背景画像はどうやって探すべきか
背景画像の探し方については、WordPressサイトを離れずに写真素材を検索、追加する方法をご覧ください。また、高解像度の写真素材が公開されている便利なサイト一覧も是非ご参照ください。無料の素材も多くあります。
できれば、背景画像は自分で撮影してみることをおすすめします。それが難しい場合や、写真やグラフィックデザインの経験が乏しい場合は無料の写真素材を利用しましょう。もしくは、有料の写真素材サイトから購入するという手もあります。月額料金で複数枚をダウンロードできるところも存在します。
おすすめサイトの一部をご紹介します。
- Unsplash – 無料。クレジットの記載は不要。
- Visual Hunt – 無料の写真。大半の写真はクレジットの記載が不要。
- Pexels – 無料。クレジットの記載は不要。
- Pixabay – 無料。大半の写真はクレジットの記載が不要。
- iStockphoto – 比較的安価な定期購入料金でロイヤリティフリーの画像が利用可能。
- Shutterstock – 良心的な定期購入料金でロイヤリティフリーの画像が利用可能。
WordPressの背景画像をCSSで変更する方法
これまで解説してきたとおり、WordPressの標準機能やプラグインで背景画像を追加、設定することができます。希望する結果が得られるのであれば、どちらの方法を選択しても構いません。他にも、CSSを利用して背景画像を調整したり、追加したりすることも可能です。
背景画像やテーマによって手順は大きく異なるため、ここでCSSの詳細な説明は省きます。WordPressでCSSを編集、追加、カスタマイズする方法をご覧ください。記事では、サイトのメニューや特定のブロックなど、あらゆる箇所に背景画像を追加するのに役立つ情報がご覧いただけます。
WordPress背景画像のよくある問題を解決する
全てのWordPressサイトには背景を追加する機能が本来備わっています。しかし、この標準機能が全てのサイトで利用できるとは限りません。例えば、ご利用のテーマが独自の背景画像に対応していない場合があります。もしくは、背景画像をアップロードしたものの、適切に表示されないこともあるかもしれません（大きすぎる、ぼやけているなど）。
WordPressの背景画像に関する問題は厄介な上、比較的頻繁に発生します。ここからは、背景画像に関するよくある問題とその解決策をご紹介します。
利用中のテーマがWordPressの背景画像に対応していない
WordPressの背景画像機能はテーマの開発者が制御しています。開発者が独自の背景を設定できるようにしたいかどうかによって、その機能の利用可否が決まります。背景画像の機能が不要だと判断された場合や、テーマ全体のデザインを損なうと判断された場合、この機能が無効化されることがあります。
ご利用中のテーマが独自の背景画像に対応していない、もしくは背景画像を追加する機能を制限している場合は、次の方法を試してみましょう。
- 独自の背景画像に対応しているテーマに切り替える。テーマを購入、ダウンロードする際は機能の一覧に背景画像の変更が記載されているかどうかを確認しましょう。
- 無効になった背景画像機能の設定に優先される背景画像プラグインを利用する。
ご自分でコードを記述したり、テーマファイルをいじって背景画像機能を再度有効化したりすることは可能ですが、おすすめはしません。背景画像の機能に対応しているテーマを見つけるか、テーマの機能を大きく損なわずに背景画像の機能を有効にできるプラグインを使用するようにしましょう。
WordPressの背景画像が暗い、または適切な色で表示されない
背景画像が暗くなってしまうのは、多くの場合、背景画像の設定が原因です。オーバーレイフィルター、不適切な背景色が原因であることが大半です。
背景画像の色が適切に表示されない場合、背景を制御するテーマやプラグインを確認してみましょう。
背景画像のフィルターやオーバーレイの設定を確認してください。不透明度の設定を戻すことで背景画像が適切に表示されることもあります。
それでも解決しない場合、テーマファイルに背景画像のフィルターがハードコーディングされている場合があります。その場合、テーマの開発者に問い合わせ、背景画像の色を修正する方法について助言をもらいましょう。
WordPressの背景画像が正しい位置に表示されない
背景画像が適切な位置に表示されないと、サイト全体のデザインが崩れてしまいます。背景画像が左右どちらかに寄っていたり、背景画像のアイキャッチとなるべき部分が画面に全く表示されていなかったりすることもあります。
幸い、背景画像の位置はほんの数クリックで調整できます。
WordPressダッシュボードから「外観」＞「背景」を開きます。背景画像としてアップロードした画像を探し、「画像の位置」の項目を見つけます。こちらから背景画像の配置を上下、左右、隅などに変更することができます。
配置のボタンを全てクリックしてみて、表示を確認してみることをおすすめします。適切な位置になったら、ページを保存しましょう。
WordPressの背景画像が繰り返し表示される
テクスチャや無地の背景は画像の切れ目が分からなくなるため、繰り返し表示した方が美しく見えることが多いものです。しかし、細かい描写が多かったり、たくさんの色を使用したりしている背景画像は繰り返し表示すると非常に見栄えが悪くなってしまいます。
画像が引き延ばさなければ背景全体をカバーできない場合に、繰り返し表示は非常に便利です。そのため、WordPressでは時に画像の解像度を保つために繰り返し表示が自動で適用されることがあります。
この問題は、WordPressの「外観」＞「背景」から解決できます。背景画像としてアップロードされた画像のプリセットを「繰り返し」から「フルスクリーン」、「画面に合わせる」、「カスタム」に変更しましょう。
しかし、小さな画像が背景全体に表示されるようにすると見栄えが悪くなってしまう可能性があります。その場合、使用している背景画像をより大きく、高解像度で、ウェブで表示するのに最適なものに変更するのが一番です。
WordPressの背景画像が引き伸ばされてしまう
背景画像が引き伸ばされてしまっている場合、システムが小さな背景画像で画面全体をカバーしようとしていることを意味します。
また、より大きな、高解像度の写真でも適切なアスペクト比でない場合、同様の問題が発生することがあります。背景画像が引き伸ばされてしまった場合、元のファイルを確認してみましょう。適切な別の画像を探すのが一番の解決方法です。
もしくは、背景画像の設定が不適切な可能性もあります。背景画像の位置の設定や、「画面に合わせる」モードに設定されていないかなどを確認してください。元の寸法のままにするか「繰り返し」表示にすることもできます。
背景画像に関するその他のトラブルシューティング
- WordPressの背景画像機能はテーマの開発者が管理しています。テーマをインストールし、背景画像が適用できない場合はテーマの開発者に問い合わせるか、新しいテーマをインストールして問題が解決するか確認してみましょう。
- 独自の背景色や背景画像の設定は通常、背景画像のサイズ、配置、ソースなどを指定したカスタムCSSコードよりも優先されます。このような理由で、カスタムCSSではなく、テーマの背景画像の設定から調整を行わなければならないこともあります。
- テーマは既に背景画像が適用された状態で販売されていることがあります。通常は、背景画像を別なものに入れ替えるだけで済むはずです。しかし、時に、テーマファイルを編集したり、カスタムCSSを使用したりしてテーマ設定を上書きする必要が生じます。
おすすめのWordPress背景画像プラグイン
背景画像の設定をもっと細かく調整したい方や、動画の背景やページ毎の背景画像が設定できるツールを使ってみたいという方は、次のWordPress背景画像プラグインの使用をご検討ください。
Simple Full Screen Background Image
「Simple Full Screen Background Image」はWordPress標準の背景画像機能とそう大きくは変わりませんが、ブラウザに合わせたリサイズなどが自動化されている点が異なります。
このプラグインは、利用中のテーマが背景画像の追加を制限している場合や、WordPress標準の背景画像機能に何らかの問題があって利用できない方におすすめです。プラグインの設定はWordPressの設定に優先して適用され、WordPressダッシュボード内には画像を簡単にアップロードできるボタンが追加されます。
このように、基本的な機能はシンプルです。
プラグインには有料版も存在し、より高度なリサイズ機能、無制限の背景画像の使用、独自のエフェクトなども利用できます。
Advanced WordPress Backgrounds
「Advanced WordPress Backgrounds」では、別のアプローチでWordPressサイトの背景画像を設定できます。ユニークなエフェクトにより背景画像に一工夫加えることができます。サイトをスクロールすると画像がゆっくりと一緒について移動するパララックス背景がその一例です。
プラグインは動画にも対応しています。動画の背景はYouTubeやVimeoなどから参照できるほか、自分でアップロードしてホストすることも可能です。
また、単色やテクスチャの背景を設定することも可能です。これらの背景の種類には全て、WordPress標準の背景画像機能では利用できない高度な設定を適用することができます。スクロールやスケールのエフェクトや独自のスピードの設定などがその例です。
Gutenbergにも対応しており、WordPressの標準エディターや他の多くのビジュアルページビルダーと一緒に使用することができます。さらに、カスタムCSSを利用すると背景画像をより細かく設定可能です。
Perfect Images + Retina
「Perfect Images + Retina」は2 in 1のソリューションとして便利です。WordPress背景画像のサイズ・外観編集にとどまらず、サムネイルの再生成と画像の置換も可能です。画像管理機能がかなり優れています。高解像度の背景画像の場合、これは特に重要です。
プラグインの有料版を利用することで、背景画像に関する機能も利用できます。高解像度のディスプレイでも画像が適切に表示されるよう、背景画像のRetina版を生成してくれます。
Maintenance
「Maintenance」はメンテナンスページや「近日公開」ページを作成するためのシンプルで使いやすいプラグインです。Maintenanceには無料版と有料版が存在しますが、テキストやフォームの入った背景画像付きのメンテナンスページを作成するだけであれば無料版で十分でしょう。
自分のロゴをアップロードしたり、フォントやアイコンなどを編集したり、美しい背景画像のついた様々なテンプレートを利用したりすることもできます。豊富な既成のテンプレートをインストールすることも可能ですが、その多くは有料ライセンスを要します。
まとめ
基本的なWordPressの背景画像は簡単にサイト全体に適用することができます。WordPressコアに標準で備わっている機能なので、特定のイベントや休日の際だけ背景を交換したい場合も簡単です。もしくは一貫して同じ背景画像を使用し続けるのもいいでしょう。
WordPress標準の背景画像機能の他、カスタムCSSコード、プラグイン、ページビルダーを使ってWordPressサイトに様々な背景を適用することも可能です。特定のページのみに表示される画像背景から、メニューボタンの背景まで、選択肢は無限にあります。
早速WordPressサイトにお気に入りの背景画像を設定してみましょう。
補足や疑問などがある方、WordPressの背景画像の設定や編集に関してお困りのことがある方は是非コメント欄にてお知らせください。
