サポート » テーマ » BusinessPressのヘッダーについて

  • 解決済 mou713

    (@moukun7138)


    BusinessPressのテーマを使用してホームページを作成していますが、トップサイトにレスポンシブ対応のバナー画像を設置したいのですが、以下のサイトのようにするためには、どのようにすればよいですか?
    https://demo.businesspress.jp/businesspress/blog/

    または、日本語対応でおすすめのプラグインがあれば教えてください。
    よろしくお願いします。

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

    提示のサイトにはバナー画像はないようですが、どの部分のことでしょうか?
    画面上部のスライドする画像(スライドショー)の場合は、カスタマイズの「注目の投稿スライダー」より設定することができます。
    投稿がグリッド状に表示されている部分の場合は、カスタマイズの「ブログ設定」で「3カラムギャラリー」を選択するとできます。

    mou713

    (@moukun7138)

    こんにちは

    ご回答ありがとうございます。
    提示のサイトはブログ設定のみなんですね。

    プラグインでバナー画像を掲載することはできるんでしょうか?
    BusinessPressのテーマは、背景が暗くなっていまい、レスポンシブもうまくできないもので・・・

    いいプラグインがなければ、スライドショーではなくても画像単体でも最悪問題ないのですが、ホームのトップにバナーとしてとりあえず画像を載せたいのですが、固定ページで編集した場合どうしてもメニューと掲載した画像の間に隙間が空いているのが気になっています。
    何かいい方法がありましたらご教授ください。

    背景が暗くなっていまい、

    下記 CSS をカスタマイズの [追加 CSS] に追加すると、暗くならなくなります。

    .jumbotron-overlay {
        background-color: rgba( 0, 0, 0 , 0 );
    }

    レスポンシブもうまくできないもので・・・

    どのようにうまくいかないのでしょうか?

    隙間が空いているのが気になっています。

    どこの隙間でしょうか?

    mou713

    (@moukun7138)

    レスポンシブについて上手くいかないことは、画像の比率を一定に保てないことです。掲載したい画像は、どの端末でもしっかり16:9で表示させたいと考えています。もし、CSS設定のみで一定に保つことが出来れば、そのまま使用しようと考えています。

    隙間が空いている件については、もし固定ページに画像を載せた場合の話です。そのときは、上のメニューと固定ページに載せた写真の間に隙間が出来てしまうということです。

    掲載したい画像は、どの端末でもしっかり16:9で表示させたいと考えています。

    下記の CSS ではどうでしょう?

    .jumbotron {
    	background-size: 100% auto;
    	background-position: 0 0;
    	background-repeat: no-repeat;
    	padding-bottom: calc(100%*9/16); /* 16:9 */
    }
    .jumbotron-overlay {
    	height: 0;
    }

    固定ページに画像を載せた場合の話です。そのときは、上のメニューと固定ページに載せた写真の間に隙間が出来てしまうということです。

    メニューと固定ページの間にはヘッダー画像があると思うのですが、ヘッダー画像と固定ページの間の隙間ということでしょうか?この場合は下記 CSS で隙間はなくなると思います。

    .site-header {
        margin-bottom: 0;
    }
    mou713

    (@moukun7138)

    返信ありがとうございます。
    教えていただいたCSSを適用したところ、ホームページヘッダーではなく通常のヘッダーに適応されていました。私の説明不足で申し訳ございません。

    ホームのみ表示されるヘッダーを変更したいと考えております。

    BusinessPressですと、『ビジネスサイト向け無料WordPressテーマ』と記載されている画像ヘッダーに適応させたいと考えています。
    https://businesspress.jp/

    WordPress編集素人のため、ご迷惑をおかけします。

    ホームのみ表示されるヘッダーを変更したいと考えております。

    ホームページヘッダーの場合は、

    .home-header {
    	background-size: 100% auto;
    	background-position: 0 0;
    	background-repeat: no-repeat;
    	padding-bottom: calc(100%*9/16); /* 16:9 */
    	height: 0;
    }
    .home-header-overlay {
    	background-color: rgba( 0, 0, 0 , 0 );
    }
    mou713

    (@moukun7138)

    ありがとうございます。
    無事解決できました。

    色々と丁寧に教えていただきありがとうございました。

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