スタイルシートのカスタマイズにはあのブラウザを使うと便利

今回はちょっとマニアックなテクニックについての話です。

クローバ PAGEでスタイルシートのカスタマイズをするとき、作ったCSSがどのように反映されているかみなさんはどうやって確認していますか？　スタイルシートを書いていちいちクローバ PAGEの設定画面からアップロードして確認するのはなかなか大変です。そこで今回はスタイルシートのカスタマイズを効率的に行う方法について紹介します。

スタイルシートのカスタマイズって何？っていう方はこちらを先にご覧ください。

どうせChromeのデベロッパーツールを使うんでしょ？

タイトルを見てそう思われた方いると思います。はい残念でした。確かにChromeのデベロッパーツールはめちゃめちゃ便利ですよね。私も普段サイトの見た目をちょっと調整するようなときは、Chromeを使います。例えばこのユーザーグループのサイトのCSSをカスタマイズしたいとしますよね。で、デベロッパーツールでボタンの色を赤から紫に変えてみました。

他にもいろいろ調整してみたとします。ひととおり納得いくカスタマイズができたころには、どこを直したのかすっかり忘れてしまっています。デベロッパーツールを使い慣れた方なら、そこでおもむろに、「Changes」と書かれたタブを開くことでしょう。そうするとなんと、どの要素をスタイルを変更したのか、変更箇所だけが表示されています。なんとなく、これをファイルに保存してアップロードすればよさそうです。がしかしですね、この機能って修正したスタイルが定義されているCSSファイルが複数にまたがっていたら、いちいち左側のタブで切り替えて差分を確認しないといけないんです。さらに不便な点があって、新しく追加したスタイルはどこにも表示してくれないんですね。

Firefoxなら差分がまとめて見られる

Firefoxってご存知ですか？　今となってはああそんなブラウザもあったねとか言われる存在になってしまいましたが、れっきとした現役バリバリのモダンブラウザです。クローバ PAGEももちろんFirefoxに対応しています。

Fixfoxでさきほどと同じようにこのサイトを開いて、ウェブ開発ツールでスタイルを調整してみます。「変更点」というタブを開くと、追加したスタイルを含めてすべての変更点が表示されているではありませんか！

「すべての変更点をコピー」というボタンを押せば、変更点がまとめてコピーされ、あとはテキストファイルに保存してクローバ PAGEにアップロードすればカスタマイズの完了です。

こんなカスタマイズがしたいんだけどというご要望があれば、ぜひコミュニティに投稿をお願いします！

ではまた。