ページごとに背景画像を設定できるWordPressプラグインを作りました

目次

WordPressでサイトを作っていると、こんなことありませんか?

固定ページごとに背景画像を変えたい
ブログ記事ごとに雰囲気を変えたい
カスタム投稿タイプの個別ページにも背景を設定したい
CSSを毎回書くのが面倒
ページや記事の世界観に合わせたデザインにしたい

そんなときに使えるように、
ページ・投稿・カスタム投稿タイプごとにメインエリア背景画像を設定できるWordPressプラグインを作りました。

プラグイン概要

Page Main Background Manager は、WordPressの固定ページ・投稿ページ・カスタム投稿タイプの個別ページごとに、背景画像を設定できるプラグインです。

管理画面から画像を選ぶだけで、特定のページや記事だけ背景を変更できます。

背景画像の透明度やブラーも調整できるため、本文の読みやすさを保ちながら、ページごとの雰囲気づくりができます。

できること

Page Main Background Managerでは、以下のような設定ができます。

固定ページごとに背景画像を設定
投稿ページごとに背景画像を設定
カスタム投稿タイプの個別ページにも背景画像を設定
背景画像の透明度を調整
背景画像のブラー強度を調整
背景画像の表示位置を選択
背景画像を拡大表示するか選択
CSSを書かずに管理画面から設定

主な機能

固定ページ・投稿ページ・カスタム投稿タイプに対応

このプラグインは、固定ページだけでなく、通常のブログ投稿ページや、カスタム投稿タイプの個別ページにも背景画像を設定できます。

たとえば、

サービス紹介ページ
プロフィールページ
ブログ記事
作品紹介ページ
ツール紹介ページ
イベント紹介ページ
カスタム投稿タイプの詳細ページ

など、ページや記事ごとに違う背景画像を設定できます。

「この固定ページだけ雰囲気を変えたい」
「この記事だけ背景を入れたい」
「カスタム投稿タイプの詳細ページに世界観を出したい」

といった使い方ができます。

編集画面から画像を選ぶだけ

背景画像は、WordPressの編集画面から選択できます。

メディアライブラリから画像を選ぶだけなので、毎回CSSを書く必要はありません。

投稿編集画面や固定ページ編集画面で、背景に使いたい画像を選択し、更新するだけで反映できます。

背景画像の透明度を調整できる

背景画像をそのまま表示すると、本文が読みづらくなる場合があります。

このプラグインでは、背景の上に白いレイヤーを重ねることで、背景画像の見え方を調整できます。

画像の雰囲気を残しながら、本文の読みやすさも保てます。

ブラー強度を調整できる

背景画像にぼかしを入れることもできます。

背景を少しぼかすことで、本文が前面に出やすくなり、ページ全体もやわらかい印象になります。

ぼかしなしから強めのぼかしまで、ページに合わせて調整できます。

背景画像の表示位置を選べる

画像の見せたい位置に合わせて、背景画像の表示位置を選べます。

たとえば、

中央
上中央
下中央
左中央
右中央

などから選択できます。

人物やロゴ、風景など、画像の重要な部分が見えるように調整しやすくなります。

背景画像の拡大表示も選べる

背景画像をそのまま表示するだけでなく、必要に応じて拡大表示することもできます。

画像の端に余白が出る場合や、背景全体に広げて表示したい場合に便利です。

ページの見た目に合わせて、通常表示と拡大表示を切り替えられます。

こんなときに便利です

Page Main Background Managerは、ページや記事ごとに雰囲気を変えたいときに便利です。

たとえば、サービス紹介ページでは明るい背景、プロフィールページでは落ち着いた背景、作品紹介ページでは世界観に合った背景、というように、それぞれの内容に合わせたデザインにできます。

また、ブログ記事ごとに背景を変えたい場合や、カスタム投稿タイプで作ったツール紹介・作品紹介ページにも使えます。

特定のページだけデザインを変えたいけれど、テーマファイルやCSSを触るのは面倒、という場合にも使いやすいプラグインです。

使い方

1. プラグインを有効化する

WordPress管理画面から、Page Main Background Managerを有効化します。

2. ページ・投稿を編集する

背景画像を設定したい固定ページ、投稿ページ、またはカスタム投稿タイプの編集画面を開きます。

3. 背景画像を選択する

編集画面に表示される「メイン背景画像設定」から、背景画像を選択します。

4. 透明度・ブラー・表示位置を調整する

必要に応じて、白レイヤーの透明度、ブラー強度、背景画像の位置を調整します。

背景画像を広げて表示したい場合は、「背景画像を拡大する」にチェックを入れます。

5. 更新して確認する

ページや投稿を更新すると、設定した背景画像が反映されます。

注意事項

テーマによっては表示調整が必要になる場合があります。
背景画像が大きすぎると、ページ表示が重くなる場合があります。
背景画像の著作権には注意してください。
使用は自己責任でお願いします。
すべてのテーマで完全に同じ表示になることを保証するものではありません。

ダウンロード

Page Main Background Manager

Ver 1.0.0

page-main-bg-manager

Ver 1.0.0

固定ページ・投稿ページ・カスタム投稿タイプごとに背景画像を設定できるプラグインです。
管理画面から画像を選ぶだけで、特定のページだけ雰囲気を変えられます。
背景画像の透明度やブラーも調整できるため、本文の読みやすさを保ちながらデザインできます。
LP風ページ、プロフィールページ、作品紹介ページ、ブログ記事などにおすすめです。

ダウンロード

まとめ

WordPressでページや記事ごとに背景画像を変えたい場合、毎回CSSを書くのは少し面倒です。

Page Main Background Managerを使うと、管理画面から背景画像を選ぶだけで、固定ページ・投稿ページ・カスタム投稿タイプごとに背景を設定できます。

ページごとの雰囲気を変えたいとき、ブログ記事に個性を出したいとき、作品・サービス・ツール紹介ページの世界観を出したいときに使いやすいプラグインです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次