レッスン記録｜SWELLの限界とHTMLコーディング移行の判断（2026年5月29日・Kさん）
SWELLテーマでのデザイン作業が「うまくいかない」と感じたときに、どう対処するかを話し合ったレッスンの記録です。
今回の内容
- SWELLでの吹き出し・ボタン・アイコンの実装トラブル
- グループ / カラム / セクションボックスの使い分けと限界
- CSSカスタマイズの壁
- HTMLコーディングへの移行判断
- VSCodeとコテーマを使った実装方法の提案
- AIにHTMLを書かせる効率化の話
SWELLでよくある「うまくいかない」パターン
今回のレッスンで出てきた困りごとをまとめます。
吹き出し・ボタン・アイコンがずれる
- セールボタンで作るとレイアウトが崩れる
- 電話アイコンが意図した位置に収まらない
- グループに段落を入れると角丸がついてしまう
- セクションボックスにすると横線が入る
これらは「SWELLのブロックエディタの仕様」によるものです。
画像と段落の重なりを解決するには
リッチカラムで画像＋段落を横並びにしようとしても重なってしまうケースがあります。解決策として「カラムを使って分ける」方法を試しましたが、細かい余白・角丸などの調整はSWELLの管理画面内では対応が難しい場合があります。
SWELLの限界に来たらHTMLコーディングへ
「追加CSS」で頑張っても解決しない細かいデザイン調整は、HTMLコーディングに切り替えるのが現実的な判断です。
手順のイメージ
- SWELLのベーステーマはそのまま使う
- 特定のページ（固定ページなど）をVSCodeで直接開く
- コテーマ（子テーマ）のファイルを編集する
- AIにHTMLを書かせることで実装時間を大幅に短縮
管理画面のカスタマイザーで限界を感じたら「VSCodeを開く」という判断ができるようになると、デザインの自由度が一気に上がります。
AIを使ったHTML実装の流れ
1. 「こういうデザインにしたい」をAIに伝える
2. AIがHTMLとCSSを出力する
3. コテーマのファイルに貼り付ける
4. ブラウザで確認・微調整
SWELLのブロックエディタで戦うより、AIと組み合わせたHTMLコーディングの方が「思った通りのデザイン」に近づける場面が多いです。
関連記事
- WordPressカスタマイズはfunctions.phpとカスタムプラグインどちらに書くべきか
- レッスン記録｜Webデザイン就活戦略・ポートフォリオ・CSSレスポンシブ実践
- WordPressのテーマをゲームにしてみたら仕組みが全部わかった
TAG
