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」の使い方については、下記サルワカさんの記事がとても分かりやすく解説されています。

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

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

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

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

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

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

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

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

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

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

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

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

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

まずCocoonでのHTML編集方法について。

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

ポイント

CocoonテーマでHTMLを編集する際には、以下のポイントを押さえておくと効率的かつミスを減らせます。

複数のコードがある場合

固定ページを用いてトップページを作成する場合や複数のHTMLコードを使用する際には、以下の2つの方法でブロックを活用できます。

1. ひとつのブロックにまとめてコードを書く
   • すべてのHTMLコードを1つの「カスタムHTML」ブロック内に記載する方法。
   • メリット：編集内容がまとまっており、修正作業がしやすい。
2. まとまりごとにブロックを分けてコードを書く
   • 内容ごとに「カスタムHTML」ブロックを分けて配置する方法。
   • メリット：視覚的に分かりやすく、特定部分の変更が容易。

ブロックを使いたい場合に活用できる小技

例えば、以下のような手法を使って「カスタムHTML」にコードを入力します。

<div>

ここにブロック機能を使ってコンテンツ作成ができます。

</div>

ただし、同じカスタムHTML内で <div> と </div> のペアが正確に対応していない場合、エラーが表示されることがあります。その場合でも、記事全体を通じて <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は何が優先されてどこに書いてある？？？といった滅茶苦茶な状態になってしまい、反映されない原因探しも大変になってしまいます。

こういったルールを意識するだけで、優先度はそれほど問題なく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や他テーマでも使えるカスタマイズを紹介しています。合わせてご覧ください。