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直書きが最短でした。
トップページをSNSハブにしたいと思ったきっかけ
今日、私が最初にやりたかったのは「WordPress（テーマSWELL）のトップページを、各SNSのハブのようにしたい」ということでした。
最初は「リンクツリー風にシンプルに並べる」か「SNS導線＋小説や記事も出すポータル型」にするかで迷っていましたが、最終的に「ポータル型で構築し、スマホではSNSリンクを一番上にする」方向で進めることに決めました。そこからは「固定ページをホームに設定する方法」「SNSリンクを作る方法」「ボタンを横並びにする方法」と、一歩ずつ作業を進めていきました。
SNSボタンの配置とレスポンシブ対応
リッチカラムでの配置方法
特にSNSボタンは数が多いため、リッチカラムを使って「1カラムにつき1ボタン」を配置するやり方を確認しながら試行錯誤しました。
デバイスごとの表示調整
PCで3列、タブレットで2列、スマホで1列という、レスポンシブな表示を目指しました。
ヘッダー調整とCSS問題の解決
CSSが反映されない問題
その後、トップページのヘッダーが「大きすぎる」「文字を大きくしたい」という調整をしたいと思いました。最初はCSSで調整を試しましたが、どうしても反映されず、キャッシュや最適化の影響を疑ったり、子テーマに追記する案も出ました（AI4体からの提案です…笑）。
HTML直書きでシンプルに解決
しかし最終的には「メインビジュアルのテキスト欄にHTMLを直接入力してスタイルを指定する」という単純で確実な方法にたどり着きました。これでタイトル36px、サブコピー20pxを一発で実現できて、思わず「CSSいらんやん！」と笑い話になったのが印象的です。
学習の経験と今後の方針
過去の学びが役立った瞬間
懐かしさもあって「職業訓練で少し習ったHTMLとCSSを思い出した」というエピソードも出て、短期間の学習が今になって役立っていることを実感しました。CSSに振り回されましたが、HTML直書きという昔ながらの方法でスッキリ解決できたのは大きな収穫でした。
今後の取り組み方
これからは「とりあえず直書きで解決 → 本格的に全体を整えるときにCSS」という切り替えもできるようになりました。結果的に、トップページはSNSリンク、動画、作品一覧をポータル的に配置でき、第一歩として十分整ったと思います。
まとめ
今回のカスタマイズで痛感したのは、必ずしも「正攻法＝CSS」が最短とは限らないということです。
WordPressやSWELLは高機能ですが、キャッシュやテーマの構造によってCSSが効かないケースもあります。
そんな時は、まずはシンプルにHTML直書きで解決できるか試すのも有効な手段です。
もちろん、サイト全体のデザイン統一や保守性を考えるならCSS管理がベストですが、
「とにかく今すぐ変えたい！」という場合はHTML直書きが最短ルート。
昔かじったHTMLの知識がここで役立ったのは意外でしたが、柔軟に切り替えることで作業はグッと楽になりました。
同じように「CSSが効かない！」と困っている方の助けになれば幸いです。
関連記事
コメント