※2026年9月追記：
この記事は2025年に、WordPressテーマ「SWELL」でサイトを作っていたときの制作記録です。
その後サイトはCocoonへ移行し、現在はHTMLとCSSを使いながら全体を作り直しています。
今振り返ると、 「CSSが効かないなら全部HTMLに直書きすればいい」 という話ではなく、 その場だけの小さな調整ならインラインスタイル、複数箇所やサイト全体に関わる調整ならCSS と使い分けるのが一番ラクだと感じています。
当時どうやって問題を解決したのか、 制作ログとしてそのまま残しておきます。
✅ SWELLで文字サイズを変えたいのにCSSが効かなかった
WordPressテーマ「SWELL」でトップページをカスタマイズしていたとき、 「文字サイズを変えたいのにCSSが反映されない！」 という状態になりました。
SNSリンクや見出しを調整する過程で何度もCSSを試しましたが、 思ったように反映されず、 キャッシュやテーマ側のスタイル、 最適化設定など色々な可能性を疑うことに。
ところが最終的に、 そのとき一番早く解決できたのが HTMLへ直接スタイルを書く方法（インラインスタイル） でした。
この記事では、 そのとき試したことと、 実際にどう解決したのかを制作記録としてまとめています。
✅ 実際に使ったHTMLコード例
当時は、 タイトル部分を36px、 サブコピー部分を20pxに指定。
さらに
font-weight:bold;
で太字にしました。
かなりシンプルですが、 この方法ではすぐに希望していた表示になりました。
✅ CSSが効かなかったときに確認したこと
公開・保存されているか確認
まず確認したのが、 変更内容そのものがきちんと保存されているか。
WordPressのカスタマイザーなどは、 変更しただけではなく 「公開」や「保存」が必要です。
ブラウザのキャッシュを削除
CSSを書き換えても、 ブラウザ側に古いデータが残っていると 変更前のデザインが表示される場合があります。
通常表示だけでなく、 シークレットモードでも確認しました。
WordPress側のキャッシュを確認
SWELLのキャッシュ設定や、 使用しているキャッシュ系プラグインについても確認しました。
Autoptimize、LiteSpeed Cache、W3 Total Cacheなどを利用している場合は、 CSSの結合・圧縮・キャッシュなどが影響している可能性もあります。
サーバー側のキャッシュも確認
サーバー側にキャッシュ機能がある場合、 WordPressやブラウザだけではなく そちらも確認する必要があります。
当時利用していた環境では、 エックスサーバー側のキャッシュ設定なども確認しました。
CSSセレクタが正しいか確認
同じ「見出し」や「タイトル」に見えても、 テーマ内部では複数のCSSクラスが使われています。
当時のSWELLでも、
.p-mainVisual__title
など、
場所によって異なるクラスが使われていました。
ブラウザの検証ツールを使い、 実際にどの要素へCSSを適用すればいいのか確認する必要があります。
👉 ここまで色々試しても思い通りにならず、 その場の調整として一番早かったのがHTMLへの直接指定でした。
トップページをSNSハブにしたかった
そもそもこの作業を始めたきっかけは、 WordPressのトップページを 各SNSや作品へつながるハブのようなページにしたかったからです。
最初は、 「リンクツリーのようにシンプルに並べる」 か、 「SNS導線に加えて作品や記事も掲載するポータル型」 にするか迷っていました。
最終的には、 ポータル型で構築し、 スマートフォンではSNSリンクを分かりやすい位置へ置く方向で進めました。
そこから、 固定ページをホームにする方法、 SNSリンクの作成、 ボタンの横並び、 デバイスごとのレイアウト調整などを ひとつずつ進めていきました。
SNSボタンの配置とレスポンシブ対応
リッチカラムで配置
SNSボタンの数が多かったため、 SWELLのリッチカラムを利用し、 1カラムにつき1つのボタンを配置する形を試しました。
PC・タブレット・スマホで表示を調整
PCでは3列、 タブレットでは2列、 スマートフォンでは1列という形を目指し、 レスポンシブ表示も調整しました。
今ではCSS Gridなどを使って自分で組むことも増えましたが、 当時はWordPressテーマの機能を使いながら 少しずつ仕組みを理解していた時期です。
ヘッダー調整でCSSに振り回される
CSSを書いても思った通りにならない
その後、 トップページのヘッダーや文字サイズについても 細かく調整したくなりました。
最初はCSSで調整しようとしましたが、 なかなか思った通りに反映されません。
キャッシュなのか、 テーマ側のCSSなのか、 セレクタなのか。
色々な可能性を疑い、 当時相談していたAIたちからは 子テーマへCSSを書く方法なども提案されました。
最終的にはHTML直書きで解決
しかし、 そのとき必要だったのは 「サイト全体の文字サイズを統一すること」ではなく、 トップページの特定箇所だけを変更することでした。
そこで、 メインビジュアルのテキスト欄へHTMLを直接入力し、 その要素だけスタイルを指定しました。
結果、 タイトル36px、 サブコピー20pxという表示をすぐに実現。
散々CSSと格闘したあとだったので、 「CSSいらんやん！」 となったのを覚えています。笑
昔少し勉強したHTMLとCSSが役に立った
作業をしながら、 以前、職業訓練で少し習ったHTMLとCSSを思い出しました。
当時は、 まさか数年後に自分のWordPressサイトを直すために 使うことになるとは思っていませんでした。
短期間でも一度触ったことがあると、
「これはHTML側の問題か？」
「CSSで調整できそうか？」
「このタグを書けばいいのでは？」
と考えられるだけでも、 かなり違います。
2026年現在：結局CSSもめちゃくちゃ使っています
この記事を書いた頃は、 「とりあえずHTMLへ直接書けば早い」 という場面が多くありました。
しかし、その後サイトを作り直していく中で、 現在はCSSもかなり使っています。
特に、
・複数ページでデザインを統一したい
・PCとスマートフォンで表示を変えたい
・あとから色や余白をまとめて修正したい
・同じデザインを何度も使いたい
という場合は、 やはりCSSで管理した方が圧倒的にラクです。
逆に、
「この一箇所だけ今すぐ少し変えたい」
という場合は、 インラインスタイルで済ませることもあります。
つまり今は、 「HTML直書きかCSSか」ではなく、 その変更がどこまで影響するのかを見て使い分ける ようになりました。
その後、SWELLからCocoonへ移行しました
そしてこの制作ログには、 もうひとつ大きな後日談があります。
現在、このサイトはSWELLではなくCocoonを使用しています。
サイト構成や自分のやりたいことが変わり、 2026年に全体をかなり大きく作り直しました。
トップページ、 プロフィール、 サービス案内、 趣味・創作ページなども、 現在はHTMLとCSSを使いながら再構築しています。
この記事を書いた当時に CSSやWordPressと格闘した経験も、 結果として今のサイト制作や Webサイト修理の仕事につながっています。
当時は単純に 「自分のサイトを直したい」 だけだったものが、 少しずつ経験として積み重なっていきました。
まとめ：その場で解決する方法と、後から管理しやすい方法は違う
このときの作業で学んだのは、 必ずしも 「一番正しい方法＝その瞬間の最短ルート」ではない ということでした。
特定の文字だけ今すぐ変更したいなら、 HTMLへ直接スタイルを書く方が早いこともあります。
一方で、 サイト全体のデザインや、 複数ページへ共通する設定を管理するなら、 CSSの方が圧倒的に便利です。
当時は 「CSSいらんやん！」 で終わりましたが、 2026年現在の結論は、
「HTMLもCSSも、ラクな方を適材適所で使えばいい」
になりました。笑
このサイト自体も、 試して、 崩して、 直して、 また作り直しながら現在の形になっています。
同じように 「CSSが効かない！」 と困っている人にとって、 ひとつの実例として参考になれば幸いです。
コメント