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

戸惑う方も多いかと思いますので、このページではHTMLやCSSの編集方法とバックアップのとり方をまとめました。

特にCocoonでのカスタマイズが初めての方、慣れていない方はご一読ください。

カスタマイズ前にバックアップをとることをお勧めします

CSSを使ったカスタマイズは気軽におこなえる反面、コードの記述に失敗するとレイアウトが崩れたり表示されなくなることがあります。

サイト本体を構成している親テーマと違い、カスタマイズや機能の追加を行うために使用される子テーマ（Cocoon Child）を使えば、CSSの編集でサイトが壊れるといった重大なトラブルは基本起こりません。

レイアウトが崩れても直前に追加したコードを消したり、間違ったところを修正すれば元に戻ります。

とは言っても、修復できないもしものときのために事前にバックアップをとっておくのが安全です。

CSSのバックアップをとる方法３つ

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

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

メモ帳などのテキストエディタにコピペして保存します。（ちょっとしたCSS追加ならこちらで十分です）

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

FTPソフトを使う

FTPソフトとは、サーバにファイルをアップロードしたり、サーバにあるファイルをダウンロードしたりする際に使うファイル転送用ソフトウェアのこと。

「FileZilla」といったFTPソフトを使い、style.css（スタイルシート）をサーバーからダウンロードします。

FTPソフト「FileZilla」の使い方については下記、サルワカさんの記事がとってーも！！分かりやすいのでご紹介します。

【FileZillaの使い方】WordPressでFTPソフトを使おう

プラグインを使う

「All-in-One WP Migration」「BackWPup」等のプラグインがあり、スタイルシートだけでなくその他のファイルやデータベースにある重要なデータもバックアップできます。

定期的に自動バックアップできると安心かと思います。

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

ちなみに、データベースなどワードプレス全体のバックアップついては、プラグインもありますが当サイトではエックスサーバーの自動バックアップを利用しています。

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

復元がとても簡単&無料で頼りになるので、現在はエックスサーバーの自動バックアップ一本で運営中。

「BackWPup」プラグインは不具合事例もあったため削除しました。

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

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

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

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

メニューに表示がない場合は検索してくださいね。

複数のコードがある場合

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

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

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

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

管理画面の「外観」から「テーマファイルエディター」をクリック。

すると｢スタイルシート (style.css)｣のページが開くので元から書いているコード（テーマ情報）は消さずにCSSを記述します。

②追加CSS

管理画面の「外観」から「カスタマイズ」をクリック。

「追加CSS」をクリックすることで、右側のようなCSSを編集するページになります。

追加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の編集方法についてご紹介しました。

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

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

合わせてご覧ください。