WordPressをDreamweaver化!?できるプラグインがやばい

Pocket

WordPressの管理画面をDreamweaverのようなエディター化できる「SiteOriginCSS」がすごいので使ってみました。

WordpressでブログやWeb制作をしていますが、ゼロから作るにしても、既存のテンプレートを使うにしても、スタイルの変更はコードエディターで行うことになります。

SiteOriginCSSを使うと管理画面でスタイルの変更が可能になるので、テンプレートでサイトを構築した後はコードエディター開かずに管理画面上でWeb制作が完結してしまいます。

ということで早速使ってみました。

WordPressをエディター化できる SiteOrigin CSS

SiteOriginCSSは無料でダウンロードできるという太っ腹ツール。

このプラグインがすごいのはテンプレート側で特にコードの追加や設定などしなくても簡単に使えるという点です。普通にプラグインとしてインストールするだけで、どんなテンプレートでも使えるってことですね。

スタイルの編集も後述するようにプレビュー画面を見ながらリアルタイムで変更を確認できるため、保存してリロードしてといった作業は不要です。

SiteOriginCSSの使い方

SiteOrigin CSSはWordpressプラグインとして提供されているため、管理画面からインストールできます。
SiteOriginCSSのインストール

インストールして有効化すると管理画面メニューに「Custom CSS」というメニューが追加されます。
SiteOriginCSSのメニュー画面

開くと編集ページが表示されるので、目のアイコンを押してプレビュー画面へ移動。プレビュー画面の左側はCSSで設定できる項目一覧、画面下部には選択中の要素のclassとCSSスタイルが表示されています。
SiteOriginCSSのプレビュー画面

CSSスタイルの編集は左側にあるCSSパネルで行います。選択中の要素に対してスタイルを変更でき、変更はリアルタイムでアップデートされるのでリロード待ちなんかもありません。
SiteOriginCSSでスタイルをカスタマイズ

重いエディターを使っていると反応が遅くでイライラさせられますが、SiteOriginCSSは非常にスムーズ。画面を見ながら細かく設定できるので軽量エディターで編集しているような感覚です。

CSSの編集が終わったら、CSSパネルの右上にあるチェックマークのボタンを押します。するとCSSページへ戻り、プレビューで編集したものがCSSコードとして出力されます。
SiteOriginCSSのCSS出力

CSSページの左下の「Save CSS」ボタンを押すと出力したCSSが保存され、実際の画面にも反映されるようになります。

SiteOrigin CSSを使った感想

プレビューを見ながら、要素を選んで直接スタイルを修正していけるのはすごく楽。テンプレートベースのWeb制作だと、class名やid名を検索したり、どこに書かれているのかファイルを探したりしてましたが、そのような作業なしで簡単にスタイルを修正できました。

何よりWordpress上で画面を見ながらCSSを書けるのがいいですね。もっと使いやすいエディターを探していたり、もっと楽してCSSコーディングしたいという方にはオススメです!