SiteOrigin CSSの使い方

2018年8月31日



WordPress用のヴィジュアルCSSエディアの全投稿は、/tag/WP-Visual-CSSを参照して欲しい

YellowPencil Visual CSS Style Editor の使い方で説明したYellowPencilと同じくSiteOrigin CSSもビジュアルにCSSを編集できるwordpress用プラグインである。

しかし、一部機能が有料のYellowPencilと異なり、SiteOrigin CSSはすべて無料である。もちろん、印象としてはYellowPencilの方が使いやすいことはたしかだが、しかし、SiteOriginの方は、具体的にどのようなCSSが作成されるのかまですぐに見ることができるのは強みだと思う。

インストール

インストールは単純にプラグインの追加で「SiteOrigin CSS」を検索してインストールすればよい。何も問題は無いと思う。

どのテーマに対応するのか?どのようなファイルが作成されるのか?害は無いのか?

YellowPencilと同じく、使用前に最も気になるところはこれなのだが、YellowPencilと同じく。全く問題無いと思われる。

  • どんなテーマにも対応しているとうたっている。
  • CSSを編集した場合、テーマを構成するファイルに書き込むのではなく、独自のファイルに書き込んでいる。
  • このプラグインを停止すると、プラグイン上で設定したCSSは無効になり、すべてが元に戻る。

という安心な仕様になっている。もちろん、生成されるCSSが表示されるため、有用なCSSのみを取り出し、テーマファイルの方に転記し、このプラグインは停止してしまうといった使い方も考えられる。この点では、YellowPencilより優れているかもしれない。

なお、作成されるCSSファイルとしてはwp-content/uploads/so-cssというフォルダが作成され、その中に書き込みがされる。

使い方

プラグインをインストールし有効化したら、外観>Custom CSSを選択する。

こんな画面になるので、目のアイコンをクリック。

トップページが表示される。この状態でトップページについて編集する。

しかし、個別の投稿ページを見ながら編集したいかもしれない。この場合には、面倒だが、URLを手で変更しなければいけない。

編集を確定させるには、左側のチェックマークをクリックする。すると、生成されたCSSが表示される。

ここで「Save CSS」をクリックすると、このCSSがセーブされることになる。

ここではLuxeritasというテーマを使っているのだが、その名前のついたCSSファイルとなる。

再度だが、気に入らなければプラグインを無効にしてしまえば良い。面倒なことは何も無いので試してみる価値はあるだろう。

しかし。。。。

適切なCSSを作成してくれない

先の例を見ればわかるのだが、サイトタイトルの文字色を変えたにも関わらず、

span {
  color: #ebcdcd;
}

などというCSSが作成されてしまっている。これでは、サイトタイトルだけではなく、ほぼあらゆる箇所の文字色がこうなってしまう。

これを避けるにはやはりある程度CSSの知識のあることが前提になるだろう。