WordPressでサイトを作っていると、
「このページだけ背景画像を変えたい」
と思うことがあります。
固定ページごとに背景画像を変えたい。
投稿ページごとに雰囲気を変えたい。
カスタム投稿タイプの個別ページにも背景画像を設定したい。
こういうことはCSSを書けばできます。
ただ、ページ数が増えてくると、
ページIDを調べたり、画像URLをCSSに書いたり、ブラーや透明度を調整したりする作業がだんだん面倒になります。
そこで、WordPressの編集画面からページごとに背景画像を設定できるプラグイン
Page Main Background Manager を作りました。
このプラグインを使うと、固定ページ・投稿ページ・カスタム投稿タイプごとに、CSSを書かずにメインエリアの背景画像を設定できます。
きっかけは「1ページずつ背景を変えたい」という相談
きっかけは、友達に作ったWordPressサイトでした。
そのサイトで、こんな相談を受けました。
「1ページずつ背景を変えたいんだよね」
最初は、CSSで対応すればいいかなと思いました。
固定ページごとに post_id を調べて、
そのページだけに背景画像を指定する。
必要に応じて、白いレイヤーを重ねたり、
本文が読みやすくなるように背景画像にブラーをかけたりする。
やろうと思えば、CSSだけでも対応できます。
実際に最初は、その方法で対応していました。
CSSでページごとに背景画像を指定するのは大変
たとえば、WordPressで特定のページだけ背景画像を変える場合、
ページIDを調べてCSSを書く方法があります。
body.page-id-123 .main-area {
background-image: url("画像URL");
background-position: center center;
background-size: cover;
}1ページや2ページだけなら、この方法でも問題ありません。
でも、背景画像を変えたいページが増えてくると、管理が大変になります。
ページごとに post_id を調べる。
画像URLを確認する。
CSSに追記する。
背景画像の表示位置を調整する。
本文が読みづらければ、透明度やブラーも調整する。
さらに、あとから背景画像を差し替えたい場合も、またCSSを編集する必要があります。
これを毎回やるのは、なかなか面倒です。
そこで、
「編集画面から背景画像を選べた方が楽だな」
と思いました。
編集画面から背景画像を設定できるようにした
WordPressには、固定ページや投稿の編集画面があります。
だったら、その編集画面に
「このページの背景画像」
を設定する欄を追加すればいい。
メディアライブラリから画像を選んで、
透明度やブラーを調整して、
更新したらそのページだけに反映される。
そうすれば、毎回ページIDを調べる必要もありません。
CSSに画像URLを書く必要もありません。
この考えから作ったのが、
Page Main Background Manager です。
Page Main Background Managerとは
Page Main Background Manager は、WordPressの固定ページ・投稿ページ・カスタム投稿タイプの個別ページごとに、メインエリア背景画像を設定できるプラグインです。
管理画面から画像を選択するだけで、
特定のページや記事だけ背景画像を変更できます。
固定ページだけでなく、通常のブログ投稿ページや、カスタム投稿タイプの個別ページにも対応しています。
たとえば、以下のようなページで使えます。
サービス紹介ページ
プロフィールページ
ブログ記事
作品紹介ページ
ツール紹介ページ
イベント紹介ページ
カスタム投稿タイプの詳細ページ
ページごとに雰囲気を変えたいときに使いやすいプラグインです。
Page Main Background Managerでできること
Page Main Background Managerでは、以下のような設定ができます。
固定ページごとに背景画像を設定
投稿ページごとに背景画像を設定
カスタム投稿タイプの個別ページごとに背景画像を設定
背景画像の透明度を調整
背景画像のブラー強度を調整
背景画像の表示位置を選択
背景画像を拡大表示するか選択
CSSを書かずに管理画面から設定
ページごとにCSSを書く必要がないので、
背景画像を複数ページで使い分けたい場合に便利です。
固定ページ・投稿ページ・カスタム投稿タイプに対応
最初は、固定ページごとに背景画像を変えられれば十分かなと思っていました。
でも実際に使うことを考えると、固定ページだけでは足りませんでした。
ブログ記事ごとに背景画像を変えたい場合もあります。
カスタム投稿タイプの個別ページに背景を入れたい場合もあります。
ツール紹介ページや作品紹介ページごとに、違う雰囲気を出したい場合もあります。
そのため、Page Main Background Managerでは、固定ページだけでなく、投稿ページやカスタム投稿タイプの個別ページにも対応させました。
WordPressでページごと、記事ごと、カスタム投稿タイプごとに背景画像を変えたい場合に使えます。
背景画像の透明度を調整できる
背景画像をそのまま表示すると、本文が読みづらくなることがあります。
画像が明るすぎたり、
文字と重なったり、
背景の情報量が多すぎたりすると、
ページの雰囲気は出ても、文章が読みづらくなります。
そこで、背景画像の上に白いレイヤーを重ねられるようにしました。
白レイヤーの透明度を調整することで、
背景画像の雰囲気を残しながら、本文の読みやすさを保てます。
「背景画像は見せたいけど、文字は読みやすくしたい」
という場合に便利です。
背景画像にブラーをかけられる
背景画像には、ブラーをかけることもできます。
背景画像を少しぼかすことで、本文が前面に出やすくなります。
画像を強く見せるというより、
ページ全体の雰囲気として背景を使いたい場合に向いています。
ぼかしなしでも使えますし、
ページのデザインに合わせてブラー強度を調整できます。
背景画像の表示位置をプルダウンで選べる
背景画像は、画像によって見せたい場所が違います。
中央を見せたい画像もあれば、
上の方を見せたい画像もあります。
人物やロゴが左右に寄っている場合もあります。
そのため、背景画像の表示位置をプルダウンで選べるようにしました。
選べる位置は、たとえば以下のようなものです。
中央
上中央
下中央
左中央
右中央
細かすぎる設定にはしていませんが、
通常のページ背景として使うには調整しやすいと思います。
背景画像の拡大表示にも対応
背景画像にブラーをかけると、
画像の端に余白が出たり、見え方が気になる場合があります。
そこで、背景画像を拡大表示する設定も入れました。
チェックを入れると、背景画像を広げて表示できます。
背景をページ全体にきれいに敷きたいときや、
端の余白が気になるときに使えます。
使い方
使い方はシンプルです。
まず、WordPress管理画面からプラグインを有効化します。
次に、背景画像を設定したい固定ページ、投稿ページ、またはカスタム投稿タイプの編集画面を開きます。
編集画面に表示される「メイン背景画像設定」から、背景画像を選択します。
必要に応じて、白レイヤーの透明度、ブラー強度、背景画像の位置、拡大表示を調整します。
最後にページを更新すると、そのページだけに背景画像が反映されます。
CSSを直接編集しなくても、WordPressの管理画面からページごとの背景画像を設定できます。
こんな人におすすめ
Page Main Background Managerは、以下のような人におすすめです。
WordPressで固定ページごとに背景画像を変えたい人
投稿ページごとに雰囲気を変えたい人
カスタム投稿タイプの個別ページに背景画像を設定したい人
ページIDを調べてCSSを書くのが面倒な人
画像URLをCSSに直接書きたくない人
管理画面からページごとの背景を設定したい人
サービス紹介ページや作品紹介ページに世界観を出したい人
1ページだけならCSSで対応してもいいと思います。
ただ、背景画像を変えたいページが複数ある場合は、
管理画面から設定できる方がかなり楽です。
あえてシンプルなプラグインにした
このプラグインは、サイト全体のデザインを大きく変えるものではありません。
アニメーション機能もありません。
細かいレイアウトビルダーでもありません。
テーマ全体をカスタマイズするためのプラグインでもありません。
目的はシンプルです。
WordPressのページごとに背景画像を設定すること。
そのため、機能もできるだけ分かりやすくしました。
編集画面から画像を選ぶ。
透明度やブラーを調整する。
背景画像の位置を選ぶ。
必要なら拡大表示する。
このくらいの操作で、ページごとの背景画像を設定できるようにしています。
注意点
テーマによっては、表示調整が必要になる場合があります。
WordPressテーマごとにHTML構造やCSSが違うため、
すべてのテーマで完全に同じ表示になることを保証するものではありません。
また、背景画像が大きすぎると、ページ表示が重くなる場合があります。
使用する画像は、できるだけWeb向けに軽量化しておくのがおすすめです。
背景画像の著作権にも注意してください。
ダウンロード
Page Main Background Managerは、以下のページで配布しています。
Page Main Background Manager
固定ページ・投稿ページ・カスタム投稿タイプごとに、メインエリア背景画像を設定できるWordPressプラグインです。
背景画像の透明度、ブラー、表示位置、拡大表示を管理画面から調整できます。
まとめ
友達から、
「WordPressで1ページずつ背景を変えたい」
と相談されたのがきっかけでした。
最初はページごとに post_id を調べて、
画像URLやCSSを書いて対応していました。
しかし、ページ数が増えると管理が面倒になります。
そこで、WordPressの編集画面から背景画像を選べるプラグイン
Page Main Background Manager を作りました。
このプラグインを使うと、固定ページ・投稿ページ・カスタム投稿タイプごとに、CSSを書かずに背景画像を設定できます。
WordPressでページごとに背景画像を変えたい方や、
投稿ごとに雰囲気を変えたい方、
カスタム投稿タイプの個別ページに背景画像を設定したい方に向いているプラグインです。
コメント