[ 解決済 ] lightningG3 ページヘッダー画像のカスタマイズ

VWSとは フォーラム Lightning [ 解決済 ] lightningG3 ページヘッダー画像のカスタマイズ

[ 解決済 ] lightningG3 ページヘッダー画像のカスタマイズ

タグ: 

  • このトピックには3件の返信、2人の参加者があり、最後にyanoにより3年、 2ヶ月前に更新されました。
4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • 投稿者
    投稿
  • #55528

    yano
    参加者

    ■ WordPress のバージョン
    5.8

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

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

    ■ テーマのバージョン
    14.7.1

    ■ Pro Unit のバージョン
    0.9.5

    ■ スキンの種類
    Origin III

    ■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
    確認しました。

    ■ 期待する動作
    投稿ページのヘッダー画像カスタマイズ。

    特定ページのヘッダー画像を指定したいと考えております。
    現在他ページは、アイキャッチ画像を表示。
    アイキャッチ画像を投稿一覧でも使用しているため、アイキャチ画像はそのまま使用したいです。

    ■ 自分で試した事
    <試した事>
    「サイトコンテントの上下余白を無しにする」
    「ページヘッダーを表示しない」
    「カバー ブロック」を使用、希望する画像を全幅で挿入することで、
    ほぼ同じレイアウトになりましたが、
    「パンくずリスト」の表示位置が画像上となり、パンくずの場所を指定することができません。

    下記の方法で対応するしかないのでしょうか。
    また、その必要があるのでしたら、
    下記カスタマイズの方法をご教授いただけますでしょうか。
    ご確認よろしくお願い致します。

    ページヘッダーの設定(CSS?)をページごとに行う。
    OR
    「パンくずリスト」の表示位置設定を行う(CSS?)

    ■ 症状が発生するブラウザ
    特に無し

    ■ 実際の症状
    特に無し

    ■ その他特記事項

    #55588

    投稿の編集画面で カスタム CSS に以下の行を入力すれば、個別にヘッダー画像を指定できます。

    .single-post .page-header {
        background: url(********************) no-repeat 50% center;
    }
    
    @media (max-width: 575.98px) {
    .single-post .page-header {
        background: url(xxxxxxxxxxxxxxxxxxxx) no-repeat 50% center;
    }
    }

    ******************** は背景画像(PC)の URL、
    xxxxxxxxxxxxxxxxxxxx は背景画像(モバイル)の URL です。

    #55619

    【改良案】背景画像の差し替えだけなので、↓ この方がすっきりしてよいと思います。

    .single-post .page-header {
        background-image: url(********************);
    }
    
    @media (max-width: 575.98px) {
    .single-post .page-header {
        background-image: url(xxxxxxxxxxxxxxxxxxxx);
    }
    }
    #55645

    yano
    参加者

    対馬様 ご教授ありがとうございます。
    改良案で確認できました。
    (改良案がベストアンサーでしたが、間違えて先に御指南いただいた内容にベストアンサーつけてしまいました)

    ありがとうござました。

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