WordPressのCSSはどこにあるのか？初心者でWordPressを始めたはいいけどCSSを編集する場所がどこにあるのか分からない時期が私にはありました。
サイトの外観やレイアウトのカスタマイズについて検索結果で調べたとき「このCSSを書いてカスタマイズできます」のような説明のCSSコードがあっても、そもそものCSSを書くのはどこ？ってなることがあったので、WordPressのCSSはどこにあるのかについて書いておこうと思います。
この記事は主にWordPress初心者向けの記事になりますが、復習を兼ねたい方も良ければ読んでみてください。
WordPressのCSSはどこにあるのか
WordPressの管理画面、左側のサイドメニューから操作してCSSを書ける場所は下記の2箇所です。
- テーマエディター
- 追加CSS
テーマエディターというのは、それぞれのブログやWebサイトで使用してるWordPressテーマのテンプレート、つまりテーマに使用してるテーマファイルを操作できるファイルがエディタとして開ける場所です。
そしてもう一つは「追加CSS」です。テーマエディターと同じくWordPressのレイアウトや外観のカスタマイズに使うCSSを書くことができます。
追加CSSの場所ではCSS以外のファイル操作はできず、適用してるWordPressテーマのCSSのみを操作できる場所になります。
追加CSSの特徴は現在適用してるテーマをプレビューしながら追加CSS画面を左サイドに開き、変更したいスタイルを確認しながら扱うことができる場所なのが特徴です。
WordPressの「テーマエディター」と「追加CSS」の場所がどこにあるのか一つずつ説明していきます。
テーマエディターの場所
WordPressのテーマエディターの場所はどこにあるのかから説明です。
WordPressの管理画面から「外観」の項目の中に「テーマエディター」があります。テーマエディターをクリックしてWordPressのテーマエディターの場所に移動すると、現在使用してるWordPressテーマに対してのファイルが開かれています。
テーマエディター内の操作ができるCSSファイルの場所はというと、テーマエディターの画面右側の「テーマファイル」の下に「style.css」というcssファイルがあります。クリックして切り替わった表示がCSSの場所です。
このとき使用してるWordPressテーマによってはテーマエディターで操作できるCSSの場所が2つある場合があります。親テーマと子テーマです。
CSSの親テーマと子テーマの2つはどこにあるかというと以下のように操作して進むことができます。
親テーマも子テーマもテーマエディターの画面「編集するテーマを選択」でテーマの親か子を選択して親テーマのCSS、子テーマのCSSの場所に進めます。
親テーマのCSSなら「テーマ名」になってると思います。子テーマのCSSならほとんどが「テーマ名-child」のようになっているので使用中のテーマに対してのCSSの場所がどこにあるのか分かります。
追加CSSの場所
次にWordPressのCSSの場所「追加CSS」はどこにあるのかです。
管理画面のサイドメニューの「外観」の項目の中にある「カスタマイズ」をクリックして進みます。そしてカスタマイズの項目の中に「追加CSS」の場所はあります。
WordPressの追加CSSの場所を開いて頂くと分かるのですが、追加CSSの場所では画面左側に追加CSSでCSSを書くことができるエディタが表示され、画面右側には使用してるWordPressテーマのブログやサイトが表示されます。
追加CSSは使い勝手が良いので私はCSSで少しブログのデザインを変更する前に実際の表示を確認するために追加CSSの場所まで進みレイアウトのテストをしたりすることがあります。
しかしCSSをがっつり書くときの場所としては追加CSSは使ってないです。
WordPressでCSSを書く場所4つを理解する
WordPressのCSSがどこにあるのか説明をしてきました。テーマエディターと追加CSSがWordPressでCSSがある場所でした。
次はもう一歩踏み込んでWordPressでCSSを「書く場所」を理解しておこうと思います。
CSSを書く場所は主に4つあります。もちろん先に説明しているテーマエディターと追加CSSも含まれていますが、一つずつ理解が深められるようにしておくと役立つかと思います。
テーマエディターでCSSを書く場所は子テーマ
WordPressでCSSを書く場所一つ目はテーマエディターです。
テーマエディターの中にはCSSを扱えるCSSファイルがほとんどのテーマには2つ存在することが多いです。それが以下の2つのファイルです。
- 親テーマのstyle.css
- 子テーマのstyle.css
テーマエディター内の親と子のstyle.cssの場所は「編集するテーマを選択」で親テーマか子テーマを切り替えることができ、切り替えたテーマファイルのファイル項目の中にstyle.cssの場所があります。
しかし親テーマのstyle.cssでテーマのレイアウトや外観をカスタマイズすることは、ほとんど使うことがないと思います。
CSSを書く場所は子テーマのstyle.cssを使います。
使用してるテーマのデザインの元になってるCSSの記述が親テーマに書かれているので、その親テーマのCSSを子テーマのstyle.cssでCSSを書いて上書きする形でCSSを書くことができます。
それなのでテーマエディターに限らず、CSSを書くときの場所を探すときは、そのテーマの子テーマを探すようにします。
追加CSSに書いたCSSはどこで読み込むのか
WordPressでCSSを書く場所の二つ目は「追加CSS」です。
追加CSSの場所は他のファイル操作がないのでCSSを書くだけの場所として限定された場所です。この場所はWordPressの管理画面から外観のカスタマイズに進んで追加CSS開けば、すぐにCSSを書くことができます。
WordPressの追加CSSはCSSが書ける場所ですが、書いたCSSはHTMLファイルのどこで読み込まれるのか理解しておくと、追加CSSの使いどころが分かるかと思います。
追加CSSはWordPressの得意とするPHPファイルで動的にHTMLファイルを形成したファイルの中の<head></head>に囲まれた中に<style id=”wp-custom-css”></style>タグで囲まれてスタイルするCSSが読み込まれ反映されています。
<style id=”wp-custom-css”>はCSSの書き方で「外部ファイル」「インライン」「styleタグ」を使う書き方のうち「styleタグ」を使っています。
そのため追加CSSの使いどころとしては、headの中の読み込み量が多くならないCSSを書くための場所のような感じで使うと良いかと思います。
また<style id=”wp-custom-css”>にはstyleタグにidがついてるのでcssの適用する優先順位を少し知っておくと後で役立つかもしれません。
テキストエディターでCSSを書く
WordPressでCSSを書く場所の三つ目は「テキストエディター」です。
先に説明しているテーマエディターとは違い、数多くあるテキストエディターの中からソフト選んでPCにインストールし、WordPressで使用してるstyle.cssを移動させてCSSを書きます。
WordPressの中での操作ではなく外部ソフトをCSSを書く場所としての使うイメージです。
Windowsのメモ帳やMacのテキストエディットもテキストエディタです。
他にも数多くのテキストエディタがあり、一部ですが「Visual Studio Code」や「Atom」「Sublime Text」という名前のテキストエディターもCSSを書く場所として使用することができるので、WordPressのCSSを編集するときにもおすすめです。
サーバFTPでもCSSが書ける
WordPressでCSSを書く場所四つ目はWordPressに使用してるレンタルサーバーで使えるサーバーFTPです。
WordPressのテーマファイルが置いてあるので、それぞれ使用してるサーバーからstyle.cssの場所まで進むとCSSを書いて編集することができます。
ですがサーバーFTPはほとんど使うことがないのではないでしょうか。
私が初心者の頃はCSSを書く環境について詳しく知らなかったので、サーバーのファイルから開いてCSSを書いてしまうことがありましたが、今では全然CSSを書く場所としては使わなくなりました。
今回の記事を読んでいただけた方は、あくまでもWordPressが紐づいてるサーバーにもstyle.cssがあって、書く場所として存在するんだ。くらいの理解でいてください。
まとめ
WordPressのCSSがどこにあるのか、そしてWordPressのCSSを書く場所について説明してきました。
個人的にはテキストエディターを使用してWordPressのCSSを書いてレイアウトや外観をカスタマイズすることが多いです。
めんどくさいなぁと思うときには追加CSSにCSSを書いてテストしてから、そのままテーマエディターにコピペしてしまうこともあります。
個人的な部分はあまり参考にならないかもしれませんが、WordPressのCSSがどこにあるのかと、CSSを書く場所については参考になる部分があればと思い書いた記事でした。
