- このトピックには6件の返信、2人の参加者があり、最後に
により10ヶ月、 4週前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】20.1.0
【お使いの Snow Monkey Blocks のバージョン】19.3.2
【お使いの Snow Monkey Editor のバージョン】9.2.5
【お使いのブラウザ】Chrome
【当該サイトのURL】### 実現したいこと
1カラムスリム幅のテンプレートで右寄せした画像の右辺を親カラムの右辺と揃えたい。(右にはみ出させたくない)
### 発生している問題
画像が右にはみ出す。(添付画像)
### 試したこと
・左寄せも同様でした。
・テーマを他のテーマに切り替えたところはみ出しはしませんでした。
・1カラムのテンプレートも同様でした。他のテンプレートははみ出してはないのですが微妙に右が揃いませんでした。
Snow Monkeyの仕様なのか、私のCSSが何か悪さしているのか、あるいは設定を間違っているのか切り分けができずヒントをいただけないでしょうか？
よろしくお願いいたします。
いいねをした人: 居ませんこれどこかに書いていたと思うのですが、どこに書いてたかわからなくなっちゃいました、すみません。
これは仕様になります。というのも、ブロックエディターはコンテンツエリアの最大幅を「各ブロック」に
max-widthを指定することで実現します。一般的な web 制作だとコンテンツの親に指定することが多いと思います。親に指定していれば、回り込みさせてもその親からはみ出すことはありませんが、各ブロックに指定されていると親の幅は画面いっぱいなので、コンテンツエリアをはみ出したように見える、ということになります。なので画像ブロックをコンテナーブロックとかグループブロックで囲んで、その中で画像ブロックを回り込みさせると良いのではないかと思うのですがどうでしょうか？
いいねをした人: 居ませんあ、ちなみに今改めて確認してて、下記の 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)); }いいねをした人: 居ませんボックスブロックで囲んだところ、希望の表示になりました！
素早いお返事ありがとうございましたm(_ _)m>あ、ちなみに今改めて確認してて、下記の Snow Monkey の CSS があることでコンテンツエリアの右端にきっちり寄らないので、これはいらない気がしますね…。
これは私の方で何かした方がよいでしょうか？
いいねをした人: 居ませんこれは私の方で何かした方がよいでしょうか？
消して問題がなさそうか調査してから、問題なさそうなら Snow Monkey 自体に手を入れようと思います。とりあえずすぐに不要な余白を除去したいということであれば、
.is-layout-constrained>.alignright.alignright, .p-entry-content>.alignright.alignright, .textwidget>.alignright.alignright { margin-right: 0px !important; }を追加してみてください（Snow Monkey アップデート後は消したほうが良いかもです）。
いいねをした人:
- トピック「画像を右寄せにした時の挙動について」には新しい返信をつけることはできません。