くるみ
- カスタマイズのためにCSSコードを編集したい
- WordPress始めたてなんだけどCSSってどこに追加するの?
という方に向けて「WordPressでCSSコードを追加する方法」をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
WordPressでCSSを編集する方法
CSSコードを追加するには以上の3つの方法があります。
くるみ
それぞれの難易度
WordPress触りたての方はまず「追加CSS」を使い、少し慣れてきたらもう「FTPソフト」を使う、という流れが最もオススメかなと。
ブログ主
ということでそれぞれのやり方を見ていきましょう。
くるみ
方法1:「追加CSS」に追加
「カスタマイズ」を開く
「外観」>「カスタマイズ」を選択します。
「追加CSS」を選択
一番下にあります。
CSSコードを追加
そしたらここにコードを追加してあげればOKです。
くるみ
この方法だと、その変更がライブプレビューで確認できるのでとてもカスタマイズしやすいのが魅力です。
方法2:「テーマエディター」を使って追加
「テーマエディター」を開く
「外観」>「テーマエディター」を選択します。
子テーマを選択する
右上の「編集するテーマを選択」にて自分の使っている子テーマを選択します。
CSSコードを追加
そしたらsytle.cssを選択してあげ、左にファイルの中身が表示されるのでそこに追記してあげればOKです。
しかしこの方法もとても簡単なのですが…
簡単さなら「追加CSS」が一番、カスタマイズの幅を広げるなら「FTPソフトを使う」やり方がオススメでこの方法はどっちつかずな感じです。
ブログ主
方法3:FTPソフトを使って追加
「FTPソフト」とはファイルをサーバからダウンロードしたりサーバにアップロードするためのソフトのこと。
これでサーバにあるスタイルシートを編集していきます。
しかしこの方法はファイルを直接編集するため、事前にバックアップを取っておくことをオススメします。バックアップの方法については以下の記事で解説しています。
【カスタマイズ時に必須】WordPressでCSSのバックアップをとる方法
FTPソフトをインストールする
FTPソフトで最もおすすめなのは「FileZilla」というソフト。
FileZillaのインストールページに行き、インストールします。
サーバに接続する
ソフトを立ち上げるとまずこのような画面に行くので、ホスト名・ユーザー名・パスワード・ポートを入力してサーバに接続します。
ブログ主
子テーマのstyle.cssを探す
無事接続できたら上のような画面になると思います。
ここから子テーマのstyle.cssを探します。
くるみ
/(ドメイン名)/public_html/wp-content/themes/(子テーマ名)/style.css
スタイルシートは基本的に上の場所にあります。
が、テーマやサーバによって若干異なるかもしれないのでその辺りは要確認です。
子テーマのstyle.cssを編集する
見つかったら、右クリックして「表示/編集」を選択。
するとCSSコードを追加できるようになります。エディターをインストールしている場合はそれが開くと思うので、そこに追記して保存してあげればOK。
FTPソフト側でも保存する
するとFTPソフトで上のように表示されるので「はい」を押して変更を保存してあげれば、CSSコードの追加完了です。終わりっ!
くるみ
この方法でやるメリットとしては、「FTPソフトに慣れることができる」という点があります。
より細かいカスタマイズをする際にFTPソフトは欲しくなるものなので、慣れておくと自ずとカスタマイズの幅も広がります。
更にデモページなどを作る際には必須になります。

ブログ主
まとめ
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