Cocoon(コクーン)でカスタマイズ/HTML・CSSの編集方法

アイキャッチ/HTML/CSS編集方法カスタマイズ

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

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

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

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

HTMLの編集

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

囲み枠html

複数のコードがある場合

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

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

CSSの編集

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

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

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

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

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

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

CSS編集方法

②追加CSS

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

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

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

CSS編集方法

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

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

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

ひとこと

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

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

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

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

Comment

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