既存テーマ(Cocoon/SWELL)をベースにオリジナリティを出すカスタマイズ実例

WordPressブログを立ち上げる際、ゼロからオリジナルテーマを組むのではなく、CocoonやSWELLといった既存の人気テーマをベースにする選択をしました。この記事では、既存テーマを使いながらもオリジナリティを出すために意識したポイントをまとめます。

なぜ既存テーマを選んだのか

• 内部SEOがすでに最適化されている
• アフィリエイト・アドセンス運用を前提とした機能が揃っている
• ゼロから作るよりも、記事を書く時間を確保しやすい

「テーマを作り込む時間」より「記事を書く時間」を優先したい、という判断です。web制作者としてはフルスクラッチで組みたい気持ちも正直あるのですが、ブログ運営という目的から逆算すると、そこに時間をかけすぎるのは本末転倒だと考えました。

CocoonとSWELLはどちらも人気のテーマですが、性格はかなり違います。Cocoonは無料で、ソースコードが公開されておりカスタマイズの自由度が高いのが特徴です。SWELLは有料ですが、管理画面のUIが洗練されていて、ノーコードに近い形でデザインを整えやすい印象があります。今回は、CSSでの作り込みをメインにしたかったこともあり、コードを直接触りやすいCocoonをベースに選びました。

オリジナリティを出すために意識したポイント

1. 追加CSSでのカスタマイズを最優先にする

テーマの機能自体はいじらず、子テーマのSCSSでボタンの形、見出しデザイン、余白感などを調整しています。テーマ本体を直接編集しないことで、アップデート時の不具合リスクも減らせます。子テーマの構成はFLOCSSをベースに、foundation・layout・component・project・utilityのディレクトリに分けて管理していて、ページ固有のスタイルはproject、複数ページで使い回すパーツはcomponentに分類するというルールを自分の中で決めています。

2. アイキャッチ・OGP画像のテンプレート化

記事ごとにバラバラな画像にせず、ロゴやブランドカラーを使った統一デザインのテンプレートを作成。読者の記憶に残りやすくなることを意識しています。SNSでシェアされたときに「あ、あのブログだ」とひと目でわかるようにする狙いもあります。

3. アイコンや装飾を自作素材に差し替え

テーマ標準のアイコンを、ブランドイメージに合わせた自作素材(肉球モチーフなど)に差し替えることで、テンプレート感を薄めています。装飾目的だけの要素はできるだけ増やさず、疑似要素(::before/::after)で表現することで、マークアップ自体もシンプルに保つようにしています。

4. ヘッダー・フッターは制約が少ないので重点的に調整

テーマの中でも比較的自由度が高い箇所なので、web制作のスキルを活かしてオリジナルのデザインを組み込んでいます。ヘッダーのナビゲーション構成や、フッターの情報設計は、テーマ標準のままだとどうしても「よくあるブログ」感が出やすい部分なので、優先的に手を入れています。

5. カラーパレットとフォントを最初に固定する

ブランドカラーとフォントをSCSSの変数として最初に定義し、それ以降のコンポーネント実装はすべてその変数を参照する形に統一しています。あとから配色を変更したくなった場合でも、変数側を直せば全体に反映されるので、保守性の面でもメリットが大きいです。

クラス命名で意識していること

命名ルールも、テーマ標準のクラス名とはあえて重複させず、独自のプレフィックスを使って管理しています。レイアウトには`l-`、コンポーネントには`c-`、ユーティリティには`u-`、状態を表すクラスには`is-`というプレフィックスを付けることで、テーマ本体のCSSと自分のCSSがどちらのルールなのか、コードを見ただけで判別できるようにしています。

例えばボタンひとつとっても、`c-button`というBlockに対して、`c-button–primary`のようなModifierで見た目のバリエーションを表現し、Elementが必要な場合は`c-button__icon`のように`__`でつなぐBEMのルールに統一しています。この一貫性があることで、後から見返したときにも迷わず修正できるようになりました。

実装で気をつけていること

既存テーマのCSSは、テーマ本体が動的に出力するインラインスタイルなど、思わぬところで詳細度の高いルールが差し込まれていることがあります。上書きがうまく効かないときは、闇雲に!importantを使うのではなく、ブラウザの開発者ツールで実際に競合しているルールを特定してから対処するようにしています。

SWELLを選ばなかった理由の補足

SWELLも実際に検証環境で触ってみたのですが、管理画面のUIが優れている一方で、独自のブロックエディタ拡張が強く、自分がやりたいような「CSSを直接ガリガリ書いていくカスタマイズ」とはやや相性が違うと感じました。SWELLの思想に乗っかってブロックエディタ側でデザインを組み立てていくスタイルも十分魅力的なのですが、今回はコーディングスキルを活かしたい意図が強かったため、より素のHTML/CSSに近い形で触れるCocoonを選んだ、という経緯があります。

プラグイン選定でのオリジナリティ

見た目のカスタマイズだけでなく、使用するプラグインの選び方でもテーマ標準の雰囲気から離れることを意識しています。必要以上にプラグインを入れると表示速度が落ちたり、テーマ標準の機能と競合したりするリスクがあるため、本当に必要な機能(お問い合わせフォーム、SEO関連の基本設定など)に絞り、それ以外はできるだけCSSやテーマの標準機能でまかなうようにしています。プラグインを増やしすぎないことも、結果的にはサイト全体の個性を保つことにつながると感じています。

レスポンシブ対応での工夫

ブレークポイントについても、テーマ標準のまま複数の中途半端な値が混在していると管理が煩雑になるため、サイト全体でモバイル判定のブレークポイントを統一しています。既存テーマ側の切り替わりポイントとズレが出る場合は、その差分だけをピンポイントで打ち消すメディアクエリを追加することで、全体としては一貫したブレークポイントで挙動するように調整しています。

まとめ

既存テーマをベースにしても、CSSカスタマイズと画像・アイコンの作り込み次第でオリジナリティは十分に出せると感じています。テーマ機能そのものより「見た目の作り込み」に比重を置くのが、時間対効果の面でもバランスが良いと思います。今後もこのブログのデザイン自体を実験台にしながら、うまくいったカスタマイズ手法があれば、また記事として残していく予定です。