Cocoonを使っていると、途中から「HTMLやCSSがかなり見づらいな…」と感じる人は多いと思います。
特にビジュアルエディタを多用していると、.fz-15pxのような自動クラスが大量に増えて、コードエディタを開いた瞬間に少し萎えるんですよね。
実際、私も以前はCocoonを使っていました。
今はSWELLへ移行していますが、当時かなり同じ悩みを持っていました。
「これ本当に管理しやすいのかな？」
「style.cssで整理した方が良くない？」
そんなことを何度も考えていました。
ただ、使い続けて分かったのは、Cocoonの設計が悪いわけではなく、“初心者向けに最適化されている”ということです。
HTMLやCSSを書けなくても、簡単にデザインを作れる。
その代わり、自動クラスが増えやすい。
これはある意味トレードオフなんですよね。
この記事では、CocoonのCSS設計が「古い」と言われる理由、自動クラスが見づらく感じる原因、子テーマstyle.css中心へ移行しても良いのか、実際にCocoonからSWELLへ移行した感想まで、かなりリアルにまとめています。
「テーマを使い続けるべきか悩んでいる」
「もっとコードを整理したい」
そんな人は、かなり参考になると思います。
この記事でわかること
- CocoonのHTMLやCSSが見づらい理由
- Cocoonの設計思想と初心者向け最適化
- 子テーマstyle.css中心運用へ移行する考え方
- CocoonとSWELLのコード管理の違い
CocoonのHTMLやCSSが見づらいと感じる理由
Cocoonを使い始めた頃、私は「無料テーマなのにここまでできるのか」とかなり驚きました。
実際、SEO設定もある程度整っていますし、装飾機能も豊富です。
しかもWordPress初心者でも、ある程度それっぽいサイトが簡単に作れる。
だから今でも人気がある理由はよく分かります。
ただ、使い込んでいくと、だんだん別の感情が出てきました。
「コードが見づらい…」
これです。
特にHTMLやCSSを少し触れる人ほど、この違和感を持ちやすい気がします。
実際、私も以前はCocoonを使っていて、今はSWELLを使っています。
だから質問者さんの感覚はかなり理解できます。
自動生成クラスが大量に増える
ビジュアルエディタで文字サイズを変えたり、装飾を追加したりすると、class=”fz-15px”みたいなクラスがどんどん増えます。
最初は便利なんですが、コードエディタを見ると急にゴチャついて見えるんですよね。
しかも途中から、「このクラスどこで効いてるんだっけ？」となる。
私はこれがかなり苦手でした。
特に記事数が増えた頃、一気に管理が面倒になった記憶があります。
ビジュアルエディタ中心設計になっている
ただ、ここで最初に言っておきたいのは、Cocoonの設計が悪いわけではないということです。
むしろ逆です。
Cocoonはかなり初心者向けに最適化されています。
つまり、「HTMLやCSSを書かなくても、それっぽいデザインを作れる」方向へ振り切っているんですね。
だから自動クラスが大量に付与される。
これは設計思想の違いです。
例えば、文字サイズ変更、文字色変更、余白調整、囲みボックス、吹き出しなどを、できるだけ簡単に使えるようにしている。
その結果、HTMLが長くなる。
これはある意味、仕方ない部分でもあります。
コード管理派ほど違和感を持ちやすい
ただ、コードを書く側からすると、少し窮屈に感じるんですよね。
特に途中からCSSを自分で触り始めると、その違和感が一気に強くなります。
私は当時、「style.cssで全部管理した方が絶対分かりやすい」と思うようになりました。
そして実際、少しずつそう変えていきました。
最初は追加CSSだけ使っていたんですが、途中から子テーマ側で独自クラスを作るようになったんです。
例えば、.article-title、.content-box、.card-wrapみたいに、自分で意味の分かる名前を付ける。
すると後から見返した時、かなり理解しやすくなるんですよね。
特に記事数が増えてくると、この差はかなり大きいです。
CocoonのCSS設計は本当に古いのか
Cocoonを使っていると、「この設計って少し古くない？」と感じる人は結構いると思います。
特にHTMLやCSSを勉強し始めたタイミングだと、その違和感はかなり強くなりやすいです。
ただ、個人的には「古い」というより、「目的が違う」と考えた方が自然かなと思っています。
実際、私も最初はかなり引っかかっていました。
でも途中から、「ああ、これは初心者向けにかなり割り切って設計されてるんだな」と感じるようになりました。
初心者向けテーマとしては合理的
Cocoonの一番強いところは、やはり初心者でもサイトを作りやすいことです。
例えば、CSSを書けなくても、ボタンや囲み装飾、吹き出しなどを簡単に使える。
しかもSEO設定も最初からかなり整っています。
WordPressを始めたばかりの頃って、「まず記事を書く」まで辿り着くのが意外と大変なんですよね。
その点、Cocoonはかなり親切です。
私も最初は、ほぼテーマ機能だけでブログを作っていました。
だから、初心者向けテーマとして考えると、あの設計はかなり合理的だと思います。
特に「HTMLやCSSを書かずに運営したい人」にとっては、かなり便利です。
Bootstrap系に近い設計思想
あと、あの自動クラス設計って、実は完全に特殊というわけでもありません。
考え方としては、Bootstrap系のユーティリティクラス設計に近い部分があります。
例えば、余白や文字サイズをクラス単位で制御する考え方ですね。
だから、設計そのものが間違っているわけではないんです。
ただ、Cocoonの場合はビジュアルエディタ連携がかなり強い。
その結果、HTMLが長くなりやすい。
ここがコード管理派には少し気持ち悪く見える原因だと思います。
私も当時、コードエディタを開くたびに「なんか落ち着かないな…」と感じていました。
特にdivやspanが増え始めると、一気に見づらくなるんですよね。
ただ、逆に言えば、それだけ細かい装飾を簡単にできるとも言えます。
中級者以上とは相性が分かれる
WordPressに慣れてくると、「もっと自分で制御したい」と感じる人が増えてきます。
これはかなり自然な流れだと思います。
私も途中から、「もう少しHTMLをシンプルにしたい」と思うようになりました。
特にCSSを整理し始めると、Cocoon標準クラスとの混在が気になり始めます。
すると今度は、style.css中心で管理したくなる。
だから、中級者以上になると好みが分かれるんですよね。
実際、Cocoonを使い続ける人もいますし、SWELLや自作テーマへ移行する人もいます。
どちらが正しいというより、「どこまで自分で触りたいか」の違いが大きいです。
私は最終的にSWELLへ移行しましたが、今でもCocoonは初心者向けテーマとしてかなり優秀だと思っています。
ただ、コード管理を強く意識し始めた人には、少し窮屈に感じやすいのかもしれません。
子テーマのstyle.css中心へ移行してもいい？
ここはかなり気になるポイントだと思います。
「Cocoon標準機能を使い続けるべきなのか、それとも自分でCSS管理した方がいいのか」
実際、私もかなり悩みました。
でも今振り返ると、途中から子テーマ中心へ移行したのは正解だったと思っています。
特に記事数が増え始めると、コード管理のしやすさがかなり重要になるんですよね。
独自クラス管理はむしろ普通
最初の頃は、「テーマの機能をそのまま使うのが正解なのかな」と思っていました。
でも、WordPressに慣れてくると、多くの人が少しずつ独自CSSを書き始めます。
これはかなり普通の流れです。
例えば、毎回ビジュアルエディタ側で余白や文字サイズを調整するより、共通クラスを作った方が圧倒的に管理しやすい。
私は途中から、よく使うデザインを全部クラス化しました。
例えば、.article-box、.content-wrap、.check-pointみたいな感じです。
すると、あとで修正する時かなり楽になるんですよね。
特に複数記事へ同じデザインを適用したい時、この差はかなり大きいです。
逆に、Cocoonの自動クラスへ依存しすぎると、あとから調整箇所が散らばりやすい印象があります。
追加CSSよりstyle.css管理が楽になる理由
最初は「追加CSSだけで十分かな」と思っていました。
ただ、途中からかなり見づらくなりました。
特にCSS量が増えると、追加CSS欄って管理が大変なんですよね。
検索もしづらいですし、構造化もしにくい。
私は途中から、子テーマstyle.cssへ移行してかなり快適になりました。
例えば、
- レイアウト系CSS
- 記事装飾CSS
- スマホ用調整
みたいに分けて整理し始めたんです。
すると、一気に分かりやすくなりました。
あと、コードエディタ側で管理できるのも大きいです。
VSCodeみたいなエディタを使うと、検索も修正もかなり楽になります。
これは追加CSS運用ではなかなか得られない快適さでした。
もちろん最初は少し面倒です。
でも、長くブログ運営するならstyle.css管理の方が圧倒的に整理しやすいと思います。
HTMLを整理すると修正効率も上がる
HTML整理のメリットって、最初はあまり実感しにくいです。
でも半年後くらいに効いてきます。
特に昔の記事を修正する時ですね。
私は以前、過去記事を大量修正したことがあります。
その時、HTMLが整理されている記事は本当に楽でした。
逆に、ビジュアルエディタ装飾を多用していた記事はかなり苦労しました。
どこで余白調整しているのか分からない。
どこで文字サイズ変更しているのか分からない。
これが積み重なると結構つらいです。
だから途中から、「なるべくシンプルなHTMLを維持しよう」と考えるようになりました。
もちろん、最初から完璧に整理する必要はありません。
ただ、
- よく使う装飾を固定化する
- 独自クラス名を統一する
- 余計な装飾を減らす
この辺を意識するだけでも、かなりスッキリします。
私はCocoon時代、この整理を始めたあたりから、ブログ管理のストレスがかなり減りました。
だから質問者さんが感じている「HTMLを整理したい」という感覚は、かなり自然なものだと思います。
私がCocoonからSWELLへ移行して感じた違い
私は以前ずっとCocoonを使っていました。
無料テーマとしては本当に優秀ですし、今でも初心者へおすすめしやすいテーマだと思っています。
ただ、ブログ運営を続けるうちに、「もう少しコード管理を楽にしたい」と感じる場面が増えてきました。
その流れでSWELLへ移行したんですが、実際かなり印象は変わりました。
もちろん、全部が完璧になったわけではありません。
でも、運営のストレスはかなり減った感覚があります。
SWELLの方がコード管理しやすかった
まず一番感じたのは、「余計な装飾感」が減ったことです。
Cocoon時代は、ビジュアルエディタで調整した内容がHTML側へかなり反映されていました。
だからコードエディタを開くと、少し圧迫感があるんですよね。
SWELLへ移行してからは、その感覚がかなり減りました。
もちろんSWELLもブロックエディタ前提なので、完全にHTMLが綺麗になるわけではありません。
ただ、全体的に整理されている印象があります。
あと個人的に大きかったのは、管理画面の分かりやすさでした。
Cocoonは機能が多いぶん、設定項目もかなり多いです。
最初は便利なんですが、途中から「あの設定どこだっけ？」となりやすい。
SWELLはそこがかなり整理されていました。
だから「コードを書きながら運営したい人」は、SWELLの方が相性良いかもしれません。
ただしCocoonにも大きな強みはある
とはいえ、Cocoonを否定したいわけでは全然ありません。
むしろ無料テーマとしてはかなり完成度が高いです。
特に、
- ブログ初心者
- HTMLやCSSを触りたくない人
- まず記事更新を優先したい人
にはかなり向いています。
実際、私も最初はCocoonだったからブログを続けられた部分があります。
もし最初から自作テーマ方向へ行っていたら、多分途中で挫折していました。
それくらい、最初から全部自分で管理するのは大変です。
あと、Cocoonはネット上に情報がかなり多い。
これは本当に強いです。
困った時に検索すると、大体誰かが解決しています。
初心者の頃は、この安心感かなり大きいんですよね。
結局は運営スタイル次第だと思う
結局、どのテーマが正解かってかなり難しい話です。
私はSWELLへ移行しましたが、今でもCocoonを使い続けている人はたくさんいます。
しかも普通に成果を出しています。
だから、「テーマ性能だけ」で決まるわけではないんですよね。
むしろ大事なのは、自分がどこを重視するかだと思います。
例えば、
- 記事更新を優先したい
- 簡単に装飾したい
- なるべく無料で運営したい
なら、Cocoonはかなり優秀です。
逆に、
- CSSを整理したい
- HTMLをシンプルにしたい
- あとで修正しやすくしたい
こういう考えが強くなってきたら、子テーマ運用を深めたり、別テーマを検討する流れになります。
これはどちらが上という話ではなく、運営フェーズの違いに近い気がします。
だから質問者さんが今感じている違和感も、かなり自然だと思います。
むしろ、「もっと整理したい」と感じ始めた時点で、WordPress運営に慣れてきている証拠なのかもしれません。
まとめ
Cocoonを使っていると、途中から「HTMLやCSSが少し見づらいな…」と感じる人は結構多いと思います。
特にHTMLやCSSを勉強し始めたタイミングだと、その違和感はかなり強くなりやすいです。
実際、私も以前はCocoonを使っていて、コードエディタを開くたびに「クラス多いな…」と感じていました。
ただ、これはCocoonの設計が悪いというより、「初心者向けに最適化されている」ことが大きいです。
HTMLやCSSを書かなくても、簡単にデザインできる。
その代わり、自動クラスが増えやすい。
これはある意味トレードオフなんですよね。
だから、質問者さんのように「もっとコードを整理したい」と感じ始めたら、子テーマstyle.css中心へ少しずつ移行していくのはかなり自然な流れです。
実際、多くの中級者以上は、途中から独自クラス管理を始めています。
私も最終的には、よく使うデザインを自分でクラス化して管理するようになりました。
その方が、あとから修正しやすかったからです。
ただし、いきなりテーマを捨てる必要はないと思います。
WordPressテーマは、SEO・表示速度・レスポンシブ対応など、土台部分をかなり整えてくれています。
だから、テーマ機能は活用しつつ、自分が気になる部分だけ独自管理していく。
これが一番現実的だと思います。
WordPressって、最初は「記事を書く道具」として始める人が多いと思います。
でも途中から、「もっと綺麗に管理したい」「もっと効率化したい」と感じ始める。
これはかなり自然な流れです。
だから今感じている違和感は、むしろ成長している証拠かもしれません。
焦って全部を自作方向へ寄せる必要はありません。
まずは、よく使うデザインを少しずつstyle.css側へ移していく。
そのくらいから始めると、かなり快適になると思います。
コメント