Cocoonカスタマイズの基本｜HTML・CSSの編集とワードプレスをバックアップする方法

ワードプレスのカスタマイズは、サイトの見た目や使いやすさをぐっと向上させてくれます。特にHTMLやCSSを編集することで、細かなデザイン調整やレイアウトの変更も可能に。

でも、「どこに書いたらいいの？」「間違えたら元に戻せるの？」と不安になる方も多いはず。

この記事では、HTML・CSSを安全に編集するための準備や手順、カスタマイズ前に絶対やっておきたいバックアップ方法について、初心者にもわかりやすく解説します。

安心して編集作業を始められるよう、まずは基本をチェックしていきましょう！

カスタマイズ前に必ず行いたい！CSSバックアップの重要性

ワードプレスやCocoonテーマを使っていると、「もっと自分好みにサイトを整えたい！」と感じる場面が出てきますよね。CSSを編集すれば、ボタンの色や文字サイズ、余白の調整など、細かな見た目を自由に変えられます。

しかし――

デザインが崩れたり、元に戻せなくなった経験はありませんか？

カスタマイズを始める前に必ずCSSのバックアップを取っておきましょう。これは安全なカスタマイズの必須ステップです。

なぜバックアップが必要なのか？

CSS編集は、ちょっとしたミスで見た目が崩れたり機能が正しく動かなくなることが頻繁にあります。

たとえば、

• }（中かっこ）の閉じ忘れで全体のデザインが乱れる
• 特定ページだけレイアウトが崩れる
• 上書き保存して、元の状態に戻せない

こういったトラブルは、CSSのたった1文字のスペースが原因で起きることも。そのため、編集前の状態を保存しておけば、問題が起きてもすぐに元に戻せて安心です。

CSSバックアップの方法｜安全にカスタマイズするための３つの手段

ここでは、CSSをバックアップする方法を3つ紹介します。それぞれの特徴を理解し、ご自身に合った方法を選んでください。

テキストエディタに手動でコピー

最も簡単にできるバックアップ方法です。

編集前のCSSコードを テキストエディタ（例：メモ帳／VS Codeなど）にコピー＆保存 しておくだけ。

手順

1. 編集予定のCSSコードをすべてコピー
2. テキストエディタに貼り付けて保存
3. 必要があれば元のコードに戻せばOK

メリット

• ソフト不要で簡単
• 数十行程度のカスタマイズならこれで十分
• 編集履歴としても使える

注意点

Windowsの「メモ帳」で保存する場合は、文字コード「UTF-8」で開く・保存しないと文字化けすることがあります。先に確認しておくと安心です。

FTPソフトを使ってサーバーから直接保存

より本格的なバックアップ方法として、FTPソフトを使う手段があります。

Cocoonなどのテーマで使用しているCSSファイル（style.css）を直接サーバーからダウンロードできるため、作業後の復元も確実です。

メリット

• ファイル単位で正確にバックアップ
• 編集履歴を管理しやすい
• テーマの他ファイル（PHPやJavaScriptなど）も一緒に保存できる

FTPソフトとは？

FTP（ファイル転送プロトコル）を使って、サーバーとPC間でファイルの送受信を行うソフトです。
例：FileZilla、WinSCP など

バックアップ用プラグインを使う

「All-in-One WP Migration」や「BackWPup」といったバックアップ専用プラグインを使えば、テーマファイルも含めてワードプレス全体のバックアップが可能です。

メリット

• 簡単に自動バックアップの設定ができる
• CSSだけでなく投稿データやプラグイン設定も保存可能
• 初心者でも比較的安心して使える

注意点

• プラグインによっては不具合やサイトの不安定化の原因になる場合も
• プラグインの相性には注意

ワードプレス全体のバックアップならエックスサーバー

CSSだけでなくワードプレス全体を確実にバックアップしたいなら、レンタルサーバー側のバックアップ機能を活用するのもひとつの手です。

特に エックスサーバー では以下のような自動バックアップ機能が備わっています。

• サーバー領域データ（HTML・CSS・PHP・画像など）：直近14日分を保存
• MySQLデータベース（投稿・設定・コメントなど）：直近14日分を保存

私の体験談

以前、プラグインの不具合でサイトが表示されなくなったことがありましたが、エックスサーバーの自動バックアップ復元機能で簡単に復旧できたという経験があります。

現在では、プラグインによるバックアップは使わず、エックスサーバー一本で管理中。

「自動で、無料で、簡単に」復元できるので、初心者の方にも安心です。

サーバー選びも安心運用のカギ

最近では、他のレンタルサーバー（ConoHa WING、mixhost など）でも自動バックアップ機能が提供されています。

CSSカスタマイズに限らず、ワードプレス運用においてバックアップはトラブル回避の命綱。使用中のサーバーでバックアップ機能があるか・復元方法は簡単か？をぜひ一度チェックしておきましょう。

