カスタムCSS編集機能

カスタムCSS編集機能

サイトに適用するCSSを管理画面から追加・編集出来る機能です。

サイト表示と編集画面の両方に反映するCSS、サイト表示のみ、編集画面のみの3種類のCSSを設定できます。

  • このページで紹介している機能では有料プラグイン「yStandard Toolbox」を使用しています。
    プラグインの詳細は yStandard Toolbox ページをご覧ください。

フロント・エディターのCSSをそれぞれ登録できるCSSカスタマイズ機能

フロント(サイト表示)のみに反映するCSSとブロックエディターのみに反映するCSS、そして、それぞれ共通で反映するCSSを登録できる機能です。

「追加CSS」では、ブロックエディターに反映されず、ブロックの見た目をカスタマイズしても、編集画面では確認できませんでしたが、この機能ではブロックエディターにも反映できます。

また、フロントでは問題ないけど、エディター上では追加で調整が必要になる場合もあり、そういった調整用にエディターのみに反映するCSSも登録ができます。

カスタムCSSの設定方法

設定画面の場所

カスタムCSSの設定画面は「[ys] Toolbox」→「カスタムCSS」にあります。

フロント・エディター共通CSS

「共通」タブから設定できます

フロント用CSS

「フロント」タブから設定できます

エディター用CSS

「ブロックエディター」タブから設定できます