画像を右寄せにした時の挙動について

0
いいねをした人: 居ません
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #124221
    徳本 奈穂子
    参加者
    23

    【お使いの 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
    いいねをした人: 居ません
    #124224
    アバター画像キタジマ タカシ
    参加者
    2286

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

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

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

    0
    いいねをした人: 居ません
    #124228
    アバター画像キタジマ タカシ
    参加者
    2286

    あ、ちなみに今改めて確認してて、下記の 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
    いいねをした人: 居ません
    #124233
    徳本 奈穂子
    参加者
    23

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

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

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

    0
    いいねをした人: 居ません
    #124257
    アバター画像キタジマ タカシ
    参加者
    2286

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

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

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

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

    1
    いいねをした人:
    #124824
    徳本 奈穂子
    参加者
    23

    ありがとうございます!

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

    0
    いいねをした人: 居ません
    #125379
    アバター画像キタジマ タカシ
    参加者
    2286

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

    0
    いいねをした人: 居ません
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • トピック「画像を右寄せにした時の挙動について」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。