[博之上田]

石川様
方法は合っています。
そちらの環境ではうまく動作しているようですね。

[博之上田]

石川様
ビデオ確認しました。
パディングの設定方法が異なります。
スライダーではなくスライダーの右のアイコンをタップし、表示されるboxに0を入力しました。

ビデオのようにスライダーで0pxを指定した場合はこちらの環境でもエラーにならないので、手入力の場合だけ起きるのかもしれません。

• この返信は6ヶ月、 3週前に博之上田が編集しました。

Attachments:

You must be logged in to view attached files.

[博之上田]

石川様
もう一度、再現条件を検証してみました。
こちらの環境では以下の手順で100％再現します。

Outerをタップ
Outer内の＋ボタンをタップ
カラムをタップ
66/33カラムを選択
親カラムのカラム数を３に変更
真ん中と右のカラム幅を100pxに修正
左のカラム幅を空欄に修正
（この時点でカラムの幅は左から「指定なし」「100px」「100px」です）
親カラムの「上下パディング」を0pxに設定する

よろしくお願いします。

[博之上田]

石川様
再現できてよかったです。
サイトは、とりあえず再利用ブロックなしで完成しましたので急ぎません。
よろしくお願いいたします。

[博之上田]

石川様
同じコンテンツを再作成しながら各ステップで保存を繰り返したところ、親カラムの「上下パディング」を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を消去していました。

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

[投稿者]

投稿