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

VWSとは フォーラム Lightning [ 解決済 ] 固定ページ毎に背景画像を設定したい

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

  • このトピックには7件の返信、3人の参加者があり、最後にsuisei98により3週前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #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

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

    #88396

    DRILL LANCER
    モデレーター

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

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

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

    ご了承ください。

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

    #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.
    #88755

    genepinefield
    参加者

    参考画像を追加

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

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

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

    Attachments:
    You must be logged in to view attached files.
    #89194

    suisei98
    参加者

    genepinefieldさま

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

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

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

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

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

    #89279

    suisei98
    参加者

    genepinefieldさま

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

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

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

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

    #89294

    genepinefield
    参加者

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

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

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

    #89321

    suisei98
    参加者

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

8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • このトピックに返信するにはログインが必要です。