ボックス内で画像を設置するとはみ出てしまう

0
いいねをした人: 居ません
  • このトピックには3件の返信、3人の参加者があり、最後にshoneにより1ヶ月、 4週前に更新されました。
4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • 投稿者
    投稿
  • #111189
    shone
    参加者
    28

    【お使いの Snow Monkey のバージョン】17.2.6
    【お使いの Snow Monkey Blocks のバージョン】16.0.9
    【お使いの Snow Monkey Editor のバージョン】8.0.2
    【お使いのブラウザ】Google chrome
    【当該サイトのURL】

    いつもお世話になっております。
    タイトルのとおり、ボックス内で設置した画像がボックス外にはみ出してしまいます。

    構成としては、

    「セクション」→「画像とテキスト」→「ボックス」→「画像」

    という階層構造でして、画像とテキストの左側のテキスト部分にボックスを入れ、その中に設置した画像が枠外にはみ出るという現象です。

    具体的には画像はボックス内の最下部で、配置を「右寄せ」にするとはみ出てしまうようです。

    これを回避するために「カラム」を使って2カラムにし、右側のカラムに画像を入れることで試したところイメージに近い形で設置することはできたのですが、カラム内の画像をさらに「右寄せ」にするとやはりはみ出てしまうようでした。

    ひとまず右側カラム内で配置無しの状態にしていますが、右寄せの場合と比較すると微妙に真ん中寄りになってしまうということと、無駄にカラムなど入れて構造を複雑にすると汎用性に欠けるので、できればはみ出ることなく右寄せに設置したいです。

    解決できそうであればよろしくお願いいたします。

    0
    いいねをした人: 居ません
    #111203
    es
    参加者
    62

    shoneさん、こんにちは。

    このような階層構造で合っていますでしょうか。合っていれば確かに仰る現象は再現されました。

    こういった配置が一般的かはわかりませんが、不具合に該当するとは思うのでキタジマさんの回答をお待ちするとして、具体的にこう表現したいというイメージを示していただければ現状でも解決できる方法がご提示できるかもしれませんので、もしあれば共有くださいませ。

    ※もうひとつのトピックのテキストについても確認しましたが、私の環境では再現できませんでした。取り急ぎお伝えしておきます。

    1
    いいねをした人:
    #111261
    キタジマ タカシ
    参加者
    1736

    回り込み = CSS の float なので、基本的にはそのような挙動になります(画像がそのレイヤーから「浮いている」ような感じになる)。

    一応 Snow Monkey には .u-clearfix という clearfix 用の CSS クラスがあるのでそれをボックスブロックの追加 CSS クラスに追加すれば clearfix が適用されますが、ブロックエディターの仕様上 ::after が干渉してしまいエディター上では崩れたままの見た目になります。

    なので実現したいレイアウトにもよると思いますが、回り込みを使わずに実現できるレイアウトであれば回り込みを使わないのがベターかなと思います。

    2
    いいねをした人:
    #111986
    shone
    参加者
    28

    >esさん

    ご返信ありがとうございます、まさにその状況です。

    ボックス内には大きな画像というよりはたとえば手書きの署名のような画像で作成した小さな要素を右寄せに配置したかったのですが、その際に上記の現象が起き微妙な位置調整が難しいということでした。

     

    >キタジマさん

    ありがとうございます。

    なるほど、元々の仕様だったのですね。時間を置いて現在再度試してみたところなぜか同じ画像でも普通に右側配置になったようで…?

    またCSSクラスのご教示ありがとうございます。こちらで意図通り設定できるとのことで、次に同様の現象ありましたらこちらで対処させていただきます。

     

    解決しましたのでトピック閉じさせていただきます。

    お二方ともありがとうございました。

    2
    いいねをした人:
4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • トピック「ボックス内で画像を設置するとはみ出てしまう」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