Skip to content
さきどりふぁくとり~
  • Webマーケティング
  • WordPress
  • SEO
  • YouTube
  • お問い合わせ
  • 求人情報

WordPressで任意のページに背景画像や背景色を設定できるプラグイン

更新日:2022年9月9日
WordPressで任意の記事やページに、ユニークな背景を設定したい!という人は必見です。 背景を個別に設定できるプラグインや、手動でカスタマイズする方法を解説します。 基本的にプラグインより、手動でCSSやPHPを編集してカスタマイズした方が、自由度は高いです。 ハードルも高いのが玉に瑕ですが、チャレンジしてみてくださいね。

目次

  • 1 固定ページの背景を個別に設定する方法は2つ
    • 1.1 固定ページに独自のCSSを設定する
    • 1.2 プラグインを使って背景を設定する
  • 2 背景の色や画像の選び方
    • 2.1 背景色や背景画像の色の効果
    • 2.2 背景色とテキストカラーのバランス
    • 2.3 背景とコンテンツ内容を関連させよう
  • 3 WordPressで固定ページの背景を設定できるElementor Page Builder
    • 3.1 インストール方法
    • 3.2 使い方
  • 4 手動で固定ページの背景を設定する方法
    • 4.1 タイトルからコンテンツが終わるまでのclassの設定
    • 4.2 特定classに設定する画像や背景色をCSSで編集
    • 4.3 CSSでレスポンシブに縦幅を合わせる方法
  • 5 背景画像を個別に設定して個性を演出!

固定ページの背景を個別に設定する方法は2つ

固定ページや特定の記事に、ユニークな背景画像を設定する方法は2つあります。 プラグインを利用する方法と、CSS、PHPでテーマファイルを編集する方法です。 どのように背景画像を設定したいかによっても、方法が変わってきます。

固定ページに独自のCSSを設定する

手動でCSSを設定する方法は、カスタマイズの自由度が非常に大きいです。 その反面、難易度はやや高めになります。 CSSを直接編集したり、テーマにPHPを追加したりするからです。

プラグインを使って背景を設定する

プラグインを使用して背景を設定する方法は、難易度としては低いでしょう。 プラグインをインストールして、後は使い方に従って設定するだけだからです。 しかしカスタマイズの自由度は、プラグインに依存します。

背景の色や画像の選び方

背景を独自に設定する方法の前に、背景画像や背景色を変更する場合の、チョイスの仕方を解説します。

背景色や背景画像の色の効果

サイトデザインで色というのは、非常に重要な要素です。 配色によって見ている人が受ける印象が、ガラッと変わるからです。 例えばグルメレビュー系のサイトで、青色をメインの配色にしているサイトはまず存在しません。 ほとんどのサイトはオレンジや赤、黄色などの暖色系にしています。 青などの寒色は、食欲を抑制する効果があるからです。 逆にクールなイメージを前面に出したい場合、青や水色などの寒色を使用します。 色によって受ける印象が大きく変化することを、意識してデザインしてくださいね。

背景色とテキストカラーのバランス

背景の色とテキストの色が、同系色にならないように注意してください。 テキストが見えにくいサイトは、配色がどうなどという以前の問題です。 なぜならテキストは、コンテンツのほぼ全てです。 つまりテキストを読みづらいということは、コンテンツを無駄にしていることだからです。

背景とコンテンツ内容を関連させよう

グルメや飲食などなら暖色系、清潔感やクールさなどを演出したいなら寒色系など、背景とコンテンツの内容が関連していると、見る人の印象も強くなります。 背景画像も同様です。 しかしあくまで、ユーザーはコンテンツの内容を見ているのであって、背景はおまけだということを認識しておきましょう。

WordPressで固定ページの背景を設定できるElementor Page Builder

WordPressで、固定ページの背景を設定できるプラグインを紹介します。 Elementor Page Builderはとても洗練されたインターフェイスの、WordPressページビルダーです。 インストールや設定はともに簡単ですし、ユーザーインターフェイスが日本語表記なので、直感的に操作することができます。 カスタマイズの自由度は非常に大きく、ほぼ全てのことが可能といって差し支えありません。 背景色や背景画像を差し替えるだけでなく、様々なデザインの場面で活用できるプラグインですよ。

インストール方法

WordPressの他のプラグインと同様に、プラグインの新規追加から検索、インストールして有効化してください。

使い方

設定は基本的に、デフォルトでOKです。 固定ページの新規追加や、記事の新規投稿画面にElementor Page Builderの編集画面に変遷するリンクが出てきます。 Elementor Page Builderの設定画面から、以下の手順で背景を編集します。
手順
  1. コンテンツの「カラムを編集」をクリック
  2. 左サイドバーで「スタイル」「背景」から編集
実際に背景をグラデーションにしてみました。 背景画像の設定なども、もちろん可能ですので編集してみてくださいね。

手動で固定ページの背景を設定する方法

固定ページや記事の背景を設定しようとすると、ひとつのハードルに突き当たります。 記事タイトルを含めた全体に、背景を設定することがプラグインではできません。 手動でCSSやPHPを編集して、以下のような形で背景を設定します。
手順
  1. テーマファイルでページのURLスラッグを取得
  2. 取得したスラッグをclass化
  3. ユニークなclassが配置されるので、背景がほしいclassにCSSを追加
