Cocoonカスタマイズの基本｜初心者が安心してできるHTML・CSS・PHP・JavaScript編集方法

ブログのデザインや機能をもっと自由にカスタマイズしたいとき、WordPressテーマ「Cocoon」では HTML・CSS・PHP・JavaScript を使って編集できます。

ほんの少しコードを加えるだけでも、サイトの見た目や使いやすさは大きく向上します。とはいえ、「コードって難しそう…」「どこを触ればいいのか分からない…」と不安に感じる方も多いはず。

そこでこの初心者でも安心して取り組める Cocoonカスタマイズの基礎を、準備から編集手順、注意点まで順を追ってやさしく解説します。

まずは基本を押さえて、少しずつ自分だけのブログに近づけていきましょう。

はじめに｜カスタマイズの前に知っておくこと

カスタマイズを始める前に 「安全に作業するための準備」 が欠かせません。

作業前には必ずバックアップを

カスタマイズの編集ミスがあると、画面が崩れたり最悪の場合サイトが表示されなくなることもあります。そんな時に役立つのがバックアップです。

• 最低限バックアップしておきたいもの
  • functions.php や style.css など、編集対象のファイル
  • 投稿データや画像（サーバー全体のバックアップが理想）

バックアップがあれば、万が一トラブルが起きてもすぐに元の状態に戻せます。レンタルサーバーによっては「自動バックアップ機能」が用意されているので、まずは利用状況を確認しておきましょう。

子テーマを使うべき理由

WordPressのテーマは、定期的に「アップデート」が行われます。もし親テーマ（Cocoon本体）のファイルを直接編集してしまうと、更新時に すべて上書きされてカスタマイズ内容が消えてしまいます。

その対策として必須なのが 子テーマ の利用です。

Cocoonには公式で子テーマが配布されているため、難しい作業は不要です。まだ導入していない方は、必ず子テーマをインストールしてからカスタマイズを始めましょう。

HTML編集の基礎｜カスタムHTMLブロックの使い方

投稿・固定ページにHTMLを挿入する手順

Cocoonでは「カスタムHTML」ブロックを使って、記事や固定ページに直接HTMLを挿入できます。

1. 「カスタムHTML」ブロックを追加
   投稿編集画面でブロック追加ボタンから「カスタムHTML」を選択します。
2. HTMLコードを貼り付ける
   用意したHTMLコードをブロック内に入力または貼り付けます。
3. プレビューで表示を確認
   実際の表示を確認して、レイアウトや装飾が意図通りになっているかチェックします。

HTML編集時の注意点（閉じタグやレイアウト崩れに注意）

HTML はもっとも基本的なマークアップ言語ですが、ちょっとした書き間違いでレイアウトが崩れることがあります。初心者が注意すべきポイントは次の通りです。

• 開始タグと終了タグを必ずセットにする（例：<div> を書いたら </div> で閉じる）
• インデントを揃えて読みやすく（ネストが深いと特にミスが起きやすい）
• コピー＆ペースト時に余計なコードを混ぜない
• 表示が崩れたら直前の変更を疑う

編集前に元のコードをコピーして保存しておくと、すぐに復元できて安心です。

CSS編集方法｜デザインやレイアウトを自由に調整

CSSを追加する方法は3種類あります。基本は ①子テーマの style.css が推奨ですが、目的に応じて他の方法を使い分けると便利です。

方法	特徴	難易度	反映範囲
① 子テーマの style.css に記述	安全＆サイト全体に反映	★★☆	全ページ
② 追加CSS に記述	手軽＆初心者向け	★☆☆	全ページ
③ 投稿画面のカスタムCSS に記述	記事ごとの調整が可能	★☆☆	特定ページのみ

① 子テーマの style.css（標準的なやり方）

• 推奨度：高
• サイト全体に共通のデザインを適用可能
• 親テーマの更新でも上書きされない
• 大規模なカスタマイズに最適
• ファイルは /wp-content/themes/子テーマ/style.css にあり

編集手順

1. 管理画面で「外観」→「テーマファイルエディター」をクリック
2. 右側のファイル一覧から「Cocoon Child: スタイルシート (style.css)」を選択
3. /* 子テーマ用のスタイルを書く */の下にCSSコードを追加

②外観 → 追加CSS（初心者向け・手軽）

• 推奨度：初心者向け
• WordPress管理画面から手軽に追加できる
• 小規模な調整に向いている
• 将来的にコードが増えると管理が大変になることも

編集手順

1. 「外観」→「カスタマイズ」をクリック
2. 左側メニューから「追加CSS」を選択
3. 表示されるテキストエリアにCSSコードを記述して保存

③ 投稿画面のカスタムCSS（記事単位で変更）

• 特定の記事だけにスタイルを適用できる
• 「この記事だけ文字サイズを変えたい」といった用途に便利
• サイト全体のデザイン調整には不向き

編集手順

1. 対象の投稿や固定ページを編集画面で開く
2. 右側の「投稿設定」から「カスタムCSS」を探す
3. CSSコードを記述して保存

CSS編集の使い分け目安

用途	おすすめのCSS記述場所
サイト全体にスタイルを反映したい	① 子テーマの style.css
手軽に一部の装飾を変更したい	② 追加CSS
特定の記事だけ変更したい	③ 投稿画面のカスタムCSS

CSS編集の注意点（優先度と影響範囲に気をつける）

CSS はデザインを自由に変えられる反面、1行の変更でサイト全体に影響が出ることがあります。注意したいポイントは次の通りです。

• 必ず子テーマや「追加CSS」に書く（親テーマやコアファイルは触らない）
• !important は乱用しない（他のスタイルを壊す原因になる）
• セレクタはできるだけ限定的に（全ページに不要な影響を与えないように）
• 少しずつ追加し、都度ブラウザで確認
• レイアウトが崩れたら直前の変更を元に戻す

CSSも、編集前にバックアップを取っておけば安心して試せます。

PHP編集方法｜テーマの機能をカスタマイズ

PHPを編集する流れ（子テーマを利用）

1. 管理画面で「外観」→「テーマファイルエディター」をクリック
2. 子テーマ（Cocoon Child） が選択されていることを確認
3. 右側のファイル一覧から 「Cocoon Child: テーマのための関数 (functions.php)」 をクリック
4. 既存のコードは消さず、//以下に子テーマ用の関数を書く の下の行に追記

PHP編集の注意点（functions.phpの編集は特に慎重に）

functions.php はテーマの「頭脳」ともいえるファイルです。1つの書き間違いでサイトが真っ白になり、管理画面すら開けなくなることがあります。

初心者が特に気をつけたいのは次の点です。

• 必ず子テーマの functions.php に追記（親テーマは触らない）
• <?php や ?> は原則不要（追記部分だけを追加すればOK）
• 他のコードを消さない／壊さない（1文字違うだけでエラーに）
• エラーが出たらすぐに元に戻せるよう、編集前のコードをコピーして保存

不安な場合は、ローカル環境やテストサイトで試してから本番サイトに反映すると安心です

JavaScript編集方法｜動きやアニメーションを追加

JavaScriptを追加する流れ（子テーマを利用）

1. 管理画面で「外観」→「テーマファイルエディター」をクリック
2. 子テーマ（Cocoon Child） が選択されていることを確認
3. 右側のファイル一覧からjavascript.jsをクリック
4. JavaScriptコードを追加する

JavaScript編集の注意点（競合・動作確認が必要）

JavaScript は、ボタンを押したときの動きやアニメーションなどを実現できる便利な仕組みですが、記述を間違えたり他のスクリプトと競合したりすると、思わぬ動作不良が起きることがあります。初心者が注意したいポイントは次の通りです。

• 必ず子テーマや専用のファイルに追記する（親テーマやコアファイルは直接編集しない）
• jQuery など既存のライブラリとの競合に注意（同じ機能を複数読み込むと不具合が出る）
• コードは小さくテストしながら追加（一度に大量に書かない）
• 動作確認は必ず複数ブラウザ・スマホでも行う
• 編集前に元の状態を保存（不具合が出たらすぐ戻せるように）

もし不安がある場合は、ローカル環境やテストサイトで試してから、本番サイトに反映すると安心です。

ワンランク上のブログデザインを目指す｜役立つプログラミング書籍

Cocoonでブログを自由にカスタマイズする際、HTML・CSS・PHP・JavaScriptを使うとデザインや機能の幅が広がります。「もっとデザイン力を高めたい」「サイトに動きを加えたい」という方におすすめの書籍をご紹介します。

CSSで「デザイン力」を高める

• おすすめポイント
  • 初心者でも基礎から実践までしっかり学べる
  • CSSを使ったブログの装飾やレイアウト調整に役立つ
  • 手元に置いておくと、いつでも実践的なヒントを得られる

• 活用例
  • アイキャッチ画像や図解の配色・フォント・余白の統一
  • 記事全体のデザインを整えるCSSカスタマイズ

JavaScriptでウェブサイトに「動き」をプラス

• おすすめポイント
  • スクロールアニメーションやアコーディオンメニューなど、動きのあるデザインを学べる
  • 実践例が豊富で、楽しくスキルを習得可能
  • 初心者でもわかりやすく、ブログの表現力を格段に向上できる

• 活用例
  • 記事内でのスクロール連動アニメーション
  • 関連記事やおすすめ記事のスライダー表示

デザインや動きを学ぶことでCocoonカスタマイズの幅が広がりよりプロっぽいブログが作れるように。プログラミングスキルは最初は少し難しく感じますが、習得すればブログの自由度が格段に上がります。

まずは1冊から手元に置き、少しずつ実践しながら学ぶのがおすすめです。

Cocoonカスタマイズまとめ｜HTML・CSS・PHP・JavaScriptの使い分け

今回は、CocoonでのHTML・CSS編集方法についてご紹介しました。

種類	できること	記述場所/方法	注意点
HTML	記事・固定ページ構造編集	投稿・固定ページ内「カスタムHTML」ブロック	閉じタグ忘れに注意、ブロックの使い分け
CSS	デザイン・レイアウト調整	子テーマstyle.css / 追加CSS / 投稿カスタムCSS	用途に応じて使い分け
PHP	テーマ機能変更・追加	子テーマfunctions.php	バックアップ必須、エラーでサイトが動かなくなる可能性
JavaScript	動的挙動・アニメーション	子テーマjavascript.js	既存スクリプトとの競合に注意、バックアップ必須

もし迷ったら、ぜひこの記事に戻って何度でも確認してくださいね。

CSSがうまく反映されない場合の原因や確認方法については以下の記事も参考になります。

当サイトでは、Cocoonはもちろん、他テーマにも応用できるカスタマイズ情報を多数ご紹介しています。ぜひあわせてご覧ください。