WordPressにはCSSの編集をすることができるいくつかの場所がありますが、CSSの編集はテキストエディタでできるようになることが理想的です。
WordPressのCSSファイルをFTPソフトでローカルにダウンロードしてテキストエディタでCSSを編集することで、WordPressのテーマエディターや追加CSSで編集するよりも効率よく安全にCSSの編集に没頭できます。
CSSの編集をテキストエディタでできるようにするための方法をまとめたので参考になればと思います。
WordPressのCSSを編集するツールの準備
WordPressのCSSをテキストエディタで編集できるようにするには、CSSを編集するツールを2つ準備して編集環境を整えます。
準備するツールは以下の2つです。
- テキストエディタ
- FTPソフト
テキストエディタはCSSを編集する場所をWordPressの管理画面から開く「テーマエディター」や「追加CSS」ではなく、PC上にテキストエディタを開いてCSSの編集ができるようにするために準備が必要なツールです。
FTPソフトはテキストエディタでCSSを編集するWordPressのcssファイルをローカルフォルダにダウンロード(移動)してテキストエディタで開けるようにするために準備が必要なツールです。
上記2つのCSSを編集するツールを準備して使用できるようにすることで、WordPressの追加CSSやテーマエディタでCSSを編集するよりも見やすい編集環境で作業する事ができます。
CSSを編集するテキストエディタ
WordPressのCSSを編集するツール「テキストエディタ」は数多くのテキストエディタがあります。
その中でもMacとWindowsの両方で使用することができ使いやすいと思えるテキストエディタ「Visual Studio Code」をインストールしてWordPressのCSSを編集するのがおすすめです。
Visual Studio CodeはMicrosoftが開発しているコードエディタで、いろいろなプログラミング言語に対応し拡張機能も充実しているテキストエディタです。
そのためCSSの編集をするだけに限らず、WordPressのHTMLやPHPの編集もテキストエディタでシンタックスハイライトして編集ができます。
テキストエディタVisual Studio Codeをインストールする手順は説明が長くなってしまうので別記事で説明しています。
Visual Studio Codeを日本語化して編集作業できるようにするまでの説明にしてありますのでテキストエディタの準備をする参考に使ってください。
CSSファイルを転送するFTPソフト
WordPressのCSSを編集できるようにするツール「FTPソフト」は、編集するCSSファイルをサーバーからPCのローカルフォルダに転送する移動手段として使用します。
WordPressのCSSを編集するファイルはstyle.cssです。style.cssはサーバーに保管してあります。
そのためWordPressのstyle.cssをPC上のテキストエディタで編集できるようにするためには、サーバーにあるstyle.cssをPCのフォルダに移動する必要があります。
FTPソフトは、この編集ファイルの移動をするために準備が必要なのです。
編集するWordPressのCSSファイルを転送することができるFTPソフトは、いろいろなFTPソフトがありますが「FileZilla」というFTPソフトをインストールして準備します。
FileZillaをインストールしてからWordPressのファイルを保存してるサーバーとFTPソフト (FileZilla)を接続するまでの説明をしてる記事を用意したので、CSSファイルを転送するFTPソフトの準備に使ってください。
WordPressのCSSをテキストエディタで編集する
WordPressのCSS編集をテキストエディタでできるようにするための準備をしっかりとやってしまえば、あとはテキストエディタで編集するWordPressのstyle.cssやstyel.cssを格納してるテーマフォルダをFTPソフトでローカルに転送することで編集が可能になります。
- style.cssをテキストエディタで開いて編集
- テーマフォルダごと転送してCSSをテキストエディタで編集
上記2つのCSSを編集する2パターンで、WordPressのCSSをテキストエディタで編集できるように説明します。
style.cssをテキストエディタで開いて編集
WordPressのCSSをテキストエディタで編集するパターン1は「style.cssをテキストエディタで開いて編集」です。
まずFTPソフトでCSSを編集したいWordPressサイトのサーバーに接続します。FTPソフトはFileZillaを使用してます。
サーバーと接続できるとFileZillaの画面で右パネルのサーバー側にWordPressサイトのフォルダが表示されます。リモートサイト側がサーバーのフォルダです。
フォルダの階層を下げてwp-contentフォルダからthemesフォルダに、そしてthemesフォルダの中のCSSの編集をしたいWordPressテーマのstyle.cssの上でマウスを右クリックします。
右クリックでコンテキストメニューが表示します。表示したメニューの「表示/編集」をクリックするとstyle.cssがテキストエディタで開きます。
あとはテキストエディタ上に開かれたWordPressのstyle.cssにCSSを記述して編集します。
テキストエディタでCSSの編集が終わったら、最後にテキストエディタ上でファイル保存します。
- Macの場合はcommand+Sでファイル保存
- Windowsの場合はcontrol+Sでファイル保存
これでWordPressのCSS編集をテキストエディタでできるようにすることができます。
テーマフォルダごと転送してCSSを編集
WordPressのCSSをテキストエディタで編集するパターン2は、WordPressのテーマフォルダごとFileZillaでPCのローカルフォルダに転送してからテキストエディタでCSSを編集です。
例えば、WordPressテーマ「twentytwenty」のテーマフォルダをPCのフォルダに転送してCSSを編集する場合を例にして説明します。
まずはFTPの右パネルのサーバー側の操作ですが、WordPressフォルダ内のthemesフォルダからCSSを編集するWordPressテーマのフォルダまでフォルダ階層を下げておきます。
次にFileZillaの左パネルのローカル側のフォルダに、CSSを編集するWordPressのテーマフォルダをサーバー側から移動させます。ローカルサイトがPCのフォルダです。
例えばPCのデスクトップにテーマフォルダを転送するなら、FTPのサーバー側で階層を下げて表示しておいたテーマフォルダをローカル側で選んだ「Desktop」フォルダにドラッグ&ドロップします。
そうするとサーバー側のWordPressテーマのフォルダがデスクトップに移動できているので、テキストエディタを開いてテーマフォルダごとテキストエディタにドラッグ&ドロップします。
このようにWordPressのCSSを編集したいテーマフォルダをまるごとテキストエディタで扱えるようにしておくと、編集したいCSSを指定するHTMLやPHPの構造をテキストエディタだけで確認しながら編集作業ができるのでスムーズです。
まとめ
私自身もWordPressのCSSを編集する必要があるときには、必ずテキストエディタを使用してサイトのデザインやレイアウトを編集しています。
WordPressのテーマエディターや追加CSSでCSSを編集すると、コードがハイライトされないので、編集するCSSのセレクタやプロパティ、値などが確認しずらいのですね。
一方でテキストエディタはコードのハイライトはできるし、自分にあった拡張機能で効率よく作業できるので、やはりコード編集するにはテキストエディタが理想的と思えます。
