サポート » テーマ » ヘッダー画像と背景画像等を画面幅いっぱいにしたい

  • 解決済 stargriffin

    (@stargriffin)


    BusinessPressを使用して企業サイトを構築しております。

    表題の通り、ヘッダー画像や背景画像を画面幅いっぱいに設定したいのですが、
    どのようにしたらよろしいのでしょうか?

    試したのは以下になります。
    1.幅1800pxの画像をアップロード->余白が出来る
    2.functions.phpに
    add_filter( ‘businesspress_custom_header_args’, function( $args ) {
    $args[‘width’] = 1800;
    return $args;
    });
    を追加し、画像をアップロード->変化なし

    ブラウザキャッシュも削除してみましたが、プライベートモードでも表示は変わりません。(余白ができる)

    以上になります。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • こんにちは

    BusinessPress テーマのデフォルトの状態では、ヘッダー画像は画面幅いっぱいに表示されると思います。
    テーマのカスタマイズ(CSS を追加など)やプラグインのスタイルの影響かもしれません。カスタマイズ内容を確認したりプラグインを停止してみたりしてみてください。

    ヘッダー画像に関しては、下記 CSS で全幅で表示されるかもしれません。

    #masthead .home-header,
    #masthead .jumbotron {
    	margin-left: calc(50% - 50vw);
    	margin-right: calc(50% - 50vw);
    	max-width: 100vw;
    }
    stargriffin

    (@stargriffin)

    @ishitaka さま

    こんにちは。
    CSSにいただいた内容を追記したところ、全幅で表示されました。
    ありがとうございます。(今度はヘッダー・フッターとのバランスが崩れてしまったのでヘッダー・フッターを調整できないか調べております)

    テーマにはCSSを少し追加しているので、そちらも外してどうか調べてみます。
    なお、プラグインについては全部OFFにしてみましたが幅は変わりませんでした。

    ishitaka

    (@ishitaka)

    ヘッダー・フッターとのバランスが崩れてしまったのでヘッダー・フッターを調整できないか調べております

    body タグあたりのスタイルを変更されたのではないでしょうか?
    動作を確認できるページの URL をお知らせいただくと解決が早いかもです。

    stargriffin

    (@stargriffin)

    @ishitaka

    お手数をおかけいたします。
    こちらになります。
    https://www.marufuji-kanko.com/

    どうぞよろしくお願いいたします。

    stargriffin

    (@stargriffin)

    @ishitaka

    自己レスです。
    bodyタグを確かに変更していました。
    フローチャートのCSSを設定しているのですが、その中で
    bodyタグの項目がありました。

    body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    これを削除することで画面幅がなおりました。

    ishitaka

    (@ishitaka)

    解決されたということでよければトピックのステータスを「解決済み」にしてくださいね。

    stargriffin

    (@stargriffin)

    ありがとうございました。

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