ふせん風のブロックをノーコードで作るやり方

下記のテーマでうまく作れることを確認しています。

X-T9
Lightning ( G3 / theme.json )

手順① 段落ブロックを置く

ふせん風

手順② 段落ブロックをグループブロックで囲む

この時点ではなにも変わりません。

ふせん風

手順③ グループブロックのスタイルを設定する

グループブロックの背景色、パディング、枠線（右 50px）を設定します。

ふせん風

このままだと幅いっぱいに表示されて使いづらいです。
ノーコードの制約がなければ display: inline-block; を使うのですが…😊

手順④ グループブロックを横並びブロックで囲む

CSS を使わなくてもこんなふうにできます。横並びブロックなので、中央揃え・右揃えもかんたんです。

ふせん風

手順⑤ グループブロックにドロップシャドウを設定する

立体感が出ていいかんじになります。

ふせん風

使用例

カバーブロックに入れて使ってみました。

2025.6.1 ドッグランにて

トリミングに来てくれた子たち

ドッグランをご利用の方へ

飼い主は常に愛犬から目を離さないでください。
他の犬や人に迷惑をかける行為はお控えください。
発情中の犬、病気の犬のご利用はご遠慮ください。
噛み癖・攻撃性のある犬は入場をご遠慮ください。
排泄物は飼い主が責任を持って処理してください。
おもちゃやおやつの使用は周囲に配慮して行ってください。
小さなお子様の同伴は、安全に十分ご注意ください。
ドッグラン内での飲食・喫煙は禁止です。
ご利用前には必ず事前に登録・同意書への署名をお願いします。
施設のルールやスタッフの指示には従ってください。

画像ブロックに重ねてみました。

制作費用割引キャンペーン中

投稿者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら…という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら