...

【初心者向け】WordPressでCSSコードを追加する3つの方法

WordPressでCSSコードを追加する方法

どうもおはようポテト(@ohayoupoteto22)です。

WordPressでどうやってCSS編集すればいいねん…

ということで今回は

「WordPress始めたてなんだけどCSSってどこに追加するの?」

「カスタマイズのためにCSSコードを編集したいけどどうやるん…?」

という方に向けて「WordPressでCSSコードを追加する方法」をまとめました。

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

ブログ主

早速いってみよう!

WordPressでCSSコードを追加する3つの方法

追加方法
方法1
「追加CSS」に追加
方法2
「テーマエディター」を使って追加
方法3
FTPソフトを使って追加

CSSコードを追加するには以上の3つの方法があります。

それぞれの難易度

難易度
「追加CSS」に追加
(1.0)
「テーマエディター」を使って追加
(1.5)
FTPソフトを使って追加
(4.0)

このように、「追加CSS」を使う方法が一番簡単かつ楽です。

WordPress触りたての方はまず「追加CSS」を使い、少し慣れてきたらもう「FTPソフト」を使う、という流れが最もオススメかなと。

ブログ主

「テーマエディター」を使うやり方はあまりメリットが無いからね

ということでそれぞれのやり方を見ていきましょう。

レッツゴー!

ソロモン

方法1:「追加CSS」に追加

「カスタマイズ」を開く

「外観」>「カスタマイズ」を選択します。

「追加CSS」を選択

一番下にあります。

CSSコードを追加

そしたらここにコードを追加してあげればOKです。

一番簡単!

ソロモン

この方法だと、その変更がライブプレビューで確認できるのでとてもカスタマイズしやすいのが魅力です。

方法2:「テーマエディター」を使って追加

「テーマエディター」を開く

「外観」>「テーマエディター」を選択します。

子テーマを選択する

右上の「編集するテーマを選択」にて自分の使っている子テーマを選択します。

CSSコードを追加

そしたらsytle.cssを選択してあげ、左にファイルの中身が表示されるのでそこに追記してあげればOKです。

 

この方法もとても簡単なのですが…

簡単さなら「追加CSS」が一番、カスタマイズの幅を広げるなら「FTPソフトを使う」やり方がオススメでこの方法はどっちつかずな感じです。

ブログ主

次はそのFTPソフトを使ったやり方だよ

方法3:FTPソフトを使って追加

「FTPソフト」とはファイルをサーバからダウンロードしたりサーバにアップロードするためのソフトのこと。

これでサーバにあるスタイルシートを編集していきます。

FTPソフトをインストールする

FTPソフトで最もおすすめなのは「FileZilla」というソフト。

FileZillaのインストールページに行き、インストールします。

サーバに接続する

ソフトを立ち上げるとまずこのような画面に行くので、ホスト名・ユーザー名・パスワード・ポートを入力してサーバに接続します。

ブログ主

その4つはレンタルサーバーと契約した時に送られてきたメールなどに記載されているはずです

子テーマのstyle.cssを探す

無事接続できたら上のような画面になると思います。

ここから子テーマのstyle.cssを探します。

どこにあるの…?

ソロモン

 

/(ドメイン名)/public_html/wp-content/themes/(子テーマ名)/style.css

スタイルシートは基本的に上の場所にあります。

が、テーマやサーバによって若干異なるかもしれないのでその辺りは要確認です。

子テーマのstyle.cssを編集する

見つかったら、右クリックして「表示/編集」を選択。

するとCSSコードを追加できるようになります。エディターをインストールしている場合はそれが開くと思うので、そこに追記して保存してあげればOK。

FTPソフト側でも保存する

するとFTPソフトで上のように表示されるので「はい」を押して変更を保存してあげれば、CSSコードの追加完了です。終わりっ!

お疲れ様!

ソロモン

この方法でやるメリットとしては、「FTPソフトに慣れることができる」という点があります。

より細かいカスタマイズをする際にFTPソフトは欲しくなるものなので、慣れておくと自ずとカスタマイズの幅も広がります。

更にデモページなどを作る際には必須になります。

WordPressでデモページを作る方法【簡単】WordPressでデモページを作成してアップロードする方法

 

慣れればそこまで難しいものではないのでまず一度触ってみるのが吉かなと。

ブログ主

ブログ続けてたら更なるカスタマイズ欲はいつか出てくるはず。

まとめ

以上、「WordPressでCSSコードを追加する3つの方法」でした。

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

参考になったらシェアしよう

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA