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

ブロガー

HTML？CSS？どこに書いたらいいの？

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

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

この記事で分かること

• ワードプレス（CSS）のバックアップ方法
• HTMLの編集方法
• CSSの編集方法

ここを解説

この記事を書いた人

• ブログ好きな40代主婦
• CocoonサイトをCSSでフルカスタマイズ
• JavaScriptを勉強中
• ドメインパワー32
• ワードプレスで２サイトを運営しています

はっちゃん
です

コードを編集する前にバックアップをとることをお勧めします

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

子テーマ（Cocoon Child）を使えばサイトが壊れるといった重大なトラブルは起こりにくいですが、もしものときのために事前にバックアップをとっておきましょう。

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

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

私は②FTPソフトを使っています。style.css（スタイルシート）だけを簡単に保存できるのでオススメ。

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

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

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

ちなみに、データベースなどワードプレス全体のバックアップついては、エックスサーバーの自動バックアップを利用しています。

以前、他プラグインの誤作動でサイトが壊れてしまったときに、エックスサーバーの自動バックアップからの復元で助けてもらった経緯があります。

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

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

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

CocoonでのHTML編集方法

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

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

複数のコードがある場合

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

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

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

基本的に①のスタイルシートを使えば問題ありません。

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

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

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

②追加CSS

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

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

追加CSSの一番上（１行目）から順番に記述します。

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

投稿編集画面のメニューにある「カスタムCSS」にもCSSを入れることができます。

コードを編集するときの注意事項

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

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

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

私自身CSSでの全角スペースには何度も泣きました。目視で見つけにくいので注意しましょう！！

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

まとめ

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

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

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

合わせてご覧ください。

それでは良いカスタマイズライフを～♪