【初心者向け】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でデモページを作成する方法

まとめ

参考になれば幸いです！では⸝⸝- ̫ -⸝⸝