くるみ
- カスタマイズのために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ソフトは欲しくなるものなので、慣れておくと自ずとカスタマイズの幅も広がります。
更にデモページなどを作る際には必須になります。
【たった4ステップ】WordPressでデモページを作成する方法 慣れればそこまで難しいものではないのでまず一度触ってみるのが吉かなと。
ブログ主
まとめ
参考になれば幸いです！では⸝⸝- ̫ -⸝⸝
