[ 解決済 ] 固定ページ毎に背景画像を設定したい

[suisei98]

■ WordPress のバージョン
6.4.3

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
親テーマ15.20.1　子テーマ0.6.0

■ Pro Unit のバージョン
0.26.5

■ スキンの種類
Origin III

■ 期待する動作
固定ページ毎に違う背景画像を入れたいのですが、設定方法をご教授お願いいたします。

■ 自分で試した事
管理画面→外観→カスタマイズ→背景画像を設定すると、すべての固定ページが同じ背景画像になります。これを固定ページ毎に背景画像を変えたいのですが、どのように設定するとよろしいでしょうか？

■ 症状が発生するブラウザ
chrome、edge

■ 実際の症状
固定ページの編集画面に「背景画像」の項目が見つけられない。

[DRILL LANCER]

Lightning のご利用誠にありがとうございます。株式会社ベクトルの平川です。

管理画面 > 外観 > カスタマイズ > 背景画像

上記につきましては固定ページ毎に設定変更する機能を設けておりませんので
独自にCSSなどでカスタマイズしていただく形になります。

ご了承ください。

また、コミュニティの皆様でこの件についての解決方法（手動でページ毎にCSSで指定などカスタマイズの仕方）をお持ちの方がいらっしゃいましたら、ぜひご投稿をお願いいたします。
ベストアンサーをいただいた方には、VWSで利用可能な500ポイントが付与されます。

[genepinefield]

こんにちは
該当固定ページの カスタム CSS(VK All in one Expantion Unit使用)に下記を追記します。
位置などはほかのCSS設定で調整します。
https://developer.mozilla.org/ja/docs/Web/CSS/background
スマホ表示は考慮していないので、それもご自身で　調整します。
Lightningのブレイクポイント

ブレイクポイントの設定方法

CSSのクラス site-body, entry-body はテーマに依存するはずなので注意が必要です。

/* サイドバー含む */
.site-body {
    background-image: url(http://lightning.wplocal/wp-content/uploads/2024/03/254460-P4GLVT-296.jpg);
    background-size:100%;
}
/* 投稿本文内 */
.entry-body {
    background-image: url(http://lightning.wplocal/wp-content/uploads/2024/03/79524-OFRA3A-972.jpg);
    background-size:100%;
}

Attachments:

You must be logged in to view attached files.

[genepinefield]

参考画像を追加

1. メディアライブラリから画像URLを取得
2. 背景画像の配置

/* サイドバー含む */
.site-body
様々な樹木

/* 投稿本文内 */
.entry-body
Autumn Tree Collection

Attachments:

You must be logged in to view attached files.

[suisei98]

genepinefieldさま

CSSご指導ありがとうございます。

/* サイドバー含む */
.site-body {
background-image: url();
background-size:100%;
}

上記ご指導のCSSを試してみましたが、背景画像が繰り返しとなってしまいます。

私の期待する背景の表示状態は、例えて言いますと「管理画面→背景画像→フルスクリーン」に設定した場合と同じ表示の仕方を期待しているのですが、上記ご指導のCSSを設定しましたところ、「管理画面→背景画像→繰り返し」の設定した時の表示となってしまいます。

繰り返し表示ならないようにしたいのですが、どのようにするとよろしいでしょうか？
よろしくお願いいたします。

[suisei98]

genepinefieldさま

上記文章の訂正箇所がございました。

誤：「管理画面→背景画像→フルスクリーン」
正：「管理画面(ダッシュボード)→外観→カスタマイズ→背家画像→フルスクリーン」

誤：「管理画面→背景画像→繰り返し」
正：「管理画面(ダッシュボード)→外観→カスタマイズ→背景画像→繰り返し」

と読み直していただければと思います。
よろしくお願いします。

[genepinefield]

こんにちは
どういう配置にしたいかは、私にはわかりませんので、最初に例示したサイトで設定値をそれぞれ見つけて設定してください。設定例も記載があります。

位置などはほかのCSS設定で調整します。
https://developer.mozilla.org/ja/docs/Web/CSS/background

調整結果をリアルタイムで設定確認する方法
開発者ツール css

[suisei98]

ご指導ありがとうございました。
色々と試してみます。

[投稿者]

投稿