[博之上田]

石川様
同じコンテンツを再作成しながら各ステップで保存を繰り返したところ、親カラムの「上下パディング」を0pxに設定すると不具合が再現（保存不可になりました）できました。
「マージン」または「ブロックの間隔」のいずれかの上下の値を0pxにしても再現しました。
添付ご確認ください。

Attachments:

You must be logged in to view attached files.

[博之上田]

うなこさま
返信ありがとうございます。

ご推察の通り、CSSは親のブロック（グループ）に書いています。
・％で指定したのは、パソコンやスマホなど画面サイズが変わっても縦横比が保てる
・bottom: 0px;で指定したかったのは、どの画面サイズでもエリアの一番下に表示できる
と考えました。

ただ、その後４つの画像の大きさを画面サイズ別に変える必要が出てきたので、現在は、以下のように画面サイズ別にTopからの高さを指定（例：top: 20px;）しています。

@media (max-width: 575.98px) { /* モバイル */
selector {
    position: relative;
    left:0px;
    width: 100%;
    height: 400px;
}
.photo_1 {
    position: absolute;
    top: 0px;
    left:0%;
    width: 31%;
    z-index : 90;
}
.photo_2  {
    position: absolute;
    top: 20px;
    left:15%;
    width: 60%;
    z-index : 100;
}
.photo_3  {
    position: absolute;
    top: 70px;
    right:5%;
    width: 30%;
    z-index : 110;
}
.photo_4  {
    position: absolute;
    top: 35px;
    right: 0px;
    width: 60%;
    z-index : 10;
}
.text_top  {
    position: absolute;
    top: 200px;
    width: 100%;
    z-index : 40;
}
}
@media (min-width: 576px) and (max-width: 991.98px) { /* タブレット */
selector {
    position: relative;
    left:0px;
    width: 100%;
    height: 450px;
}
.photo_1 {
    position: absolute;
    top: 0px;
    left:10%;
    width: 31%;
    z-index : 90;
}
.photo_2  {
    position: absolute;
    top: 48px;
    left:33%;
    width: 49%;
    z-index : 100;
}
.photo_3  {
    position: absolute;
    top: 180px;
    left:77%;
    width: 18%;
    z-index : 110;
}
.photo_4  {
    position: absolute;
    top: 75px;
    right: 0px;
    width: 49%;
    z-index : 10;
}
.text_top  {
    position: absolute;
    top: 310px;
    width: 100%;
    z-index : 40;
}
}
@media (min-width: 992px) { /* PC */ 
selector {
    position: relative;
    left:0px;
    width: 100%;
    height: 480px;
}
.photo_1 {
    position: absolute;
    top: 0px;
    left:10%;
    width: 31%;
    z-index : 90;
}
.photo_2  {
    position: absolute;
    top: 48px;
    left:33%;
    width: 49%;
    z-index : 100;
}
.photo_3  {
    position: absolute;
    top: 250px;
    left:77%;
    width: 18%;
    z-index : 110;
}
.photo_4  {
    position: absolute;
    top: 75px;
    right: 0px;
    width: 49%;
    z-index : 10;
}
.text_top  {
    position: absolute;
    top: 330px;
    width: 40%;
    z-index : 40;
}
}

bottom: 0px;の表示がおかしくなる問題は解決していませんが、取り急ぎなんとかなりました。

[博之上田]

石川様
以下の内容で作業しました。

１）当該Outerをコピー
２）「すべての再利用ブロックを管理」タブをタップ
３）「新規追加」をタップ
４）Outerを本文にペースト
５）タイトルを付けて「公開」または「下書き保存」をタップ

結果
赤い背景に「公開に失敗しました。返答が正しいJSONレスポンスではありません。」と表示され登録できませんでした（添付）。

Outerが壊れている可能性があるので今夜、「すべての再利用ブロックを管理」ページでOuterを１から作り直してみます。

Attachments:

You must be logged in to view attached files.

[博之上田]

うまく送れないので再送です。

Attachments:

You must be logged in to view attached files.

[博之上田]

添付します。
これでよろしいでしょうか。

[博之上田]

同じページの「施設Map」のOuterコンテンツでは問題なく再利用ブロックが作成でています。

[博之上田]

zipファイルにてお送りしました。
よろしくお願いします。

[博之上田]

アップロード

Attachments:

You must be logged in to view attached files.

[博之上田]

石川様
ご返信ありがとうございます。
コードを添付いたします。よろしくお願いします。

[博之上田]

対馬さん

下記CSSに修正したら、思う通りに表示できました。
ご確認ありがとうございました。

selector{
position: fixed !important;
left: 50%;
transform: translateX(-50%);
top: 0;
width: 1110px;
z-index: 10;
margin:0 auto;
box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
} 

/*管理画面が編集しずらいので追加*/
.editor-styles-wrapper selector{
position: relative !important;
}

[博之上田]

対馬さん
ご指摘ありがとうございます。
ご指摘のところにCSSを記載したら表示が崩れるのでCSSを消去していました。

記載しましたので、お手数ですがもう一度見ていただけると嬉しいです。

[博之上田]

対馬様
selectorをselector a に修正したら解消しました。
ありがとうございました。

[博之上田]

[博之上田]

石川様
早々のご返信ありがとうございます。
theme.json確認したところ、すでにONになっていて、よく見ると設定項目がメニューにありました。
やってみたら、簡単に設定できました。

こんな便利な機能があるとは知りませんでした。
教えていただき本当に助かりました。

本サイトは、親戚から依頼されてコーディングしています。
CSSなど、今まで使ったことがない機能やデザインの実装に苦労していますが、新しいことにチャレンジできて楽しいです。

[博之上田]

元々の不具合（サイドバーが消える）は解決しましたので、この質問は解決済みにさせていただきます。
スクロールすると縦に移動する腱はもう少し自分で調べてみます。

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

[投稿者]

投稿