WordPressテーマ「SWELL」でトップページをカスタマイズしているとき、
「文字サイズを変えたいのにCSSが反映されない！」と悩む方は多いのではないでしょうか。
私も実際、SNSリンクや見出しを調整する過程で何度もCSSを試しましたが、キャッシュや最適化の影響で思うように効かず…。
ところが、最終的に一番シンプルな方法――HTMLの直接入力（インラインスタイル指定）であっさり解決しました。
この記事では、その流れを備忘録も兼ねてまとめつつ、同じ悩みを持つ方の参考になればと思います。
✅ 実際に使ったHTMLコード例（現在は若干、数値等を変えています）
タイトル部分を36px、サブコピー部分を20pxに指定
font-weight:bold; で太字指定
シンプルですが、これだけで見た目を思い通りにできました。
✅ CSSが効かなかったときのチェックリスト
「CSSが反映されない！」と悩んだときに確認したポイントです。
・公開ボタンを押したか？
→ カスタマイザーは保存しないと反映されない
・ブラウザのキャッシュの削除はしたか？
・SWELL設定 → キャッシュ削除 → 全てのキャッシュを削除
・使用中のキャッシュプラグインでも削除
・ブラウザはシークレットモードで確認
・CSS最適化プラグインの影響はないか？
・Autoptimize / LiteSpeed Cache / W3TC などでCSS結合・最小化を一時OFF
・サーバー側キャッシュ/CDNの影響はないか？
・エックスサーバー「Xアクセラレータ」やCloudflareのキャッシュを削除
・セレクタが正しいか？
・SWELLは .p-mainVisual__title や .c-contentsHeader__title など複数パターンがある
・どこに適用するかをブラウザ検証ツールで確認
👉このチェックをすべて試しても効かないとき、HTML直書きが最短でした。
今日、私が最初にやりたかったのは「WordPress（テーマSWELL）のトップページを、各SNSのハブみたいにしたい」ということでした。
最初は「リンクツリー風にシンプルに並べる」か「SNS導線＋小説や記事も出すポータル型」にするかで迷っていましたが、最終的に「ポータル型で構築して、スマホではSNSリンクを一番上にする」方向で進めることに決めました。そこからは「固定ページをホームに設定する方法」「SNSリンクを作る方法」「ボタンを横並びにする方法」と一歩ずつ作業を進めていしました。
特にSNSボタンは数が多いので、リッチカラムを使って「1カラムにつき1ボタン」を配置するやり方を確認しながら試行錯誤。PCで3列、タブレットで2列、スマホで1列、とレスポンシブな表示を目指しました。
その後、トップページのヘッダーが「大きすぎる」「文字を大きくしたい」という調整にをしたいと思いました。最初はCSSで調整を試しましたが、どうしても反映されずキャッシュや最適化の影響を疑ったり、子テーマに追記する案も出ました（AI、4体たちからw）。
でも最終的には「メインビジュアルのテキスト欄にHTMLを直接入力してスタイルを指定する」という単純で確実な方法にたどり着きました。これでタイトル36px、サブコピー20pxを一発で実現できて、思わず「CSSいらんやん！」と笑い話になったのは印象的。
懐かしさもあって「職業訓練で少し習ったHTMLとCSSを思い出した」というエピソードも出て、短期間の学習が今になって役立っていることを実感しました。CSSに振り回されたましたが、HTML直書きという昔ながらの方法でスッキリ解決できたのは大きな収穫でした。
これからは「とりあえず直書きで解決→本格的に全体を整えるときにCSS」という切り替えもできるようになりました。結果的に、トップページはSNSリンク、動画、作品一覧をポータル的に配置できて、第一歩として十分整いました。
今回のカスタマイズで痛感したのは、必ずしも「正攻法＝CSS」が最短とは限らないということです。
WordPressやSWELLは高機能ですが、キャッシュやテーマの構造によってCSSが効かないケースもあります。
そんな時は、まずはシンプルにHTML直書きで解決できるか試すのも有効な手段です。もちろん、サイト全体のデザイン統一や保守性を考えるならCSS管理がベストですが、
「とにかく今すぐ変えたい！」という場合はHTML直書きが最短ルート。
昔かじったHTMLの知識がここで役立ったのは意外でしたが、柔軟に切り替えることで作業はグッと楽になりました。同じように「CSSが効かない！」と困っている方の助けになれば幸いです。
コメント