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の使い方】WordPressでFTPソフトを使おう

プラグインを使う

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

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

ワードプレス全体のバックアップならエックスサーバーが頼もしい

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

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

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

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

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

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

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

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

1. ブロックエディタを使っている場合、投稿編集画面で＋をクリック（または/スラッシュを入力）
2. 「カスタムHTML」で検索
3. ブロックメニューの中にある「カスタムHTML」で編集します。

複数のコードがある場合

固定ページを用いたトップページを作成するなど複数のHTMLコードが必要な場合、ブロックの使い方は次のどちらの方法でもOK。

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カスタマイズ／コードを編集するときの注意事項

コードは一文字でも間違うとレイアウトが崩れたり反映されなかったり、とても繊細な操作が必要なため注意して記述しましょう。

もし表示がおかしい場合は下記の点を確認してみてください。

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

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

CSSが反映されないときの対処法についてはこちらに詳細をまとめましたのでご覧ください。

まとめ

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

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

当サイトではCocoonや他テーマでも使えるカスタマイズを紹介しています。

合わせてご覧ください。