「Blogger」不要なCSS(スタイルシート)を削除したい
![]() |
「Blogger」で作成したブログのテンプレートをカスタマイズしていくうちに不要なCSSが残ったままになることもありますが、どれを削除すれば良いかわからなくなってくることはありますよね。
本来であれば、計画的に不要なCSSを削除できれば良いですが、カスタマイズしていくうちに、不要なCSSが増えていくことはあります。
例えば、コメント機能を使わない場合は、コメントに使われるCSSは不要になります。
しかし、共通で使われているCSSもある場合があり、下手に削除することもできません。
そんな時に試してみたいのが、「UnCSS Online!」です。
「UnCSS Online!」とは
ウェブサイトの不要なCSSセレクタを自動的に削除し、最適化されたCSSを生成することができるオンラインツールです。
https://uncss-online.com/
「UnCSS Online!」のウェブサイトにアクセスし、左側のテキストボックスにウェブページのHTMLコード(ソースコード)を入力し、右側のボックスに使用しているCSSコードをそれぞれ貼り付けます。
![]() |
今回、自分が試したやり方では、「Blogger」で作成したブログをブラウザで表示させ、HTMLコードを表示し、コピーしたものを左側のテキストボックスに入力しました。
右側のテキストボックスには、ブログのHTMLコード内の記述されたCSSのみをコピーして、入力しました。
左右のテキストボックスに入力が出来たら、「UNCSS MY STYLES!」ボタンをクリックします。
入力されたHTML内で実際に使用されていないCSSが自動的に削除され、不要なCSSが取り除かれたCSSコードが「UNCSS MY STYLES!」ボタンの下にあるテキストボックス内に表示されます。
サイト高速化が期待できる
不要なCSSコードを削減することで、ウェブサイトの読み込み速度の向上する可能性があります。
これは「Google PageSpeed Insights」などで提案される「使用していないCSSの削減」という改善項目に対応する解決策の一つで、可能であれば、試してみたいですよね。
利用する上で注意点すること
JavaScriptで動的に追加されるCSSなど、例えば、ユーザーのクリック操作によるものや、:hoverなどのページ読み込み時に実行されないJavaScriptによって、後から追加されるCSSは、不要と認識される場合があります。
検証後、問題がないことが確認出来たら、本番のCSSコードに置き換えるようにしてください。