CocoonでのHTML編集方法｜カスタムMTMLの使い方

「Cocoon」では、カスタムHTMLブロックを使うことで、自由にHTMLコードを挿入できます。デザインの微調整や独自パーツの設置などに活用できる、便利な機能です。

HTMLの知識があれば、表やボタン、Googleマップの埋め込みなど、表現の幅が大きく広がります。

【手順】投稿や固定ページでHTMLを挿入する方法

1. 投稿・固定ページの編集画面を開きます
2. 画面内の「＋」ボタン（ブロック追加）をクリック
   　※ もしくは「スラッシュ /」を入力してもOK
3. 「カスタムHTML」と検索してブロックを追加
4. 任意のHTMLコードを記述します

HTML編集時のポイント｜ブロックの使い分けで管理しやすく

HTML編集を効率的に行うには、コードの管理方法が大切です。特にトップページの作り込みや、複数のコードを扱うときは以下のような方法がおすすめです。

1. 1つのブロックにまとめる方法
   • すべてのHTMLコードを1つの「カスタムHTML」ブロックにまとめて記述する方法。
   • メリット：構成がシンプルでスッキリ
   • デメリット：コードが長くなるとスクロールが大変、編集ミスのリスクも
2. ブロックを分けて管理する方法【おすすめ】
   • 内容ごとに「カスタムHTML」ブロックを複数に分けて記述する方法。
   • 視覚的に構造が把握しやすく、編集や修正がしやすくなります。

ブロック操作で直感的に編集したい方へ

「カスタムHTML」は、手作業でコードを記述するだけでなく、ワードプレスのブロック機能と組み合わせて使うことで直感的な編集にも対応しています。そのため、HTMLに不慣れな方でも視覚的にページを作成・カスタマイズできます。

カスタムHTMLのブロック活用例

以下は、<div>タグを使ってブロックごとに区切りながらコンテンツを作成する基本的な構造の例です。

<div>
  ブロック1（ここに見出しなど）
</div>

<div>
  ブロック2（ここに画像など）
</div>

このように、HTMLのブロック（<div>など）で囲った部分ごとにブロックを分けることで、文章・画像・ボタンなどのレイアウトを視覚的に配置しやすくなります。

カスタムHTMLを分割し、間にブロック機能を追加することでコンテンツ作成ができます。

注意！HTMLタグの「ペア」を正しく記述しよう

<div>タグは「開く」と「閉じる」が必ずセットです。下記のように、タグの「ペアリング」が正しくないと、エラーやレイアウト崩れが起こる可能性があります。

• 正しい例

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

• 間違い例

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

• 同じ「カスタムHTML」ブロック内でペアが不完全だと、ワードプレスがエラーとして警告することがあります。
• 記事全体を通して正しく対応していれば表示上は問題ないこともありますが、予期せぬレイアウト崩れの原因になるため、できる限り正確なペアを心がけましょう。

CocoonでのCSS編集方法｜スタイルシートの使い方と３つの記述場所

「Cocoon」では、CSSの編集方法が３通りあります。

① 子テーマのスタイルシート（style.css）に記述【基本】

子テーマの style.css にCSSを直接書く方法です。テーマのアップデートで上書きされる心配がないため、もっとも安全でおすすめの方法です。

編集手順

1. 管理画面で「外観」→「テーマファイルエディター」をクリック
2. 右側のファイル一覧から「Cocoon Child: スタイルシート (style.css)」を選択
3. すでに書かれているテーマ情報（冒頭のコメント）は消さずに、
   　/* 子テーマ用のスタイルを書く */の下にCSSコードを追加します

②「追加CSS」に記述【手軽で初心者向け】

ちょっとしたCSSを素早く追加したい場合は、テーマカスタマイザーの「追加CSS」が便利です。

編集手順：

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

③ 投稿編集画面の「カスタムCSS」に記述【記事ごとにカスタマイズ】

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

編集手順

1. 投稿編集画面を開く
2. 右側の「投稿設定」から「カスタムCSS」を探してCSSコードを記述

この方法なら、特定の記事だけにピンポイントでデザイン調整を反映できます。たとえば、目立たせたいキャンペーンページのボタンだけ色を変えるといった使い方ができます。

どの方法を使うべき？

用途	おすすめのCSS記述場所
サイト全体に反映	子テーマのstyle.css（①）
簡単に一部変更	追加CSS（②）
特定の記事だけ変更	投稿画面のカスタムCSS（③）

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

まとめ｜CocoonのHTML・CSSカスタマイズを安心・快適に進めよう

今回は、バックアップの重要性と、CocoonでのHTML・CSS編集方法についてご紹介しました。

HTMLやCSSの編集をマスターすることはあなたのサイトを自由にカスタマイズする第一歩です。もし迷ったら、ぜひこの記事に戻って何度でも確認してくださいね。

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

もしうまくいかない場合でも、「丁寧な確認」がカスタマイズ成功のカギです！

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