SWELL– category –

SWELLのテーブル（表）の線や色を変えるCSSを6種類、表示画像つきで紹介します。どれも「追加CSS」に貼るだけで使え、表のスタイルがストライプやシンプルでも同じ見た目になります。色の変え方と、反映されないときの確認方法もまとめました。

SWELLのボタンのデザインと、マウスを乗せたときの動きを変えるCSSを6種類紹介します。どれも「追加CSS」に貼るだけで使え、実際に動く見本で動きを確認できます。色はSWELLのボタン設定の色をそのまま使います。

SWELLのアコーディオンとステップの見た目を変えるCSSを、6種ずつ合わせて12種類、実際の表示画像つきでまとめました。どれも「外観」→「カスタマイズ」→「追加CSS」に貼るだけで使えます。色の変え方と、反映されないときの確かめ方も紹介します。

SWELLのステップ・アコーディオンは、CSSを追加すると文字サイズや余白、角の丸みを変更できます。Chromeでクラス名を調べる手順と、子テーマか追加CSSに記述するCSSの例、反映されないときの確認点、Claude Codeへの伝え方を紹介します。

SWELLの見出し2・見出し3のデザインを変えるCSSを10種類、実際の表示画像つきでまとめました。どれも「外観」→「カスタマイズ」→「追加CSS」に貼るだけで使え、SWELLの見出し設定が何でも同じ見た目になります。色の変え方と、反映されないときの確かめ方も紹介します。

SWELLにはJPEGやPNGをWebPへ変換する機能がなく、WordPressも自動では変換しません。アップロード前にcwebpで変換する方法と、プラグインで変換する方法の選び方、WebPで配信されているかの確認手順まで解説します。

SWELLの目次を、邪魔な記事だけ非表示にする方法です。投稿編集画面の「SWELL設定」で切り替えられ、サイト全体の設定より優先されます。抽出する見出しの深さと、ショートコードで位置を決める方法も紹介します。

Claude CodeでSWELLを安全にカスタマイズする方法です。親テーマを変更しない子テーマの使い方、SWELL独自ブロックを推測で書かせないコツ、壊してしまった実例と戻し方、最終確認のやり方をまとめました。

SWELL でお問い合わせフォームを固定ページに設置する手順を、定番の Contact Form 7 と SWELL 開発者推奨の WPForms の2択で整理。自動返信メールの設定と、公開前の送信テストまで解説します。