ワードプレスでCSSを編集する方法4選！管理画面から編集するのが楽だなあ・・・

今回はワードプレスでCSSを編集するためにどこをどう編集すればいいのか？っていうことをやっていきたい。ワードプレスでブログやサイトを作っても、細かいところが気に入らなかったりすると自分でCSSを加えないといけなかったりしますからね。

その際にどこをいじって変更をすればいいのかっていうことをやっていきます。

ワードプレスのCSS編集はテーマエディターかカスタマイズから

ワードプレスの管理画面でCSSを編集したかったらテーマエディターか外観のカスタマイズから行うことができる。

テーマエディターから編集する際には[外観→テーマエディター]をクリックしよう。そうすると現在適用しているテーマのファイルたちが表示される。CSSはstyle.cssに書き込まれているからstyle.cssをいじればOK。

　テーマをいじる場合は子テーマをいじろう

親テーマをそのままいじって変更を加えることもできるけど、変更する際には子テーマを編集しよう。親テーマがバージョンアップされて上書きされても子テーマを編集していれば変更は維持されるはずです。

[外観のカスタマイズ→追加CSS]からCSSを追加することができる。

ここでCSSを書くと、その書いたCSSを反映してプレビューしてくれるから分かりやすい。納得のいくデザインだったら「公開」ボタンを押せばそれが公開される。

この部分の色合い気に入らないから変更したいなーって思っても、どの部分でどういった記述をすればいいのか分かりません。CSSを書くときには何か要素を指定して、そこに編集を加えるっていうことをやるけど、その要素をまずは特定しなければならない。

例えば、背景色を変更したい個所があったとしたらその個所ってCSS的にはどの箇所？となる。

これを特定するには要素の検証を使うのが良いと思います。Chromeだけど画面を右クリックすると[検証]っていうのが出てくるので、それをクリック。

そうすると下の方にHTMLが出てくる。矢印のマークをクリックしてから変更したい画面の個所にカーソルを合わせると、それに応じてハイライトされるHTMLの要素の箇所も変わるからどこをいじればいいっていうのが分かる。

変更したい個所を特定できたらクリックしよう。そしたら右側のStylesからCSSを書くとその要素に対して変更を加えられる。

実際に変更が加えられるわけじゃないからブラウザを更新したら元に戻るけど、どんな見た目になるか確認できるから便利です。画面が良い感じのデザインになったらそれをコピーしてCSSをワードプレスの管理画面に貼り付ければいいです。

要素を検証するのはカスタマイズの画面からもできるから、そこで変更したい個所を見つけてCSSを指定してやるといいです。

カスタマイズの画面では普通ににサイトを見るようにクリックしてページ移動を移動することができる。だからこのページのこの部分も変更したいんだよなあ・・・っていう時もいろいろいじって変更してみるといいですよ。

レンタルサーバーからcssファイルをアップロードしてCSSを適用するっていうこともできる。自分はエックスサーバーを使っているんだけど、ファイルマネージャーっていうやつからワードプレスのファイルたちを見ることができる。

style.cssもあるからこれをここで編集したり新しくアップロードしたりっていうこともできるね。

細かい編集ぐらいだったらワードプレスの管理画面からいじるのもいいけど、大きい変更をしたいっていう場合には場合によっては自分のパソコンでcssを編集してしまった方が楽かもしれない。

エディタで編集することができますからね。補完もしてくれるしコードを書くなら絶対こっちの方が良い。

編集したらそのファイルをサーバーにアップロードすればいいだけ。

うまくいっていればそのCSSが適用されます。直接編集することもできるから面倒だったらそのままやればいいと思うけど、直接編集はおすすめしないです。(ただcssならミスってもそこまでダメージはないかな・・・)

FileZillaやCyberduckのようなFTPソフトを使って編集したファイルをサーバーにアップロードするっていう手もある。最初は何やってるかよく分からん・・・っていう感じだけど、自分のパソコンからサーバーにファイルをアップロードしたりできるっていうやつ。

これはCyberduckの画面だけど接続先を指定して必要情報を入力して接続すれば、ファイルを見ることができる。

エックスサーバー使っている人はCyberduckの接続方法とか載っていたりするから、見てみてください。

けど、cssの編集にそこまでやる必要はないかなーと思います。他の変更を失敗したらやばいっていうファイル、例えばfunction.phpとかならまだしもstyle.cssでFTP使ってってちょっと面倒感がある。

CSSを編集することのできるプラグインなんていうものもあります。例えばSimple Custom CSS Plugin。

表示される画面にCSSを書いてやればOK。

良いところはコードを補完してくれるところですね、例えばfont-familyとか書こうとしても早い段階で候補を出してくれるからそれを選択するだけでいい。

CSS編集するのにわざわざプラグイン入れる必要あるかなあ？とも思うけど。こういうところはプラグインを入れて使ってみると便利だなあって思っちゃいますね。

ワードプレスでCSSを編集するっていうことを今回やってみたけど、方法はいくつかありますよね。

ワードプレスのCSS編集方法

個人的にはcssぐらいならワードプレスの管理画面からテーマエディターかカスタマイズで編集してしまうのがいいんじゃないかと思います。やっぱり楽だし、カスタマイズからならプレビューを確認しながらできて良いですね。