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

タグ: 固定ページ, background

このトピックには7件の返信、3人の参加者があり、最後にsuisei98により1年、 7ヶ月前に更新されました。

8件の投稿を表示中 - 1 - 8件目 (全8件中)

投稿者

投稿
2024年3月8日 11:04 AM #88395

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

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

2024年3月8日 11:59 AM #88396

DRILL LANCER
モデレーター

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

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

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

ご了承ください。

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

2024年3月17日 1:22 AM #88727
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.
2024年3月17日 9:19 AM #88755
genepinefield
参加者
参考画像を追加
1. メディアライブラリから画像URLを取得
2. 背景画像の配置
/* サイドバー含む */
.site-body
様々な樹木

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

Attachments:
You must be logged in to view attached files.
2024年3月24日 11:45 AM #89194

suisei98
参加者

genepinefieldさま

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

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

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

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

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

2024年3月26日 1:28 PM #89279

suisei98
参加者

genepinefieldさま

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

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

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

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

2024年3月26日 3:32 PM #89294

genepinefield
参加者

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

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

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

2024年3月26日 9:28 PM #89321

suisei98
参加者

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

投稿