[徳本 奈穂子]

【お使いの Snow Monkey のバージョン】20.1.0
【お使いの Snow Monkey Blocks のバージョン】19.3.2
【お使いの Snow Monkey Editor のバージョン】9.2.5
【お使いのブラウザ】Chrome
【当該サイトのURL】

### 実現したいこと

1カラムスリム幅のテンプレートで右寄せした画像の右辺を親カラムの右辺と揃えたい。(右にはみ出させたくない)

### 発生している問題

画像が右にはみ出す。(添付画像)

### 試したこと

・左寄せも同様でした。

・テーマを他のテーマに切り替えたところはみ出しはしませんでした。

・1カラムのテンプレートも同様でした。他のテンプレートははみ出してはないのですが微妙に右が揃いませんでした。

Snow Monkeyの仕様なのか、私のCSSが何か悪さしているのか、あるいは設定を間違っているのか切り分けができずヒントをいただけないでしょうか？

よろしくお願いいたします。

♥ 0

Who liked: No user

[キタジマ タカシ]

これどこかに書いていたと思うのですが、どこに書いてたかわからなくなっちゃいました、すみません。

これは仕様になります。というのも、ブロックエディターはコンテンツエリアの最大幅を「各ブロック」に max-width を指定することで実現します。一般的な web 制作だとコンテンツの親に指定することが多いと思います。親に指定していれば、回り込みさせてもその親からはみ出すことはありませんが、各ブロックに指定されていると親の幅は画面いっぱいなので、コンテンツエリアをはみ出したように見える、ということになります。

なので画像ブロックをコンテナーブロックとかグループブロックで囲んで、その中で画像ブロックを回り込みさせると良いのではないかと思うのですがどうでしょうか？

♥ 0

Who liked: No user

[キタジマ タカシ]

あ、ちなみに今改めて確認してて、下記の Snow Monkey の CSS があることでコンテンツエリアの右端にきっちり寄らないので、これはいらない気がしますね…。

.is-layout-constrained>.alignright.alignright, .p-entry-content>.alignright.alignright, 
.textwidget>.alignright.alignright {
  margin-right: calc(var(--_global--container-margin) + env(safe-area-inset-right));
}

♥ 0

Who liked: No user

[徳本 奈穂子]

ボックスブロックで囲んだところ、希望の表示になりました！
素早いお返事ありがとうございましたm(_ _)m

>あ、ちなみに今改めて確認してて、下記の Snow Monkey の CSS があることでコンテンツエリアの右端にきっちり寄らないので、これはいらない気がしますね…。

これは私の方で何かした方がよいでしょうか？

♥ 0

Who liked: No user

[キタジマ タカシ]

これは私の方で何かした方がよいでしょうか？

消して問題がなさそうか調査してから、問題なさそうなら Snow Monkey 自体に手を入れようと思います。とりあえずすぐに不要な余白を除去したいということであれば、

.is-layout-constrained>.alignright.alignright,
.p-entry-content>.alignright.alignright, 
.textwidget>.alignright.alignright {
  margin-right: 0px !important;
}

を追加してみてください（Snow Monkey アップデート後は消したほうが良いかもです）。

♥ 1

Who liked:

[徳本 奈穂子]

ありがとうございます！

そうします！m(_ _)m

♥ 0

Who liked: No user

[キタジマ タカシ]

Snow Monkey v20.2.0 で変更を反映しました！

♥ 0

Who liked: No user

[投稿者]

投稿