SiteOriginCSSはWordpressにコーディング不要なCSSスタイルパネルを追加してくれる無料プラグインです。前回までで基本的な使い方を紹介しましたが、このプラグインにはまだまだ隠された機能が存在するのです！
詳細は以下から。
Visualeditorモードの活用
ページの移動方法
VisualEditorではインスペクターがデフォルトで起動しているため、ページリンクをクリックしても移動することができません。他のページに移動したい時は虫眼鏡アイコンをクリックしてインスペクターモードを終了する必要があります。
インスペークターモードを終了した状態でリンクをクリックすると他のページもスタイルを変更可能です。
Visual Code Editorモードの活用
SiteOrigin CSSの使い方の記事ではVisualEditorの使い方のみを紹介しましたが、もう一つのスタイル編集方法があります。
目玉アイコンの横にある矢印アイコンをクリックすることで使用できる「Visual Code Editor」です。
起動すると左側にはスタイルパネルではなく、コードパネルが表示されます。普通のエディターとして使用することもできますが、インスペクターで要素を選択することで、自動的にセレクタが追加されるためコードエディターよりも楽にセレクタの選択が可能です。
また、セレクタを選択した状態で、右側下部にあるそのセレクタに適用されているスタイルをクリックすることで、コードエディター上にスタイルをコピーすることができます。
コピーしたコードはエディター上で編集できるため、テーマで使用されているCSSを楽に上書き可能というわけです。
デザイナーさんでもCSSスタイルのコーディングを普通にやられている方はこちらの方がやりやすいかもしれませんね。VisualEditorとCodeEditorを上手に使い分けながらサクッとスタイル修正することができます。
