![](https://turicco.com/wp-content/uploads/2023/10/1698139209756.png)
HTML?CSS?どこに書いたらいいの?
戸惑う方向けに、このページではHTMLやCSSの編集方法とバックアップのとり方をまとめます。特にCocoonでのカスタマイズが初めての方、慣れていない方はご一読ください。
カスタマイズ前にバックアップをとることをお勧めします
CSSを使ったカスタマイズは気軽におこなえる反面、コードの記述に失敗するとレイアウトが崩れたり表示されなくなることがあります。
![](https://turicco.com/wp-content/uploads/2023/10/1698139064936-150x150.png)
レイアウト崩れたけどどこをいじったか覚えてない!直せないどうしよう…!!!
サイト本体を構成している親テーマと違い、カスタマイズや機能の追加を行うために使用される子テーマ(Cocoon Child)を使えば、CSSの編集でサイトが壊れるといった重大なトラブルは基本起こりません。
レイアウトが崩れても直前に追加したコードを消したり、間違ったところを修正すれば元に戻ります。
とは言っても、修復できないもしものときのために、事前にバックアップをとっておくのが安全です。
CSSのバックアップをとる方法3つ
![図解/バックアップ&HTML、CSS編集方法](https://turicco.com/wp-content/uploads/2024/07/css-11.png)
CSSのバックアップには3つの方法があります。
- テキストエディタに手動でコピー
- FTPソフトを使う
- プラグインを使う
テキストエディタに手動でコピー
メモ帳などのテキストエディタにコピペして保存します。ちょっとしたCSS追加ならこちらで十分です。
注意点として、メモ帳の場合CSSを保存すると文字化けしてしまうので、開くときに文字コード「UTF-8」を選択してください。(きちんと開けるかを先に確認することをおすすめします)
![](https://turicco.com/wp-content/uploads/2024/02/2024-02-05-1.png)
FTPソフトを使う
FTPソフトとは、サーバにファイルをアップロードしたり、サーバにあるファイルをダウンロードしたりする際に使うファイル転送用ソフトウェアのこと。
「FileZilla」といったFTPソフトを使い、style.css(スタイルシート)をサーバーからダウンロードします。
FTPソフト「FileZilla」の使い方については下記、サルワカさんの記事がとってーも!!分かりやすいのでご紹介します。
【FileZillaの使い方】WordPressでFTPソフトを使おう
![](https://turicco.com/wp-content/uploads/2023/07/1690628242196-150x150.png)
私はこの②FTPソフトを使っています。一度ソフトをインストールしておけば、編集した子テーマのstyle.css(スタイルシート)だけを簡単にパソコンに保存できるのでオススメ。
プラグインを使う
「All-in-One WP Migration」「BackWPup」等のプラグインがあり、スタイルシートだけでなくその他のファイルやデータベースにある重要なデータもバックアップできます。
定期的に自動バックアップできると、より安心です。
ワードプレス全体のバックアップならエックスサーバーが頼もしい
ちなみに、データベースなどワードプレス全体のバックアップついては、プラグインもありますが当サイトではエックスサーバーの自動バックアップを利用しています。
以前、プラグインの不具合でサイトが壊れてしまった絶体絶命の窮地に、エックスサーバーの自動バックアップ復元で助けてもらった経緯があります。
復元がとても簡単&無料で頼りになるので、現在はエックスサーバーの自動バックアップ一本で運営中。
プラグインは不具合事例もあったため削除しました。
現在は自動バックアップがあるレンタルサーバーも多いので、ご利用のサーバーのバックアップの有無と、復元方法(手順)まで確認しておくと万一のときに慌てずに対応できます。
![](https://turicco.com/wp-content/uploads/2023/07/1690628242196-150x150.png)
エックスサーバーは神!!
CocoonでのHTML編集方法/カスタムMTML
![](https://turicco.com/wp-content/uploads/2024/01/html.jpg)
まずCocoonでのHTML編集方法について。
- ブロックエディタを使っている場合、投稿編集画面で+をクリック(または/スラッシュを入力)
- 「カスタムHTML」で検索
- ブロックメニューの中にある「カスタムHTML」で編集します。
![](https://turicco.com/wp-content/uploads/2024/07/custom-html.png)
複数のコードがある場合
固定ページを用いたトップページを作成するなど複数のHTMLコードが必要な場合、ブロックの使い方は次のどちらの方法でもOK。
- ひとつのブロックのカスタムHTMLにまとめてコードを書く、またはコードエディタを使う(一括で編集しやすい)
- まとまりごとに各ブロックに分けてコードを書く(ブロックごとに編集できるので視覚的に分かりやすい)
![HTML/CSS編集方法](https://turicco.com/wp-content/uploads/2022/10/2022-10-05-2-800x478.png)
例えばこのように<div>コンテンツ</div>
を分けてカスタムHTMLに入力。
<div>
ここにブロック機能を使ってコンテンツ作成ができる。
</div>
同じカスタムHTML内で<div></div>
が対になっていないためエラー表示がでますが、HTMLに変換して作業を続ければOK。
同じ記事内で<div></div>
がきちんと対になっていれば問題なく表示できています。(使い方として推奨ではないかもしれませんが…)
![](https://turicco.com/wp-content/uploads/2023/07/1690628242196-150x150.png)
コードではなく、ブロックで直感的に編集したい方は便利ですよ。
CocoonでのCSS編集方法/スタイルシート
![](https://turicco.com/wp-content/uploads/2024/07/css-2.png)
CSSを編集するには3つの方法がありますので、どれか一つにコードを書いていきます。
![](https://turicco.com/wp-content/uploads/2023/07/1690628303931-150x150.png)
基本的に①のスタイルシートを使えば問題ありません。
①子テーマのスタイルシート(style.css)
管理画面の「外観」から「テーマファイルエディター」をクリック。
「スタイルシート (style.css)」のページが開くので、元から書いているコード(テーマ情報)は消さずにCSSを記述します。/* 子テーマ用のスタイルを書く*/の下の行に追加しましょう。
![](https://turicco.com/wp-content/uploads/2024/07/stylesheet.png)
- テーマの更新に際に上書きされない
- コード記述にミスがあっても大きなトラブルにはなりにくい(レイアウトが崩れた場合、追加したコードを丸ごと消せば元に戻ります。編集前のコードをコピーしておけば復元も簡単で安心)
②追加CSS
管理画面の「外観」から「カスタマイズ」をクリック。
「追加CSS」をクリックすることで、右側のようなCSSを編集するページになります。
追加CSSの一番上(1行目)から順番に記述します。
![](https://turicco.com/wp-content/uploads/2024/07/tuika-css.png)
③投稿編集画面のカスタムCSS
投稿編集画面のメニューにある「カスタムCSS」にもCSSを入れることができます。
![HTML/CSS編集方法](https://turicco.com/wp-content/uploads/2023/01/Screenshot_20230118-184448_1_1-500x244.png)
CSSの優先順位
![イメージ画像](https://turicco.com/wp-content/uploads/2023/02/img0122-4.png)
CSSには記述する場所、記述方法により優先度があります。
優先度の高い順ランキング。
記述方法による優先度
- CSSに指定するセレクタ(高い順)
- ID
- class
- HTMLタグ
- セレクタが同じレベルの場合、CSSファイルに下にあるものほど優先される
- 最優先は!important;がついているもの
①に+して指定するセレクタの詳細度が高い方が優先度は上がります。
![](https://turicco.com/wp-content/uploads/2023/10/1698138872271-150x150.png)
さらに、同テーマ内の記述する場所でも変わります。
記述する場所による優先度/Cocoonテーマ内
優先度の高い順ランキング。
- ワードプレスのカスタマイザー「追加CSS」
- 管理画面→「外観」→「カスタマイズ」→「追加CSS」に入力したCSS
- 投稿ページ内「カスタムCSS」
- 特定の記事においてスタイルを微調整したり、一時的な変更を行う場合に有用
- Cocoon設定
- 全体設定、各設定で指定した色など
- 子テーマのstyle.css
- 親テーマのスタイルを上書きし、カスタムスタイルを追加できるもの
- スキンのCSS
- Cocoon設定でスキンを適用している場合
- 親テーマのCSS
- テーマそのものを構成しているデフォルトのスタイル
![](https://turicco.com/wp-content/uploads/2023/10/1698138913593-150x150.png)
もー、分からん!!
CSSを記述するポイント
全部覚えるのは難しいので、ルールを決めておくと把握しやすくなります。
- CSSに指定するセレクタは同レベルに統一する
- 特別な理由がない限り、クラスで揃えておくと使いやすいです
- 記述する場所を統一する
- 基本的に子テーマのstyle.cssを使い、ピンポイントだけ投稿ページ内「カスタムCSS」を使う等
- !important;は乱用しない
- 親テーマのCSSが強く、どうしても!important;がないと反映されない場所にだけ使用する
ここを統一しておかないと、あのCSSは何が優先されてどこに書いてある???といった滅茶苦茶な状態になってしまい、反映されない原因探しも大変になってしまいます。
こういったルールを意識するだけで、優先度はそれほど問題なくCSSを使えますよ。
Cocoonカスタマイズ/コードを編集するときの注意事項
![](https://turicco.com/wp-content/uploads/2024/01/img0122-3.png)
コードは一文字でも間違うとレイアウトが崩れたり反映されなかったり、とても繊細な操作が必要なため注意して記述しましょう。
もし表示がおかしい場合は下記の点を確認してみてください。
特に間違いやすい点を書いておきます。
- コードは半角英数字になっているか(コード部分で全角は使えません)
- 前後や余白に余計な全角スペース、文字等が入っていないか
- タグは適切に<>で囲まれているか
- 閉じタグ</ >に過不足はないか
- リンクの場合、URLを“”(半角ダブルクォーテーション)で囲んでいるか
- CSSクラスの前に .(半角ドット)が付いているか
- プロパティを記述する部分を{ }で囲んでいるか
- メモ書きはきちんと/**/で囲んでいるか
- 他に重複しているコードはないか(下に書いたコードが優先されます)
![](https://turicco.com/wp-content/uploads/2023/07/1690628266909-150x150.png)
私自身、特にCSSでの全角スペースには何度も泣きました。HTMLはすぐに気付けるけどCSSの間違いは目視で見つけにくいので注意しましょう!!
失敗しても途中からやり直せるようにバックアップをおすすめします。
CSSが反映されないときの対処法についてはこちらに詳細をまとめましたのでご覧ください。
まとめ
![イメージ画像](https://turicco.com/wp-content/uploads/2023/11/img-1110-1.png)
今回はバックアップとHTML・CSSの編集方法についてご紹介しました。
HTML・CSSの編集をマスターすることで、自由なデザインカスタマイズを実現する第一歩となります。もし忘れてしまったらこの記事に戻って確認し、何度でも挑戦してみてくださいね。
当サイトではCocoonや他テーマでも使えるカスタマイズを紹介しています。
合わせてご覧ください。
![](https://turicco.com/wp-content/uploads/2023/07/1690628351109-150x143.png)
それでは良いカスタマイズライフを~♪
Comment コメントはこちらへ