これでタイトルからコンテンツの終わりまでの、背景画像が設定できます。 なおこの方法で「カテゴリによって、サイト全体の背景画像を変化させる」などのカスタマイズも可能です。

タイトルからコンテンツが終わるまでのclassの設定

では実際の設定手順を、順を追って解説します。

子テーマをインストール

テーマファイルやCSSを編集する場合は、必ず子テーマのインストールを済ませておいてください。 また子テーマに編集するテンプレートファイルがない場合は、親テーマからコピーして子テーマの同じディレクトリにアップしてください。 子テーマのインストールは、One-Click Child Themeを使用するとワンクリックで終わります。

固定ページの設定する箇所をデベロッパーツールで確認

Chromeで該当する固定ページを開いた状態で、F12を押してデベロッパーツールを起動してください。 なお、ショートカットとしては「変更したい箇所で右クリック+I+Enterキー」でそのポイントの要素がデベロッパーツールに表示されます。 テストサイトの例ですと<div id=”content” role=”main”>に背景画像を設定するための、ユニークなスラッグによるclassを追加することになります。 イメージとしては<div id=”content” class=”slug” role=”main”>です。

スラッグを取得してテンプレートのclassに追加するコード

スラッグを取得するコードは以下です。 the_postのループ外で使用してください。
&amp;lt;?php
$current_page = sanitize_post( $GLOBALS['wp_the_query']-&amp;gt;get_queried_object() );
$slug = $current_page-&amp;gt;post_name;
?&amp;gt;
記事や固定ページは大抵「single.php」と「page.php」というファイル名ですが、テーマによって異なるのでテーマの仕様書を確かめましょう。 編集する記事ページのテーマファイルを、子テーマのディレクトリに移します。 これでWordPressのテーマエディタから、記事ページのテンプレートファイルが編集できます。 実際に編集して、id=contentの後にスラッグ名の要素を足します。
&amp;lt;div id="content &amp;lt;?php echo $slug; ?&amp;gt;" role="main"&amp;gt;
デベロッパーツールで確認すると、以下のように要素が追加されています。 後は上記の
に、好きなCSSを当てはめるだけです。 実際に他の投稿で、要素名が変更されているかどうかテストしてみましょう。

特定classに設定する画像や背景色をCSSで編集

それぞれの投稿に付与したユニークなスラッグに対して、CSSで背景やその他を設定します。 背景を赤にして、境界線を黒で設定してみました。

CSSでレスポンシブに縦幅を合わせる方法

CSSで背景を色ではなく、画像で設定したい場合もあります。 その場合、背景の画像がレスポンシブに配置されなくて悩むケースが多いようです。 「background-size:cover」を使用すると、背景の大きさに画像がしっかりとはまるようになります。

背景画像を個別に設定して個性を演出!

基本的にプラグインで背景を設定するよりも、テーマファイルを編集してCSSとPHPでカスタマイズした方が自由度が格段に上です。 今回はコンテンツの背景を設定するようにしましたが、カテゴリによってサイト全体の背景画像が切り替えることも可能です。 またjQueryを活用して、背景画像をスライドさせるカスタマイズなどもできますよ。 ハードルは高めですが、チャレンジしてみてくださいね。

カテゴリー

  • AWS (3)
  • SEO (50)
  • SNS (16)
    • Facebook (7)
  • Webマーケティング (38)
  • WordPress (62)
  • YouTube (43)
  • プライバシー・ポリシー (1)
  • 未分類 (2)

プロフィール

ブログ運営・執筆または監修:
株式会社ルミナスネットワークス
https://www.luminous-networks.co.jp

代表取締役:生田 寿行

Webページ制作およびWebアプリケーションの設計~製造に至るまでをすべて通貫して行う独立系SIerです。
弊社はWebマーケティングに強いSIerとしての地位目指し、WEBページを制作することだけでなく、その先のWebマーケティングにも関係する内容を取り扱うことで、高いコストを掛けて制作したWEBページが無駄にならないようお客様を導くことを目標としております。 YouTubeマーケティングやその他SNSについても幅広い知見をもとにお客様をサポートして参ります。

本ブログで記載している内容は、必要に応じて環境を構築し、実際に調査・検証を行っており、より再現性・統計的な正当性の高いデータを目指したものとなっております。
参考にして頂けましたら幸いです。

投稿されている記事に関しまして、もっと深く知りたいという事がございましたら、無料で相談を受け付けておりますのでご遠慮無くお問い合わせください。

お仕事のご依頼・お問い合わせ

目次

  • 1 固定ページの背景を個別に設定する方法は2つ
    • 1.1 固定ページに独自のCSSを設定する
    • 1.2 プラグインを使って背景を設定する
  • 2 背景の色や画像の選び方
    • 2.1 背景色や背景画像の色の効果
    • 2.2 背景色とテキストカラーのバランス
    • 2.3 背景とコンテンツ内容を関連させよう
  • 3 WordPressで固定ページの背景を設定できるElementor Page Builder
    • 3.1 インストール方法
    • 3.2 使い方
  • 4 手動で固定ページの背景を設定する方法
    • 4.1 タイトルからコンテンツが終わるまでのclassの設定
    • 4.2 特定classに設定する画像や背景色をCSSで編集
    • 4.3 CSSでレスポンシブに縦幅を合わせる方法
  • 5 背景画像を個別に設定して個性を演出!
© 2023 さきどりふぁくとり~