3件の投稿を表示中 - 1 - 3件目 (全3件中)
-
投稿者投稿
-
2025年6月25日 11:02 AM #145518
【お使いの Snow Monkey のバージョン】25.4.7
【お使いの Snow Monkey Blocks のバージョン】24.04
【お使いの Snow Monkey Editor のバージョン】11.0.2
【お使いのブラウザ】Google Chrome
【当該サイトのURL】### 実現したいこと
こちらの画像のように少し枠からはみ出たデザインを作成したいです。
HTMLやCSSが必要になると思うのですが、あまり詳しくないため、教えて頂きたいです。
基本的なことで申し訳ございません。
♥ 0Who liked: No user2025年6月25日 12:59 PM #145523Snow Monkey Blocks だけでは実現できないデザインに見えるので、カラムブロック + CSS を使ってやってみました。
カラム(親)に
application-flowという CSS クラスを設定。
カラム(子)に枠線とパディングを設定。
下記の CSS を追加。.application-flow > .wp-block-column { position: relative; } .application-flow > .wp-block-column::before { position: absolute; inset: -30px auto auto -30px; display: grid; place-content: center; background-color: pink; border-radius: 100%; color: white; aspect-ratio: 1; padding: 10px; } .application-flow > .wp-block-column:nth-child(1)::before { content: 'step1'; } .application-flow > .wp-block-column:nth-child(2)::before { content: 'step2'; } .application-flow > .wp-block-column:nth-child(3)::before { content: 'step3'; }色や余白、サイズなどは適当なので、上記を参考に調整してみてください。
♥ 0Who liked: No user2025年6月25日 9:06 PM #145532 -
投稿者投稿
3件の投稿を表示中 - 1 - 3件目 (全3件中)
- トピック「はみ出たデザインについて」には新しい返信をつけることはできません。
