MEDIAWordPressアドセンスSearchConsoleアナリティクスレンタルサーバードメインWordPressのCSSはどこにあるのか4つの書く場所を理解する2019.10.01WordPress使い方WordPress初心者HOMEWordPressWordPress使い方WordPressのCSSはどこにあるのか4つの書く場所を理解する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画面を左サイドに開き、変更したいスタイルを確認しながら扱うことができる場所なのが特徴です。AdvertisementWordPressの「テーマエディター」と「追加CSS」の場所がどこにあるのか一つずつ説明していきます。テーマエディターの場所WordPressのテーマエディターの場所はどこにあるのかから説明です。WordPressの管理画面から「外観」の項目の中に「テーマエディター」があります。テーマエディターをクリックしてWordPressのテーマエディターの場所に移動すると、現在使用してるWordPressテーマに対してのファイルが開かれています。テーマエディター内の操作ができるCSSファイルの場所はというと、テーマエディターの画面右側の「テーマファイル」の下に「style.css」というcssファイルがあります。クリックして切り替わった表示がCSSの場所です。このとき使用してるWordPressテーマによってはテーマエディターで操作できるCSSの場所が2つある場合があります。親テーマと子テーマです。CSSの親テーマと子テーマの2つはどこにあるかというと以下のように操作して進むことができます。親テーマも子テーマもテーマエディターの画面「編集するテーマを選択」でテーマの親か子を選択して親テーマのCSS、子テーマのCSSの場所に進めます。親テーマのCSSなら「テーマ名」になってると思います。子テーマのCSSならほとんどが「テーマ名-child」のようになっているので使用中のテーマに対しての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を書くときの場所を探すときは、そのテーマの子テーマを探すようにします。Advertisement追加CSSに書いたCSSはどこで読み込むのかWordPressでCSSを書く場所の二つ目は「追加CSS」です。追加CSSの場所は他のファイル操作がないのでCSSを書くだけの場所として限定された場所です。この場所はWordPressの管理画面から外観のカスタマイズに進んで追加CSS開けば、すぐにCSSを書くことができます。WordPressの追加CSSはCSSが書ける場所ですが、書いたCSSはHTMLファイルのどこで読み込まれるのか理解しておくと、追加CSSの使いどころが分かるかと思います。id=”wp-custom-css”></style>タグで囲まれてスタイルするCSSが読み込まれ反映されています。id=”wp-custom-css”>はCSSの書き方で「外部ファイル」「インライン」「styleタグ」を使う書き方のうち「styleタグ」を使っています。セレクタ、プロパティ、値を使う3つのCSSの書き方そのため追加CSSの使いどころとしては、headの中の読み込み量が多くならないCSSを書くための場所のような感じで使うと良いかと思います。id=”wp-custom-css”>にはstyleタグにidがついてるのでcssの適用する優先順位を少し知っておくと後で役立つかもしれません。idとclassを間違いなく使い分けるために理解しておくべきことAdvertisementテキストエディターでCSSを書くWordPressでCSSを書く場所の三つ目は「テキストエディター」です。先に説明しているテーマエディターとは違い、数多くあるテキストエディターの中からソフト選んでPCにインストールし、WordPressで使用してるstyle.cssを移動させてCSSを書きます。WordPressの中での操作ではなく外部ソフトをCSSを書く場所としての使うイメージです。Windowsのメモ帳やMacのテキストエディットもテキストエディタです。Text」という名前のテキストエディターもCSSを書く場所として使うことができます。Atomエディタをインストールして日本語化(MacとWindowsどちらも)サーバ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を書く場所については参考になる部分があればと思い書いた記事でした。投稿一覧WordPressとWeb関係のことを趣味的に学んでます。独学なので記事で間違ってることがあればご指摘ください。記事が少しでも誰かの参考になればと思います。2019.11.27WordPressテーマをワードプレスにインストールするやり方は一つではなく大きく分けて2種類のやり方があります。2018.10.26WordPressでショートカットキーの便利な使い方があったので使い方と活用する方法について。2019.08.08WordPressにはJavaScriptをテーマに読み込むときの関数が用意されています。WordPress.。