WordPressにDreamWeaverのようなCSSエディターを追加できる無料プラグイン、「SiteOrigin CSS」を紹介します。
前回紹介したページビルダープラグインと同じ開発元が作っているのがこのSiteOriginCSS。こちらも無料でインストールできるプラグインで、Wordpressに高品質なCSSエディターを追加してくれます。
このエディターパネルはUIもすっきりしていて非常に使いやすく、オートコンプリート機能付きのコードエディターまで付いてくるというとんでもないプラグインになってます。
詳細は以下から。
SiteOrigin CSSって何？
SiteOrigin CSSはWordpressの管理画面にDreamweaverのようなUIの高品質なCSSエディターを追加できる無料プラグインです。
実際に画面を見ながら編集したい場所をクリックし、CSSスタイルをコードを書くことなく簡単に変更することができます。CSSで設定できることはほぼ網羅されており、値の変更はフォーム内に数値を入れたり、選択肢の中から選ぶだけ。
まるでAdobeの某ツールを使っているような感じで簡単にスタイルの編集が可能です。
SiteOrigin CSSの特徴
シンプルで使いやすいエディターパネル
Adobeのツールと言えば機能が豊富にある分、できることが多すぎて画面を見ても何をしていいか戸惑うこともあります。SiteOrigin CSSのエディターパネルはCSSスタイルの編集に特化しているため、非常にシンプルなUIになってます。
また、パネルで編集した内容は右側のブラウザー上にすぐに反映されるため、スタイルの変化を確認しながら操作を行うことができます。
エディターはフォームに値を入力したり、選択肢の中から選ぶだけなのでコーディングは不要。コードを書くのが苦手な方でも安心して使用することができます。
パワフルなコードエディター機能
スタイル自体はエディターパネルで行うことができますが、SiteOrigin CSSでは高品質なコードエディター機能も実装されています。
コードエディターはテーマで使用されているスタイルシートを分析し、編集画面でセレクターを自動的に表示してくれるオートコンプリート機能付き。セレクターを途中まで入力すると自動的に候補が表示される親切設計になってます。
この機能のおかげで、わざわざChromeのDevToolsを開いたり、テーマのスタイルシートを検索して、どんなセレクタで指定されているかを調べなくてOK。この機能、地味だけど超便利です。
どんなテーマでも使用可能！
前回紹介したPageBuilderもそうですが、実装するには高額な月額プランに入る必要があったり、テンプレートに難しいコードを埋め込む必要があったり・・・ということは一切ありません。
どんなテーマでも（もちろん無料テーマでも）使用することができるため、今すぐ高機能なCSSエディターを使うことができます。先ほどのオートコンプリート機能のおかげで、初めて使うテーマでもあっという間にスタイルの修正ができるため、作業効率もかなり上がります。
では、実際にSiteOrigin CSSをインストールしてさっそく使ってみましょう！
SiteOrigin CSSのインストール方法
インストールは他のプラグインと同じです。まずは、プラグイン > 新規追加でプラグインインストール画面を開き、「SiteOrigin CSS」で検索します。
画像のようなアイコンのプラグインをインストールして、有効化してください。
これで準備完了。具体的な使い方については次回以降に詳しく解説していきます。
この後は？
すぐにでもCSSエディターを使ってみたいところですが、まずはPageBuilderを使って簡単なページレイアウトを作成し、作成したページに対してCSSエディターでスタイルを編集してみたいと思います。
