プレビュー表示しながらCSSのカスタマイズができるプラグイン「Advanced CSS Editor」

WordPressでCSSのカスタマイズをしてデザイン変更する際、キャッシュなどの関係で思ったように適用されないということありませんか？

また、変更する度にサイトを表示して確認の繰り返しが面倒ということありませんか？

「Advanced CSS Editor」はプレビュー表示しながらCSSの追加（上書き）変更ができる便利なプラグインです。CSS編集初心者の方でも直感的にカスタマイズできるので戸惑うことが少なくなります。

【Advanced CSS Editor】プラグインの基本的な機能・できること

1. プレビューを見ながらCSSの編集ができる
2. デバイスの種類ごとに異なるCSSを適用できる（テーマによっては動作しません）

本記事を参考にWordPressサイトへプラグインの導入を検討される方へ

WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。

さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。

そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。

本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。

• テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
  ※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
  ※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。
• プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
• このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
• プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）

【Advanced CSS Editor】プラグインの設定画面や表示の日本語化と翻訳

【Advanced CSS Editor】プラグインは設定項目がないので特に必要ないと思います

【Advanced CSS Editor】プラグインのインストールと設定

インストール方法

インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。

WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。

【Advanced CSS Editor】プラグインの基本的な使い方

CSSの変更は「外観」→「テーマ編集」から行います。通常のテーマカスタマイザーに「Advanced CSS Editor」という項目が追加されますのでそこをクリックして編集します。

通常のテーマカスタマイザーで設定変更するときと同様に画面右側にプレビューが表示されます。CSSを編集すると即時に反映されます。

どのCSSが適用されているか（どのセレクタに対して編集するか）はテーマごと、シーンごとに違いますから、検証画面を追加表示して作業するといいと思います。

検証画面はプレビュー表示されている画面の上で右クリックし、「検証」をクリックすると画面が出てきます。変更したい部分で同じ操作をすることで、セレクタと適用されているCSSが表示されるので、そのままコピペして編集すると簡単にデザイン変更ができます。