はみ出たデザインについて

♥ 0

Who liked: No user

このトピックには1件の返信、2人の参加者があり、最後にキタジマタカシにより5時間、 29分前に更新されました。

2件の投稿を表示中 - 1 - 2件目 (全2件中)

投稿者

投稿
2025年6月25日 11:02 AM #145518

渡辺聖香
参加者

♥ 0

【お使いの Snow Monkey のバージョン】25.4.7
【お使いの Snow Monkey Blocks のバージョン】24.04
【お使いの Snow Monkey Editor のバージョン】11.0.2
【お使いのブラウザ】Google Chrome
【当該サイトのURL】

### 実現したいこと

こちらの画像のように少し枠からはみ出たデザインを作成したいです。

HTMLやCSSが必要になると思うのですが、あまり詳しくないため、教えて頂きたいです。
基本的なことで申し訳ございません。

♥ 0

Who liked: No user

2025年6月25日 12:59 PM #145523
キタジマタカシ
参加者

♥ 2590
Snow 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';
}
```
色や余白、サイズなどは適当なので、上記を参考に調整してみてください。

♥ 0

Who liked: No user
投稿者

投稿