ワードプレステーマCocoonでカスタマイズ/HTML・CSSの編集方法

HTML/CSSカスタマイズカスタマイズ
お知らせ

2/2(木)09:00 - 2/5(日)23:59
オトクなお買い物のチャンス!
Amazonのタイムセール祭り、
開催されています!

\ポイントアップキャンペーンも同時開催/
この記事はWordPressのテーマCocoon(コクーン)を対象としたカスタマイズになります。

カスタマイズ記事がだんだん増えてきました。

HTMLやCSSの編集方法は共通なので、それぞれの記事に毎回書かずにこちらのページにまとめておきます。

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

こんな方にオススメ
  1. ワードプレステーマCocoonを使っている
  2. HTML/CSSを使ったカスタマイズをしたい
  3. コードを書く場所を知りたい
ここを解説
ウサギ

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

HTMLの編集

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

囲み枠html

複数のコードがある場合

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

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

CSSの編集

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

基本的に①のスタイルシートを使えば問題ないよ!

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

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

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

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

css

②追加CSS

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

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

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

追加css

③記事作成画面のカスタムCSS

記事作成画面のメニューにある「カスタムCSS」にもCSSを入れることができます。

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

ひとこと

以上、テーマCocoonでのHTML・CSSの編集方法をご紹介しました。

コードは一文字でも間違うとレイアウトが崩れたり反映されなかったりするので注意して記述しましょう!!

そして失敗しても途中からやり直せるようにバックアップをお忘れなく。

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

カスタマイズが効かないとき

たった一文字の表記ミスでデザインが崩れたり効かなかったりするので、下記の点を確認してみてください。

  • コードは半角英数字になっているか(全角は使えません)
  • 前後や余白に余計な全角スペース、文字等が入っていないか
  • CSSクラスの前に .(ドット)が付いているか
  • CSSコードは{ }、メモ書きはきちんと/**/で囲んでいるか
  • 他に重複しているコードはないか(下に書いたコードが優先されます)


事前にバックアップをとり、カスタマイズは慎重に行いましょう。

ブログがもっと楽しくなる

基礎、応用編と分かれていて分かりやすい内容。CSSの理解を深めたい人へオススメです!!

カスタマイズ
お役に立てる情報をお届けします
 
この記事を書いた人
はっちゃん

2人の息子(中1、小3)を育てる40代主婦。
子供達の発達障害、次男の難病(ネフローゼ症候群)と向き合う日々。趣味として楽しんでいるCocoonのブログカスタマイズ、暮らしの中で役に立つこと、家族での海釣り記録(姉妹サイト)を主に発信しています。

\Follow/
\Follow/
Turicco

Comment

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