SiteOrigin CSS WordPressにCSSエディターを追加できる無料プラグイン

Pocket

siteorigin-css-530-06

WordPressにDreamWeaverのようなCSSエディターを追加できる無料プラグイン、「SiteOrigin CSS」を紹介します。

前回紹介したページビルダープラグインと同じ開発元が作っているのがこのSiteOriginCSS。こちらも無料でインストールできるプラグインで、Wordpressに高品質なCSSエディターを追加してくれます。

このエディターパネルはUIもすっきりしていて非常に使いやすく、オートコンプリート機能付きのコードエディターまで付いてくるというとんでもないプラグインになってます。

詳細は以下から。

SiteOrigin CSSって何?

SiteOrigin CSSはWordpressの管理画面にDreamweaverのようなUIの高品質なCSSエディターを追加できる無料プラグインです。
SiteOrigin CSSって何-01

実際に画面を見ながら編集したい場所をクリックし、CSSスタイルをコードを書くことなく簡単に変更することができます。CSSで設定できることはほぼ網羅されており、値の変更はフォーム内に数値を入れたり、選択肢の中から選ぶだけ。
SiteOrigin CSSって何-02

まるでAdobeの某ツールを使っているような感じで簡単にスタイルの編集が可能です。

SiteOrigin CSSの特徴

シンプルで使いやすいエディターパネル

Adobeのツールと言えば機能が豊富にある分、できることが多すぎて画面を見ても何をしていいか戸惑うこともあります。SiteOrigin CSSのエディターパネルはCSSスタイルの編集に特化しているため、非常にシンプルなUIになってます。
SiteOrigin CSS シンプルで使いやすいエディターパネル-03

また、パネルで編集した内容は右側のブラウザー上にすぐに反映されるため、スタイルの変化を確認しながら操作を行うことができます。

エディターはフォームに値を入力したり、選択肢の中から選ぶだけなのでコーディングは不要。コードを書くのが苦手な方でも安心して使用することができます。

パワフルなコードエディター機能

スタイル自体はエディターパネルで行うことができますが、SiteOrigin CSSでは高品質なコードエディター機能も実装されています。
SiteOrigin CSS パワフルなコードエディター機能-04

コードエディターはテーマで使用されているスタイルシートを分析し、編集画面でセレクターを自動的に表示してくれるオートコンプリート機能付き。セレクターを途中まで入力すると自動的に候補が表示される親切設計になってます。
SiteOrigin CSS パワフルなコードエディター機能-05

この機能のおかげで、わざわざChromeのDevToolsを開いたり、テーマのスタイルシートを検索して、どんなセレクタで指定されているかを調べなくてOK。この機能、地味だけど超便利です。

どんなテーマでも使用可能!

前回紹介したPageBuilderもそうですが、実装するには高額な月額プランに入る必要があったり、テンプレートに難しいコードを埋め込む必要があったり・・・ということは一切ありません。

どんなテーマでも(もちろん無料テーマでも)使用することができるため、今すぐ高機能なCSSエディターを使うことができます。先ほどのオートコンプリート機能のおかげで、初めて使うテーマでもあっという間にスタイルの修正ができるため、作業効率もかなり上がります。

では、実際にSiteOrigin CSSをインストールしてさっそく使ってみましょう!

SiteOrigin CSSのインストール方法

インストールは他のプラグインと同じです。まずは、プラグイン > 新規追加でプラグインインストール画面を開き、「SiteOrigin CSS」で検索します。
SiteOrigin CSSのインストール-07

画像のようなアイコンのプラグインをインストールして、有効化してください。

これで準備完了。具体的な使い方については次回以降に詳しく解説していきます。

この後は?

すぐにでもCSSエディターを使ってみたいところですが、まずはPageBuilderを使って簡単なページレイアウトを作成し、作成したページに対してCSSエディターでスタイルを編集してみたいと思います。