[WordPress] 出先からでもサクッとCSSを変更出来るJetpackの「CSS編集」が便利

たまに自宅とは違う環境で自分のブログやサイトを見て、意図とは違う見た目に愕然とすることがあります。

大抵はOSやブラウザのCSSの解釈のズレなんですけどね。

自分の環境だと発生しない問題に気がつけてラッキーなのですが、さて、自宅に戻るまで問題のある見た目のままというのは、落ち着かないもの。ですよね？ですよね？

そこで、出先でもサクッとCSSを編集しちゃう便利な方法をおしらせ。

テーマのCSSは家に帰ってから書き換え

当然WordPressなので、ブラウザからテーマのCSSを書き換えることも出来るんですが、この辺は自宅のローカルにあるCSSで作業したいので、今回は書き換えません。

かわりに便利プラグインJetpackの「CSS編集」機能を使います。

Custom CSS — Jetpack for WordPress

Sassも使える気の利いた機能

さて、やり方です。Jetpackをインストールしていればデフォルトで使える状態だと思いますが、念のため。

ダッシュボードのJetpackの設定の中の

この部分でオンオフ切り替えられます。

「CSS編集」を実行するのは「外観 ＞　CSS編集」から。

この部分にCSSを書いて保存すれば、とりあえず修正作業は終わりです。

とにかく便利すぎる「CSS編集」機能

あまり使うことのなかったJetpackのこの機能ですが、ちょっと高性能すぎて笑ってしまいました。

1. Sassが使える
2. バージョン管理できる

Sassが使える。もちろんLESSも。

バージョン管理できる

右側の設定部分の下、見慣れたタイムスタンプですね。

ここから元に戻すこともできます。

ミスった！と思っても、一瞬で元通り。賢い奴ですね。まったく。

テーマのCSSをカスタムする勉強に最適！

使わないのがもったいなくなるほどの高機能。これは凄いですね。

テーマのCSSを弄ってカスタマイズしてみたい初心者の方は、この機能を使って練習してみるのがいいかもしれません。元のテーマのCSSは変更されませんので、間違えた！と思っても、消せば元通りです。

LESSやSassの勉強にもいいかもしれませんね。

とはいえ、変更は本番のWordPressに反映されてしまいますので慎重にどうぞ。

サクッとやれるから嬉しい

いかがでしたでしょうか？

いままであまり使うことのなかった機能ですが、いざ使ってみたら便利すぎました。

同様に出先からサクッと作業したい方には、おすすめですよ。

それでは。

参考：WordPress › Jetpack by WordPress.com « WordPress Plugins

おまけ。

アイキャッチ用にjetpackの人描いたのでおすそわけ。

文：シンタロヲフレッシュ

はてブ

pocket

twitter