トピックを立てる前にチェック
- 「フォーラムガイドライン」に必ず目を通してください。
- バージョンアップデート後に表示がおかしくなった場合は、
「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。 - フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
フォーラム
通知
すべてクリア
トピックスターター
SWELLのフルワイドブロックの中に「リッチカラム」を配置し、
2列の横並びにして、左側に「画像」、右側に「コンタクトフォーム」を配置しています。
さらにそのそれぞれの列の中に
「グループブロック（クラス名：pop-form-box）」を入れて、アメコミ風の太枠デザイン（borderとbox-shadow）を実装しています。
スマホの縦並びの時はデザインが100%完璧に表示されるのですが、
PCの横並び（Flexbox）になった途端、右側と下側の影（7px）や4pxの太枠がバッサリとカットされて消えてしまいます。
スマホで縦並びの時はうまくいくためデザインのCSS自体は合っていると思うのですが、
PCで横並びになると、フルワイドブロックのインナー幅やリッチカラムの幅計算、
あるいは画像やフォーム特有の横幅制限と競合しているのか、親要素の overflow: hidden; を visible に上書きする等のCSSを試してもPC表示時のみうまく効きません。
PC（横並び）でもスマホ（縦並び）でも、
枠線と影をカットさせずにパキッと表示させるための正しいCSSの指定方法、
あるいはブロックの階層構造の正解を教えていただきたいです。
確認項目
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.19.0
利用中のPHPバージョン
8.4.24
OS
Mac0S
利用中のWordPressバージョン
7.1.2
利用中のサーバー会社
Xサーバー
ブラウザ
Chrome
利用中のプラグイン一覧
BBQ Firewall バージョン 20260809 (作者: Jeff Starr) | 自動更新有効
Category Order and Taxonomy Terms Order バージョン 2.0 (作者: Nsp-Code) | 自動更新有効
Contact Form 7 バージョン 6.1.7 (作者: Rock Lobster Inc.) | 自動更新有効
Customizer Export/Import バージョン 0.9.8 (作者: The Beaver Builder Team) | 自動更新有効
EWWW Image Optimizer バージョン 8.8.0 (作者: Exactly WWW) | 自動更新有効
Pochipp バージョン 1.20.3 (作者: ひろ) | 自動更新有効
SEO SIMPLE PACK バージョン 3.7.0 (作者: LOOS Inc.) | 自動更新有効
Simple CAPTCHA with Cloudflare Turnstile バージョン 1.43.2 (作者: Elliot Sowersby, RelyWP) | 自動更新有効
UpdraftPlus - Backup/Restore バージョン 1.26.8 (作者: TeamUpdraft, DavidAnderson) | 自動更新有効
WP Multibyte Patch バージョン 2.9.3 (作者: Seisuke Kuraishi) | 自動更新有効
WP Revisions Control バージョン 1.4.4 (作者: Erick Hitter) | 自動更新有効
WP Sitemap Page バージョン 1.9.6 (作者: Tony Archambeau) | 自動更新有効
XML Sitemap & Google News バージョン 5.7.7 (作者: RavanH) | 自動更新有効
XO Security
投稿済 : 28/09/2026 2:45 pm