SiteOrigin CSSをもっと便利い使いたおす方法まとめ

Pocket

SiteOriginCSSはWordpressにコーディング不要なCSSスタイルパネルを追加してくれる無料プラグインです。前回までで基本的な使い方を紹介しましたが、このプラグインにはまだまだ隠された機能が存在するのです!

詳細は以下から。

Visualeditorモードの活用

ページの移動方法

VisualEditorではインスペクターがデフォルトで起動しているため、ページリンクをクリックしても移動することができません。他のページに移動したい時は虫眼鏡アイコンをクリックしてインスペクターモードを終了する必要があります。
SiteOrigin CSS ページの移動方法-01

インスペークターモードを終了した状態でリンクをクリックすると他のページもスタイルを変更可能です。
SiteOrigin CSS ページの移動方法-02

Visual Code Editorモードの活用

SiteOrigin CSSの使い方の記事ではVisualEditorの使い方のみを紹介しましたが、もう一つのスタイル編集方法があります。

目玉アイコンの横にある矢印アイコンをクリックすることで使用できる「Visual Code Editor」です。
SiteOrigin CSS Code Editorモードの活用-03

起動すると左側にはスタイルパネルではなく、コードパネルが表示されます。普通のエディターとして使用することもできますが、インスペクターで要素を選択することで、自動的にセレクタが追加されるためコードエディターよりも楽にセレクタの選択が可能です。
SiteOrigin CSS Code Editorモードの活用-04

また、セレクタを選択した状態で、右側下部にあるそのセレクタに適用されているスタイルをクリックすることで、コードエディター上にスタイルをコピーすることができます。
SiteOrigin CSS Code Editorモードの活用-05

コピーしたコードはエディター上で編集できるため、テーマで使用されているCSSを楽に上書き可能というわけです。
SiteOrigin CSS Code Editorモードの活用-06

デザイナーさんでもCSSスタイルのコーディングを普通にやられている方はこちらの方がやりやすいかもしれませんね。VisualEditorとCodeEditorを上手に使い分けながらサクッとスタイル修正することができます。