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

サイトのデザインや機能を向上させるためにHTML・CSSのカスタマイズは有用ですが、初めて取り組む場合は戸惑うこともありますよね。

この記事では、ワードプレスのバックアップ方法やHTML・CSSの編集手順について詳しく解説します。作業に入る前にぜひご一読ください。

カスタマイズ前にバックアップを取る重要性

カスタマイズをおこなう前には、必ずファイルやデータベースのバックアップを取ることをお勧めします。

CSSを使ったカスタマイズは比較的簡単におこなえる反面、コードの記述に不具合があるとレイアウトが崩れることがあります。サイト本体を構成している親テーマと違い、カスタマイズや機能の追加をおこなうために使用される子テーマ（Cocoon Child）を使えばサイトが壊れるといった重大なトラブルは基本起こりません。

しかし、編集前にバックアップを取っておけば不測の事態でも簡単に復元できるので安心です。

CSSバックアップの方法

CSSのバックアップには３つの方法があります。

1. テキストエディタに手動でコピー
2. FTPソフトを使う
3. プラグインを使う

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

CSSコードをテキストエディタ（メモ帳やVS Codeなど）にコピーして保存します。最も手軽で必要な時に素早く見返せる方法です。

編集する前のコードをテキストエディタに保存し、不具合が起こった際には保存していたコードを丸ごとコピペして置き換えれば元に戻ります。

注意点として、メモ帳の場合はCSSを保存すると文字化けしてしまうので、開くときに文字コード「UTF-8」を選択してください。（きちんと開けるかを先に確認することをおすすめします）

FTPソフトを使用

FTPソフト（FileZillaなど）でサーバーにアクセスし、Cocoonのstyle.css（スタイルシート）をダウンロードします。これはサーバーのデータそのものを保持できるため、カスタマイズ後の復元も容易です。

FTPソフトとは、サーバにファイルをアップロードしたり、サーバにあるファイルをダウンロードしたりする際に使うファイル転送用ソフトウェアのこと。FTPソフト「FileZilla」の使い方については、下記サルワカさんの記事がとても分かりやすく解説されています。

一度ソフトをインストールしておけば、編集した子テーマのstyle.css（スタイルシート）だけを簡単にパソコンに保存できるのでオススメ。

【FileZillaの使い方】ワードプレスでFTPソフトを使おう

バックアップ用プラグインを利用

「All-in-One WP Migration」「BackWPup」などのバックアップ用プラグインを使用すると、CSSも含めてテーマファイル全体のバックアップが可能です。特に初心者には便利です。

定期的に自動バックアップできると、より安心です。

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

サイト全体のバックアップを取るなら、エックスサーバーの自動バックアップ機能が便利です。エックスサーバーでは、データベースやファイルを定期的にバックアップしてくれるため復旧作業もスムーズです。

エックスサーバーでは2種類のバックアップが取得されています。ワードプレスを完全に復元するにはこの２つのデータを復元する必要があります。

1. サーバー領域データのバックアップ（最新14日分）
   • FTPでアクセスできるサーバー領域に保存されたデータ。HTML、CSS、PHP、画像ファイルなど。
2. データベース(MySQL)バックアップ（最新14日分）
   • ログインアカウント情報や、投稿記事やコメント、カテゴリーやタグのデータの情報など。

以前、プラグインの不具合でサイトが壊れてしまった絶体絶命の窮地に、エックスサーバーの自動バックアップ復元で助けてもらった経緯があります。

復元がとても簡単&無料だったことから、現在はエックスサーバーの自動バックアップ一本で運営中。プラグインは不具合事例もあったため削除しました。

エックスサーバーをチェックする

現在は自動バックアップがあるレンタルサーバーも多いので、ご利用のサーバーのバックアップの有無と、復元方法（手順）まで確認しておくと万一のときに慌てずに対応できます。

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

「カスタムHTML」を使うことで自由にHTMLコードを入力できます。

1. 投稿編集画面で「＋」ボタンをクリック（またはスラッシュ / を入力）
2. 「カスタムHTML」と検索し、ブロックを追加
3. 必要なHTMLコードを記述します

カスタムHTML編集時のポイント

HTML編集をスムーズに進めるため、以下のポイントを押さえておきましょう。トップページの作成や複数のHTMLコードを使用する場合は、以下の2つの管理方法がおすすめです。

1. 1つのブロックにすべてまとめる方法
   • すべてのHTMLコードを1つの「カスタムHTML」ブロック内に記載する方法。
   • シンプルですが、コード量が増えると管理が難しくなる場合があります。
2. まとまりごとにブロックを分ける方法
   • 内容ごとに「カスタムHTML」ブロックを分けて配置する方法。
   • 視覚的に分かりやすく、特定部分の変更が容易です。

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

「カスタムHTML」は手作業でのコード記述だけでなく直感的なブロック編集にも対応しています。これによりコーディング経験の少ない方でも効率よくページをカスタマイズ可能です。

ブロックの活用例

以下は、「カスタムHTML」を活用したシンプルな構造の例です。

<div>

ブロックを追加

</div>

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

注意点：HTMLタグのペアリング

<div>と</div>のペアが正確に対応していることを確認してください。

同じブロック内でペアが不足している場合はエラーが表示されますが、記事全体を通じて正しいペアリングになっていれば正常に表示されます。

CocoonでのCSS編集方法／スタイルシート

CSSを編集するには３つの方法がありますので、どれか一つにコードを書いていきます。

①子テーマのスタイルシート(style.css)

Cocoonの子テーマにある style.css に直接記述します。子テーマはアップデートに影響されないため、カスタマイズの保存には最適です。

