WordPressテーマ「Cocoon」を使っているけど、デザインをもっと自分好みにしたい！、そもそも「style.css」ってどこにあるの！？と思ったことはありませんか？
無料テーマCocoonのstyle.cssは、テーマの外観を定義する主要なスタイルシートファイルです。ウェブサイト全体のデザイン、レイアウト、フォント、色などを制御します。Cocoonは子テーマを使ってカスタマイズすることで、アップデート後も変更が保持されます。
この記事では、WordPress初心者の方向けに、子テーマのstyle.cssを編集する方法を分かりやすく解説します。
なぜCocoonの子テーマ(Child)を使う必要があるの？
Cocoonの親テーマにあるstyle.cssは、テーマのアップデート時に上書きされる為、親テーマのstyle.cssを直接編集すると、アップデート後にカスタマイズ内容が全て失われてしまいます。
子テーマを使うことで、親テーマのファイルを上書きすることなく、安全にカスタマイズを適用し、アップデート後もカスタマイズ内容を保持できます。
子テーマ「Cocoon Child」のstyle.css編集方法
それでは、実際にCocoon Childのstyle.cssを編集する手順を画像付きで解説していきます。WordPress管理画面からの操作なので、初心者の方でも安心です。
WordPress管理画面にログインし、左側のメニューから「外観」>「テーマエディター」を選択します。
画面右上の「選択中のテーマ」ドロップダウンメニューから、Cocoon Childを選択します。
必ずCocoon Childになっていることを確認しましょう！ 間違えて親テーマを選択すると、アップデート時にカスタマイズが失われてしまうので要注意です。
右側のファイル一覧からstyle.cssを選択します。ここにCSSのコードが記述されています。
「ファイルを更新」ボタンをクリックして変更を保存します。このボタンを押さないと編集内容が反映されないので、忘れずにクリックしましょう。
更新が成功すると、画面上部にメッセージが表示されます。エラーが出ている場合は、ここにエラー内容が表示されるので、修正してから再度保存しましょう。
実際にサイトを表示して、カスタマイズが反映されているか確認しましょう。
style.css編集時の注意点
- 親テーマのstyle.cssは絶対に直接編集しない！
- 上書きされてカスタマイズが消えてしまいます。
- 上書きされてカスタマイズが消えてしまいます。
- 編集前に子テーマのバックアップを取っておく！
- 万が一、編集内容に問題があった場合でも、バックアップがあればすぐに復元できます。FTPソフトやファイルマネージャーを使って、子テーマのフォルダを丸ごとコピーしておきましょう。
- 万が一、編集内容に問題があった場合でも、バックアップがあればすぐに復元できます。FTPソフトやファイルマネージャーを使って、子テーマのフォルダを丸ごとコピーしておきましょう。
- style.cssの１番上に追記しない！
- 子テーマのstyle.cssの先頭には、テーマ情報と@import文が記述されています。@import文は必ずstyle.cssの冒頭に記述し、他の記述よりも前に配置してください。
まとめ：子テーマでCocoonカスタマイズをもっと自由に！
Cocoonの子テーマを使えば、style.cssを編集して安全にカスタマイズできます。この記事で紹介した手順を参考に、自分だけのオリジナルデザインを楽しんでください！ もっとCocoonを使いこなしたい方は、Cocoon公式ドキュメントも参考にしてみてくださいね。