[ 解決済 ] ヘッダー画像のモバイル画像が左右切れてしまう。

VWSとは フォーラム Lightning [ 解決済 ] ヘッダー画像のモバイル画像が左右切れてしまう。

[ 解決済 ] ヘッダー画像のモバイル画像が左右切れてしまう。

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

    阿部文哉
    参加者

    ■ WordPress のバージョン
    バージョン 5.9.1

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

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

    ■ テーマのバージョン
    バージョン: 14.17.5

    ■ Pro Unit のバージョン
    バージョン 0.17.1

    ■ スキンの種類
    Origin III

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

    ■ 期待する動作
    ヘッダー画像にパソコン用、モバイル用設定したのですがモバイル用の画像が切れて表示されてしまいます。パソコン用、モバイル用共にちゃんと表示させたいです。

    ■ 自分で試した事
    最小高さを変更してみてもどちらかが切れたりします。

    ■ 症状が発生するブラウザ
    スマートフォンでのブラウザ

    ■ 実際の症状
    ヘッダー画像にパソコン用、モバイル用設定したのですがモバイル用の画像が切れて表示されてしまいます。


    該当URL : https://*********

    ※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

    #62863

    うなこ
    モデレーター

    background-size: cover;
    ではなく
    background-size: contain;
    にして、その他の調整してみるのはいかがでしょうか。

    #62867

    阿部文哉
    参加者

    すみません。詳しくないのですがどこから編集したらよいのでしょうか

    #62874

    うなこ
    モデレーター

    すみません。詳しくないのですがどこから編集したらよいのでしょうか

    機能としてはありませんので、CSSでカスタマイズする形になります。

    このページのページヘッダー画像だけを調整したいということですよね。
    でしたら、プラグイン VK All in One Expansion Unit にCSSカスタマイズ機能で、特定のページにのみ出力するCSSを書く事ができます。
    編集画面から該当の固定ページをひらき、ページの下の方にある「VK All in One Expansion Unit」の設定から「カスタム  CSS」を開いて、そちらに以下のCSSを添付してください。

    .page-header {
    background-size: contain;
    }

    min-heightの数字も変わると思いますので、その辺りは調整して、追加で記述してみてください。

    ▼CSSのカスタマイズに関しましては、以下を見ると分かりやすいのでぜひご確認お願いいたします。

    できる!WordPressカスタマイズ #01 簡単なデザイン(CSS)カスタマイズ方法徹底解説

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

    阿部文哉
    参加者

    ご連絡いただきありがとうございます。
    試してみたのですが切れることはないのですがパソコンの画面の全幅に合わせるとスマホの方が上下余白がかなりできてしまいます。何かいい方法はございますか?よろしくお願い申し上げます。

    #62920

    * 該当記事編集画面の「Lightningデザイン設定」からページヘッダーを非表示にして、本文欄内最上部に普通に画像を配置
    * PCとモバイル2つ画像を配置して、該当画像ブロックの非表示設定で画面サイズを指定

    の方が早いと思います。

    #62921

    阿部文哉
    参加者

    ご回答いただき有難うございます。
    そちらの方法は試したのですが、全幅表示させたいのでOuterブロックで試したのですが、2カラムなのでサイドと被って表示されてしまうのです。トップページと同じように表示したいのですがよい方法ございますでしょうか。

    #62924

    うなこ
    モデレーター

    ご連絡いただきありがとうございます。
    試してみたのですが切れることはないのですがパソコンの画面の全幅に合わせるとスマホの方が上下余白がかなりできてしまいます。何かいい方法はございますか?よろしくお願い申し上げます。

    背景画像ですので min-heightをブレイクポイントごとに出しわけする必要があるとおもいます。
    例えばこんな感じです。

    @media (max-width: 991.98px){
    min-height: 〇〇px;
    }
    @media (max-width: 767.98px){
    min-height: 〇〇px;
    }
    @media (max-width: 575.98px){
    min-height: 〇〇px;
    }

    でも少しめんどうなので、石川さんの方法がいいなと思ったのですが、ページが2カラムということで、
    石川さんのやり方でいくなら、1カラムにしてカラムブロックで2カラムにして、サイドメニューは手動でブロックなどで入れるとかでしょうか、、?

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