ゼロからは組みません。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-)とBEMで管理しています。テーマ本体のCSSと自分のCSSが、コードを見ただけで判別できる状態を保つのが狙いです。
この辺りの線引きは別記事で詳しく書いているので、よければそちらもどうぞ(FLOCSSのcomponent/project、線引きで迷ったときに立ち返っているルール)。
実装で気をつけていること
既存テーマのCSSには罠があります。テーマ本体が動的に出力するインラインスタイルなど、思わぬところで詳細度の高いルールが差し込まれていることがあります。上書きがうまく効かないときは、闇雲に!importantを使うのではなく、ブラウザの開発者ツールで実際に競合しているルールを特定してから対処するようにしています。
SWELLを選ばなかった理由の補足
SWELLも実際に検証環境で触ってみました。管理画面のUIが優れている一方で、独自のブロックエディタ拡張が強く、自分がやりたいような「CSSを直接ガリガリ書いていくカスタマイズ」とはやや相性が違うと感じました。SWELLの思想に乗っかってブロックエディタ側でデザインを組み立てていくスタイルも十分魅力的なのですが、今回はコーディングスキルを活かしたい意図が強かったため、より素のHTML/CSSに近い形で触れるCocoonを選んだ、という経緯があります。
プラグイン選定でのオリジナリティ
工夫はCSSだけではありません。見た目のカスタマイズだけでなく、使用するプラグインの選び方でもテーマ標準の雰囲気から離れることを意識しています。必要以上にプラグインを入れると表示速度が落ちたり、テーマ標準の機能と競合したりするリスクがあるため、本当に必要な機能(お問い合わせフォーム、SEO関連の基本設定など)に絞り、それ以外はできるだけCSSやテーマの標準機能でまかなうようにしています。プラグインを増やしすぎないことも、結果的にはサイト全体の個性を保つことにつながると感じています。
レスポンシブ対応での工夫
ブレークポイントについても、テーマ標準のまま複数の中途半端な値が混在していると管理が煩雑になるため、サイト全体でモバイル判定のブレークポイントを統一しています。既存テーマ側の切り替わりポイントとズレが出る場合は、その差分だけをピンポイントで打ち消すメディアクエリを追加することで、全体としては一貫したブレークポイントで挙動するように調整しています。
まとめ
既存テーマをベースにしても、オリジナリティは十分に出せます。CSSカスタマイズと画像・アイコンの作り込み次第です。テーマ機能そのものより「見た目の作り込み」に比重を置くのが、時間対効果の面でもバランスが良いと思います。今後もこのブログのデザイン自体を実験台にしながら、うまくいったカスタマイズ手法があれば、また記事として残していく予定です。
