Cocoonカスタマイズの基本｜HTML・CSS・PHP・JavaScript編集方法

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

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

この記事では、初心者でも安心して実践できる Cocoonの編集手順とポイント をまとめました。

はじめに｜Cocoonでブログを自由にカスタマイズ

ブログを運営していると、「見た目をもっとおしゃれにしたい」「機能を追加して便利にしたい」と思う場面が出てきます。

Cocoonでは、次の4つを組み合わせることで、ブログを自由にカスタマイズ可能です。

HTML｜記事やページの構造を編集

• 投稿や固定ページに直接HTMLを追加して、文章や画像の配置を調整
• 文字装飾やリスト・表の表示方法も自由に変更可能
• ブロックエディターと組み合わせると簡単にデザインを整えられる

CSS｜デザインやレイアウトを調整

• 色・フォント・余白・背景などを自由に変更
• アイキャッチや図解のデザインを統一して、記事全体の印象を整えられる
• 子テーマや追加CSSを使えば、安全にカスタマイズ可能

PHP｜テーマの動作や機能を追加

• Cocoonの機能をカスタマイズしたり、新しい機能を追加できる
• 例：ウィジェット表示の条件変更、ショートコード作成

JavaScript｜動きやアニメーションを追加

• スクロールアニメーションやアコーディオンなどでブログをインタラクティブに
• 記事の表現力やモバイル操作性を向上
• 既存スクリプトとの競合に注意し、必要に応じてプラグインと併用

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

CSS・PHP・JavaScriptを編集する前には、必ずバックアップを行いましょう。万一データやサイトが壊れたときに元に戻す保険になります

HTML編集方法｜「カスタムMTML」ブロックの使い方

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

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

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

HTML編集時のポイント

• ブロックの使い分けで編集がラクに

• ブロックエディターとの併用
  HTMLで細かい調整を行いつつ、ビジュアルブロックを組み合わせると作業効率が上がります。

<div>
  ブロック1（見出しなど）
</div>
<div>
  ブロック2（画像など）
</div>

• HTMLタグの記述ミスに注意
  タグは 開きと閉じをペアで記述 することが基本です。

• 正しい例

<div>ここにテキスト</div>

• 間違い例

<div>ここにテキスト
<!-- 閉じタグ </div> がない！ -->

閉じタグがないとレイアウトが崩れたり、エラーの原因になります。WordPressが警告を出すこともあるので必ず確認しましょう。

CSS編集方法｜デザインやレイアウトを思い通りに調整

CSSを使うと、色・フォント・余白・背景などを自由に変更できます。ブログ全体や記事単位でデザインを整え、統一感のある見た目を作ることが可能です。

CSSを追加する方法は3種類あります。

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

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

① 子テーマの style.css に記述（基本）

子テーマの style.css にCSSを記述するのが最もおすすめ。テーマのアップデートでも上書きされないため安心です。

編集手順

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

②追加CSSに記述（手軽で初心者向け）

ちょっとした装飾変更や色変更など、少量のCSSコードをサッと追加したいときに便利です。

編集手順

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

③ 投稿画面の「カスタムCSS」に記述（記事ごとに調整）

記事やページ単位でCSSを適用したいときに便利な方法です。

編集手順

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

CSS編集の使い分け目安

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

目的に合わせて記述場所を使い分ければ、Cocoonのカスタマイズがぐっと快適になります。

PHP編集方法｜テーマの動作を変更・機能を追加

PHPを使うと、Cocoonの既存機能をカスタマイズしたり、新しい機能を追加したりできます。ブログの柔軟性や利便性を高めたい場合におすすめです。

PHP編集手順（子テーマ推奨）

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

PHP編集の注意点

• 直接親テーマは編集せず、必ず子テーマを使用
• バックアップを必ず作成
• エラーが出た場合、サイトが表示されなくなることもあるため注意

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

JavaScriptを使うと、ブログをよりインタラクティブにできます。スクロールアニメーション、アコーディオンメニュー、ポップアップ表示などの動的な演出が可能です。

JavaScript編集手順（子テーマ推奨）

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

JavaScript編集の注意点

• 直接親テーマは編集せず、必ず子テーマを使用
• バックアップを必ず作成
• 既存スクリプトとの競合に注意

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

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はもちろん、他テーマにも応用できるカスタマイズ情報を多数ご紹介しています。ぜひあわせてご覧ください。