テーマのデザインを見ながら追加できるプラグイン「Live CSS Preview」

「Live CSS Preview」を使うと、デザインを確認しながらテーマのStyle.cssを汚すことなくCSSのコード編集をしていくことができます。

設定・使用方法

「Live CSS Preview」でプラグイン検索で表示されます。
インストールをして有効化します。

外観⇒テーマから「現在のテーマ」に下にある「カスタマイズ」をクリックします。
LiveCSSPreview3

「カスタマイズ」ページに「Live CSS」が追加され、「CSS Code」下のテキストエリアにスタイルを入力すると隣にあるプレビューに反映されて表示されます。

例として、フォントカラーをピンク、太字にして、ボーターもあるデザインになるように入力しました。
LiveCSSPreview

CSS Codeを追加した表示になります。
LiveCSSPreview1

テーマのStyle.cssを確認しましたが、そこにコードが書き込まれませんのでプラグインを停止すると、書き込んだコード以前の状態に戻ります。また有効化すると、以前書いたコードが反映されたデザインになります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です