WELCOME
当ブログを紹介いただいたサイトを掲載します受付中

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

アイキャッチ/cocoon カスタマイズ
カスタマイズ
記事内に広告が含まれています
スポンサーリンク

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

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

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

見たいところをクリックできます
スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー35
  • ワードプレスで2サイトを運営しています
はっちゃん
です
プロフィール

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

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

以前の私
以前の私

レイアウト崩れたけどどこをいじったか覚えてない!直せないどうしよう…!!!

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

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

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

スポンサーリンク

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

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

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

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

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

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

②FTPソフトを使う

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

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

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

私はこの②FTPソフトを使っています。一度ソフトをインストールしておけば、編集した子テーマのstyle.css(スタイルシート)だけを簡単にパソコンに保存できるのでオススメ。

③プラグインを使う

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

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

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

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

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

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

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

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

エックスサーバーは神!!

スポンサーリンク

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

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

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

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

複数のコードがある場合

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

  1. ひとつのブロックのカスタムHTMLにまとめてコードを書く、またはコードエディタを使う(一括で編集しやすい)
  2. まとまりごとに各ブロックに分けてコードを書く(ブロックごとに編集できるので視覚的に分かりやすい)
\ブロックを分けたときのイメージ/
HTML/CSS編集方法
超絶!!使える小技

例えばこのように<div>コンテンツ</div>を分けてカスタムHTMLに入力。

<div>

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

</div>

同じカスタムHTML内で<div></div>が対になっていないためエラー表示がでますが、HTMLに変換して作業を続ければOK。

同じ記事内で<div></div>がきちんと対になっていれば問題なく表示できています。(使い方として推奨ではないかもしれませんが…)

コードではなく、ブロックで直感的に編集したい方は便利ですよ。

スポンサーリンク

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

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

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

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

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

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

編集するテーマは子テーマ(Cocoon Child)が選択されているかを必ず確認しましょう。

css
子テーマを使うメリット
  • テーマの更新に際に上書きされない
  • コード記述にミスがあっても大きなトラブルにはなりにくい(レイアウトが崩れた場合、追加したコードを丸ごと消せば元に戻ります。編集前のコードをコピーしておけば復元も簡単で安心。)

②追加CSS

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

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

追加CSSの一番上(1行目)から順番に記述します。

HTML/CSS編集方法

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

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

HTML/CSS編集方法

そのページだけピンポイントに適用したいときに。

スポンサーリンク

Cocoonカスタマイズ/コードを編集するときの注意事項

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

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

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

  • コードは半角英数字になっているか(コード部分で全角は使えません)
  • 前後や余白に余計な全角スペース文字等が入っていないか
  • タグは適切に<>で囲まれているか
  • 閉じタグ</ >に過不足はないか
  • リンクの場合、URLを“”(半角ダブルクォーテーション)で囲んでいるか
  • CSSクラスの前に .(半角ドット)が付いているか
  • プロパティを記述する部分を{ }で囲んでいるか
  • メモ書きはきちんと/**/で囲んでいるか
  • 他に重複しているコードはないか(下に書いたコードが優先されます)

私自身、特にCSSでの全角スペースには何度も泣きました。HTMLはすぐに気付けるけどCSSの間違いは目視で見つけにくいので注意しましょう!!

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

まとめ

イメージ画像

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

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

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

合わせてご覧ください。

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

COMMENT

タイトルとURLをコピーしました