1. 管理画面の「外観」から「テーマファイルエディター」をクリック
   • Cocoon Child: スタイルシート (style.css) のページが開きます
2. 元から書いているコード（テーマ情報）は消さずにCSSを記述します。
   • /* 子テーマ用のスタイルを書く*/の下の行に追加しましょう。

②追加CSS

「追加CSS」に記述します。こちらもテーマのアップデートに影響されません。

1. 管理画面の「外観」から「カスタマイズ」をクリック
2. 「追加CSS」をクリックすると、下記画像のようなCSSを編集するページになります
3. 追加CSSの一番上（１行目）から順番に記述します。

③投稿編集画面のカスタムCSS

個別記事やページごとにCSSを適用したい場合は、投稿編集画面にある「カスタムCSS」オプションを使います。

CSSの優先順位

CSSには記述する場所、記述方法により優先度があります。

優先度の高い順ランキング。

記述方法による優先度

1. CSSに指定するセレクタ（高い順）
   1. ID
   2. class
   3. HTMLタグ
2. セレクタが同じレベルの場合、CSSファイルに下にあるものほど優先される
3. 最優先は!important;がついているもの

①に＋して指定するセレクタの詳細度が高い方が優先度は上がります。

記述する場所による優先度／Cocoonテーマ内

優先度の高い順ランキング。

1. ワードプレスのカスタマイザー「追加CSS」
   • 管理画面→「外観」→「カスタマイズ」→「追加CSS」に入力したCSS
2. 投稿ページ内「カスタムCSS」
   • 特定の記事においてスタイルを微調整したり、一時的な変更をおこなう場合に有用
3. Cocoon設定
   • 全体設定、各設定で指定した色など
4. 子テーマのstyle.css
   • 親テーマのスタイルを上書きし、カスタムスタイルを追加できるもの
5. スキンのCSS
   • Cocoon設定でスキンを適用している場合
6. 親テーマのCSS
   • テーマそのものを構成しているデフォルトのスタイル

CSSを記述するポイント

全部覚えるのは難しいので、ルールを決めておくと把握しやすくなります。

• CSSに指定するセレクタは同レベルに統一する
  • 特別な理由がない限り、クラスで揃えておくと使いやすいです
• 記述する場所を統一する
  • 基本的に子テーマのstyle.cssを使い、ピンポイントだけ投稿ページ内「カスタムCSS」を使う等
• !important;は乱用しない
  • 親テーマのCSSが強く、どうしても!important;がないと反映されない場所にだけ使用する

ここを統一しておかないと、あのCSSは何が優先されてどこに書いてある？といった滅茶苦茶な状態になってしまい、WEB上からコピペしたCSSがなぜか反映されないといったことも起こってきます。

反映されない原因探しも大変になってしまいます。

こういったルールを意識するだけで、優先度はそれほど問題なくCSSを使えますよ。

Cocoonカスタマイズ｜コード編集時の注意事項

コードをカスタマイズする際には、一つのミスが原因でレイアウトが崩れたり意図した内容が反映されなかったりすることがあります。そのため慎重に操作しながら以下の注意点を確認してください。

特に間違いやすい点を書いておきます。

表示がおかしい場合の確認ポイント

HTML・CSS 共通の注意事項

• コードは半角英数字になっているか
  • 全角文字が混入していないかを確認してください。
  • （例） <ｄｉｖ> → <div>（全角から半角へ）
• 余計なスペースや文字が入っていないか
  • コード前後や行間に全角スペースや不要な文字が紛れていないかを確認。
• スペルミスがないか
  • コードの書き間違いや誤字をチェック。

HTML の注意事項

• タグは正しく記述されているか
  • < と > で適切に囲まれているかを確認します。
  • 閉じタグ（例：</div>）を忘れていないか、多すぎないか注意。
• リンクの記述方法
  • URLは必ず "（半角ダブルクォーテーション）で囲む。
  • （例）<a href="https://example.com">リンク</a>

CSS の注意事項

• CSSクラスの記述方法
  • クラス指定の前に必ず「.」（半角ドット）がついているかを確認。
  • （例） .class-name {}
• プロパティの囲い
  • スタイル設定は必ず {} で囲まれているか確認。
  • （例） { color: red; }
• メモ書きの形式
  • CSS内のメモ書き（コメント）は必ず /**/ で囲む。
  • （例） /* ここは背景色の設定 */
• 重複コードの確認
  • 同じセレクタで異なるスタイルを記述した場合、後に書かれた内容が優先されるためコードが競合していないかを確認。

よくあるミスと対策

• CSSでの全角スペースの混入
  特にCSSはエラーが分かりづらいため、スペースが原因でエラーが起こることが多いです。タイピング時に慎重に確認しましょう。
• 閉じタグのミス
  HTMLでは閉じタグ不足や多重記述が原因で、構造が崩れることがあります。
• スペルミス
  少しの誤字で動作しなくなるので、小さなエラーにも注意が必要です。

失敗しても途中からやり直せるようにバックアップをおすすめします。

CSSが効いていない場合は、ブラウザのキャッシュをクリアする、あるいはデベロッパーツールを使用してスタイルの適用状況を確認しましょう。詳細な手順は別途リンクでご案内しているページも参照してください。

まとめ

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

HTML・CSSの編集をマスターすることで、自由なデザインカスタマイズを実現する第一歩となります。もし忘れてしまったらこの記事に戻って確認し、何度でも挑戦してみてくださいね。

注意深い確認が成功への近道です！

当サイトではCocoonや他テーマでも使えるカスタマイズを紹介しています。合わせてご覧ください。