HTMLやCSSの編集方法は共通なので、それぞれの記事に毎回書かずにこちらのページにまとめておきます。
特にカスタマイズが初めての方、慣れていない方はご確認ください。
こんな方にオススメ
- ワードプレステーマCocoonを使っている
- HTML/CSSを使ったカスタマイズをしたい
- コードを書く場所を知りたい
ここを解説
HTMLの編集
ブロックエディタを使っている場合、記事作成画面で＋をクリック（または/スラッシュを入力）してブロックメニューの中にある「カスタムHTML」で編集します。
複数のコードがある場合
固定ページを用いたトップページを作成するなど複数のHTMLコードが必要な場合、ブロックの使い方は次のどちらの方法でもOK。
- ひとつのブロックのカスタムHTMLにまとめてコードを書く、またはコードエディタを使う（一括で編集しやすい）
- まとまりごとに各ブロックに分けてコードを書く（ブロックごとに編集できるので視覚的に分かりやすい）
＼ブロックを分けたときのイメージ／
CSSの編集
CSSを編集するには３つの方法がありますので、どれか一つにコードを書いていきます。
基本的に①のスタイルシートを使えば問題ないよ！
①子テーマのスタイルシート(style.css)
管理画面の「外観」から「テーマファイルエディター」をクリック。
すると｢スタイルシート (style.css)｣のページが開くので元から書いているコード（テーマ情報）は消さずに、上からCSSを記述します。
②追加CSS
管理画面の「外観」から「カスタマイズ」をクリック。
「追加CSS」をクリックすることで、右側のようなCSSを編集するページになります。
追加CSSの一番上（１行目）から順番に記述します。
③記事作成画面のカスタムCSS
記事作成画面のメニューにある「カスタムCSS」にもCSSを入れることができます。
ひとこと
以上、テーマCocoonでのHTML・CSSの編集方法をご紹介しました。
コードは一文字でも間違うとレイアウトが崩れたり反映されなかったりするので注意して記述しましょう！！
そして失敗しても途中からやり直せるようにバックアップをお忘れなく。
それでは良いカスタマイズライフを～♪
Comment