「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の削除後に意図しないデザイン崩れが発生する可能性があるので、削除後のCSSに置き換える前に、必ず元のCSSファイルのバックアップを取っておくか、テスト用のブログを設けて、一旦試すのが良いでしょう。

検証後、問題がないことが確認出来たら、本番のCSSコードに置き換えるようにしてください。



人気のある投稿記事

「Excel」カーソルの白十字を元に戻したい

「Excel」を使ったことはあっても、他人が使ってる「Excel」って、変な設定になってることがありませんか?例えば、カーソルが白い十字のままで、通常ならばセルの右下端をドラッグすることができ、連番を振ったりできるのに、それができないこととか。