お買い物マラソン開催中!9/24 01:59まで楽天市場
カスタマイズ

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

アイキャッチ/HTML・CSS編集方法カスタマイズ
スポンサーリンク
ブロガー
ブロガー

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

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

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

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

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

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

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

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

図解/バックアップ&HTML、CSS編集方法

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

  1. CSSコードを直接コピー
    • メモ帳などにコピペして保存します。(ちょっとしたCSS追加ならこちらで十分です)
  2. FTPソフトを使う
    • 「FileZilla」といったFTPソフトを使い、style.css(スタイルシート)をサーバーからダウンロードします。
  3. プラグインを使う
    • 「BackWPup」プラグインを使います。CSSだけでなくその他のファイルやデータベースにある重要なデータもバックアップできます。

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

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

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

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

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

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

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

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

CocoonでのHTML編集方法

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

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

複数のコードがある場合

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

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

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

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

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

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

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

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

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

HTML/CSS編集方法

②追加CSS

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

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

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

HTML/CSS編集方法

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

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

HTML/CSS編集方法

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

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

サイト型トップページ/確認

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

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

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

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

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

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

まとめ

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

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

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

合わせてご覧ください。

クリックで記事一覧が表示されます
アイキャッチ/カテゴリー

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

Comment

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