前略、atsushi.c さん

質問１については、WordPressのツールバーを非表示にすれば良いのではないかと思います。

WordPressの管理バー（ツールバー）を非表示にする方法

https://tcd-theme.com/2011/03/wordpress3-1.html?gclid=Cj0KCQjwmcWDBhCOARIsALgJ2Qec1O-fWs479WjLoV7-Btmlet3Ml8vwX9_NHTlI5ZprqBRzmXTGwi0aAmCAEALw_wcB

atsushi.c さん

質問２については、とりあえず、Cocoon設定の「カラム」タブの設定で

コンテンツ幅

コンテンツ余白幅

コンテンツ枠線幅

サイドバー幅

サイドバー余白幅

サイドバー枠線幅

カラム間の幅

の数値を消してみてください。

数値を消すと、薄い文字でCocoonのデフォルトの数値が表示されますので、「変更をまとめて保存」のボタンをクリックして確定してください。

数値を消すことで、デフォルトの数値に戻るようになっています。

atsushi.c さん

質問１の内容を誤解していました。

正しい回答を次に記します。

atsushi.c さん

アピールエリアに背景画像だけしか設定していない場合は、以下の方法で画像のアスペクト比を保って表示することができます。

#appeal {
  height: 27.4vw;
}

計算式

背景画像の高さ ÷ （背景画像の幅 ＋ 17px(ブラウザの縦スクロールバーの幅)）× 100= 数値vw

atsushi.c さん

今回の画像では、

350 ÷ （1260 + 17）× 100＝27.4

という計算です。

ただ、画像の中央の文字である「未来予想図」も画像の縮小率と同時に小さくなってしまうので、スマホでは判読しづらくなってしまいます。

※CSSのコードは、追加CSSか子テーマのstyle.cssに記述します。

atsushi.c さん

スマホでは「未来予想図」の文字が小さくて読めなーい、という場合は、スマホ用の文字を大きくした背景画像をもう一つ用意して、メディアクエリで差し替えてしまうというのも有りかもしれません。

その場合は、PC用の背景画像とアスペクト比を揃えておくと良いかもしれません。

@media screen and (max-width:480px) { 
  .appeal {
    background-image: url( https://スマホ用の背景画像.jpg );
  }
}

atsushi.c さん

投稿者:: @atsushi-c

ヘッダーとアピールエリアはそのままで、左右の余白を狭めたいのですが、

どうすればいいですか？

どうも、私は、質問２についても誤解しているのかもしれません。

この「左右の余白を狭めたい」という表現が今一つよくわかりません。

もっとブラウザの左右のフチギリギリまで、コンテンツを表示させたい、とうことでしょうか？

私は、個人的には、メインカラムやサイドバーの幅は一定以上に広がらない方が良いと考えています。

メインカラムの幅が広すぎると、文字を目で追う左右の距離が長くなってしまい、文章が読みづらくなってしまいます。

ですので、Cocoonのデフォルトのコンテンツ幅以内にしておいた方が無難かと思います。

atsushi.c さん

やはり、言葉だけですと、誤解が生じやすいので、キャプチャ画像に、ここを狭くしたい、など、具体的な場所を示して赤字で書きこんでいただくと伝わりやすくなるかと思います。

@leafytree　返信ありがとうございます。

やりたかったのは、こんな感じです。ヘッダーとアピールエリアのみを左右いっぱいにする。

また、デフォルトにするとアピールエリア画像の幅でbodyの幅が決まるのでしょうか？

@atsushi-c

投稿者:: @atsushi-c

また、デフォルトにするとアピールエリア画像の幅でbodyの幅が決まるのでしょうか？

@atsushi-c さん、今回の場合は、Cocoon設定の「カラム」タブの設定で、「コンテンツ幅」を広げすぎていることが一番の原因です。

騙されたと思って、一旦、Cocoon設定の「カラム」タブに設定した数値を全部消してみてください。（消すと自動的にデフォルトの数値に戻ります）

Cocoon設定の「カラム幅変更」で変わる場所の説明。

https://wp-cocoon.com/column-settiongs/

@atsushi-c さん

もうひとつ。

Cocoon設定の「全体」タブの設定で、「サイト幅の均一化」のところの「サイト幅を揃える」のチェックを外して「変更をまとめて保存」のボタンで確定してください。

@leafytree　返信ありがとうございました。騙されたと思ってやったら(笑)表示の方はうまく行きました。

後、スマホ用に横幅480PXを作ってコードを入れてみたのですが、反映しません。

画像の保管場所はライブラリです。cssのコードが間違えているのでしょうか？

よろしくお願いします。

@atsushi-cさん

backgorund-image の前に変な文字が混入しているようです。

この変な文字は、テーマエディター上では見えないかと思います。

また、余分な波括弧があります。

CSSのコードを編集するときは、文字コードをUTF-8（BOMなし）でプレーンテキストを扱うことができるテキストエディターをお使いください。

@atsushi-cさん

それと、スマホ用の背景画像のサイズを 480×181px で作成されたようですが、PC用とはアスペクト比が異なっていまっているようです。

スマホ用としては、高さがありすぎるような気もするので、PC用の背景画像と同じアスペクト比の 480 × 132px で作られた方が良いかもしれません。

480×181pxでは、スマホ用のCSSを用意しないと、画像全体が表示されません。

@atsushi-cさん

もし、モバイル用にお作りになられた、480×181px の拝見画像をお使いになるのでしたら、以下のようなコードが要るような気がします。

#appeal {
  height: 27.4vw;
}

@media screen and (max-width:480px) {

  #appeal {
    height: 37.7vw;
  }
  .appeal {
    background-image: url(  https://adm-j.co.jp/wp-content/uploads/2021/04/top_moble.jpg  );
  }

}