Cocoonを導入したものの、「設定項目が多く、どこから触ればよいのか分からない」と迷っていませんか。最初から細部まで作り込む必要はありません。初心者が先に整えるべきなのは、サイトの印象を決める外観、読みやすさ、記事一覧、スマートフォン表示、そして変更前のバックアップです。
この記事では、WordPress無料テーマCocoonのカスタマイズを、管理画面だけで進める順番に整理します。コードを使わずに変更できる範囲を先に固め、CSSが必要な作業は後回しにするのが安全な進め方です。
Cocoonカスタマイズは「設定→確認→追加CSS」の順で進める
Cocoonのカスタマイズには、テーマ独自の「Cocoon設定」、WordPressの「外観」、ウィジェット、追加CSSなど複数の入口があります。迷ったときは、影響範囲が分かりやすく元へ戻しやすい設定から始めましょう。
| 優先順位 | 変更する場所 | 主な内容 | 難易度 |
|---|---|---|---|
| 1 | Cocoon設定 | スキン、ヘッダー、本文、一覧、SNS、OGP | 低い |
| 2 | 外観・カスタマイズ | サイト基本情報、メニュー、ウィジェット | 低い |
| 3 | 追加CSS | 余白、色、枠線、細かな見た目 | 中程度 |
| 4 | 子テーマのファイル | 大きなデザイン変更、機能追加 | 高い |
最初の目標は「個性的なサイト」ではなく、「読者が迷わず読めるサイト」です。配色や装飾を増やしすぎると、本文よりもデザインが目立ちます。まず2〜3色に絞り、見出し、リンク、ボタンの意味が一貫する状態を作ってください。
変更前にバックアップと確認環境を用意する
管理画面の設定だけでも、ヘッダーが消えたり、メニューの位置が変わったりする可能性があります。作業前に、データベースとファイルの両方をバックアップしましょう。レンタルサーバーの自動バックアップが有効でも、復元方法まで確認しておくことが大切です。
- 現在のトップページ、記事ページ、スマートフォン表示をスクリーンショットで残す
- Cocoon設定の「バックアップ」から設定ファイルを保存する
- サーバー側のバックアップ日時と復元手順を確認する
- キャッシュ系プラグインを使っている場合は、変更後に削除する場所を控える
一度に多くの設定を変えると、表示が崩れたときに原因を特定できません。「1項目を変更し、PCとスマートフォンで確認する」を繰り返すほうが、結果的に短時間で完成します。
手順1：スキンと全体配色を決める
スキンは、サイト全体の配色や部品の形をまとめて変更できる仕組みです。「Cocoon設定」から「スキン」を開き、一覧の画像アイコンへカーソルを合わせると見た目を確認できます。
スキンを選ぶ際は、好みだけでなく、記事の読みやすさを基準にします。本文背景は白またはごく薄い色、本文文字は黒に近い濃色、リンクは本文と見分けられる青系が無難です。スキンによっては、個別の色設定が反映されにくい場合があります。色を細かく調整したい人は、装飾が控えめなスキンから始めるとよいでしょう。
- 本文の文字と背景に十分なコントラストがある
- リンク、ボタン、見出しの違いが一目で分かる
- スマートフォンで文字や余白が小さすぎない
- カテゴリーごとに色を増やしすぎていない
手順2：ヘッダーとサイトタイトルを整える
ヘッダーは訪問者が最初に見る場所です。ただし、大きすぎる画像は記事本文を画面下へ押し下げます。「Cocoon設定」→「ヘッダー」で、ロゴ、背景、高さ、キャッチフレーズを確認してください。
画像ロゴを使う場合は、透過PNGなど背景になじむ形式を用意します。スマートフォンでは横長ロゴが小さくなりやすいため、縮小してもサイト名が読めるかを必ず確認しましょう。キャッチフレーズには、サイトが誰のどんな悩みを解決するのかを短く入れます。キーワードを並べるだけの文章は避け、初めて来た人に意味が通じる表現を優先します。
グローバルメニューは5〜7項目程度を目安にし、重要なカテゴリー、運営者情報、お問い合わせなどへつなぎます。記事が少ない段階で空のカテゴリーを並べる必要はありません。
手順3：本文の読みやすさを優先して調整する
本文はサイトの中心です。装飾よりも、文字サイズ、行間、コンテンツ幅、段落間の余白が読みやすさを左右します。「Cocoon設定」→「全体」や「本文」にある関連項目を確認しましょう。
PCでは読みやすくても、スマートフォンで1行が詰まって見えることがあります。目安だけで決めず、実際の記事を開いて、長い段落、箇条書き、表、画像がどのように見えるかを確認してください。表が横にはみ出す場合は、列を減らすか、各セルの文章を短くします。
見出しの色は、サイトのアクセントカラーと合わせると統一感が出ます。H2とH3の見た目が似すぎると階層が伝わらないため、H2は面や太い線、H3は左線など、強弱を付けるのが効果的です。
手順4：記事一覧をクリックしやすくする
トップページやカテゴリーページの記事一覧は、読者が次の記事を選ぶ場所です。「Cocoon設定」→「インデックス」で、カードタイプ、並び方、抜粋表示を調整できます。
アイキャッチの文字が小さい場合、カードを細かく分割しすぎると読めません。2列や3列にする前に、スマートフォンの表示を確認しましょう。記事タイトルは画像だけに頼らず、テキストでも内容が具体的に伝わることが重要です。
抜粋が長すぎると一覧全体が間延びします。一方、画像とタイトルだけでは記事の違いが分かりにくいこともあります。各記事の対象読者や解決できる悩みが冒頭に書かれていれば、短い抜粋でも選びやすくなります。
手順5：サイドバーとウィジェットを整理する
サイドバーへ多くの部品を置いても、すべてがクリックされるわけではありません。「外観」→「ウィジェット」で、読者の次の行動に必要なものだけを残します。
- プロフィール
- 検索
- 重要なカテゴリー
- 人気記事または新着記事
- 必要な場合のみ広告や案内
アーカイブ、タグ、長いカテゴリー一覧を同時に置くと選択肢が増えすぎます。モバイルではサイドバーが本文の後ろへ移動するため、重要な導線は本文中にも自然な内部リンクとして置いてください。広告はメニューや関連記事と誤認されない位置と表示にし、クリックを求める文言は使いません。
手順6：SNS・OGP・シェアボタンを設定する
OGPは、記事がSNSで共有されたときのタイトル、説明、画像の伝わり方に関わる設定です。「Cocoon設定」→「OGP」で必要項目を確認し、サイト共通画像も設定しておきます。記事ごとにアイキャッチを用意すれば、その画像が共有時に使われる構成にできます。
シェアボタンは多ければよいわけではありません。想定読者が利用するサービスに絞り、本文の読み始めを邪魔しない配置を選びます。設定後は実際の記事URLを使い、画像や説明が意図どおりになるか確認しましょう。SNS側に古い情報がキャッシュされている場合、変更がすぐ反映されないことがあります。
追加CSSを使う前に判断したいこと
設定画面で実現できない細かな余白や枠線は、WordPressの「外観」→「カスタマイズ」→「追加CSS」で調整できます。追加CSSはプレビューしながら変更でき、親テーマのファイルを直接編集するより安全です。
ただし、コピーしたCSSを意味が分からないまま大量に入れるのは避けましょう。同じ要素への指定が重なり、どのコードが効いているのか分からなくなります。用途ごとにコメントを付け、変更前のコードを別のテキストファイルへ保存してください。
/* H2見出しの上側に余白を追加する例 */
.article h2 {
margin-top: 2.4em;
}この例でも、使用中のスキンやCocoonの更新によって対象のクラスや既存スタイルとの関係が変わる可能性があります。公開前に複数の記事と画面幅で確認し、問題が出たら追加した部分だけを戻します。
Cocoonカスタマイズでよくある失敗
見た目を変える作業では、完成イメージに集中しすぎて運用面を見落としがちです。次の失敗を先に知っておくと、やり直しを減らせます。
親テーマを直接編集する
親テーマのstyle.cssやfunctions.phpを直接変更すると、テーマ更新時に変更が失われる可能性があります。CSSだけなら追加CSS、大きな変更なら子テーマを使い分けます。
プラグインとCocoonの機能を重複させる
高速化、目次、OGP、吹き出しなどは、Cocoon自体が備えている機能があります。同じ役割のプラグインを重ねると、二重表示や不具合の原因になります。導入前にCocoonで代替できないか確認してください。
PC表示だけで完成と判断する
検索やSNSから訪れる読者の多くはスマートフォンを使います。横幅の狭い端末で、メニュー、表、ボタン、広告、画像が重ならないかを確かめる必要があります。WordPressカスタマイザーの端末プレビューに加え、可能なら実機でも確認しましょう。
よくある質問
Cocoonのカスタマイズにプログラミング知識は必要ですか？
スキン、ヘッダー、記事一覧、ウィジェットなど、基本的な変更は管理画面だけで進められます。CSSは設定画面では届かない細部を整える段階で使えば十分です。
スキンを変更すると記事は消えますか？
通常、投稿本文そのものは消えません。ただし、色や部品の表示、個別設定の反映状態が変わることがあります。事前にCocoon設定をバックアップし、変更後に主要ページを確認してください。
カスタマイズ後に表示が変わらないのはなぜですか？
ブラウザー、Cocoon、キャッシュ系プラグイン、サーバーのキャッシュが古い表示を保持している可能性があります。保存を確認したうえで、影響範囲の小さいキャッシュから順に削除します。
まとめ：読者が迷わない部分から一つずつ整える
Cocoonカスタマイズは、スキン、ヘッダー、本文、記事一覧、ウィジェット、OGPの順に進めると整理しやすくなります。一度に全部を変えず、変更ごとにPCとスマートフォンで確認することが失敗を防ぐポイントです。
まず現在の画面と設定を保存し、全体配色と本文の読みやすさから着手してください。管理画面の範囲を超えるデザインに進みたくなったら、次に子テーマと追加CSSの使い分けを理解すると、安全にカスタマイズの幅を広げられます。
テーマの特徴やSEO機能から確認したい方は、WordPressテーマCocoonが人気の理由とSEO設定も参考にしてください。コード編集へ進む前には、Cocoon子テーマと追加CSSの安全な使い分けで保存場所と復旧方法を確認しておくと安心です。
参考：WordPress.org「Customizer」（2026年7月24日確認）
コメント