不要なCSSの削除の仕方【割り出しツールも紹介】

こんなお悩みにお答えします。

この記事でわかること

こんにちわ、Jouji(@jouji0720)です。

ブログのCSSで不要なものを削除の仕方で悩んでいたりしませんか？

初心者の時って怖くて手が出せなかったりしますよね。

そんなあなたに今回は、不要なCSSの削除の仕方をご紹介しちゃいます。

今回の記事を読めば、不要なCSSの削除の仕方から必要なツールまでをまるっとバッチリ解説していきます。

変になったらどうしようなんて恐怖とはおさらばできますね。

この記事を書く僕は、ブログ歴は3年目。

今ではアフィリエイトから入ってくる収益も月に3,000円ほどになりました。

そんな僕も、CSSの削除には非常に悩まされました。

悩んだ末に知った削除の方法をすべてお話していきます。

※もしそれ以外のサイトの表示速度を上げる方法を知りたい場合には、サイトの表示速度を爆速化する方法【はてなブログもOK】にて詳しく解説しているので是非どうぞ。

ってことでさっそく行ってみましょう。

Here We Go!!

不要なCSSの削除の仕方

ではさっそく不要なCSSの削除方法をお話していきましょう。

削除の方法は、以下の2ステップです。

では詳しく見ていきましょう。

手順①不要なCSSを割り出す

まず不要なCSSの削除の手順の1つ目は、不要なCSSを割り出すことですね。というのも不要なCSSがどれかわからないと削除ができないからです。

不要だと思うCSSコードを割り出しましょう。

割り出し方は主に2つ

割り出し方は主に2つあり、以下の通り

では、ひとつづつ見ていきましょう。

方法①手動で探して割り出す

方法の1つ目は、手動で探して割り出していく方法ですね。

CSSコードの群から、自分で書いているCSSコードをいるものといらないものを仕分けて、使っているコードだけを残す方法ですね。

メリットは不要なCSSを見つけたら、その場で削除できることですね。

手動でやる場合って不要なCSSを見つけたら、その場で削除ができるんですよね。結果CSSが少ない場合には、手動のほうが時間かからない場合もあるんです。。

デメリットは知識がいることですね。

自分でやるにはCSSコードがいったい何をするものでどんな働きをしてもらえるのかというのを知っておかなくてはなりません。そのために知識が必要になります。

やっているうちに知識ってついていくので、問題はないですが…。

「CSSをちょっとでも学びたい」、「後々ウェブデザインも視野に入れて勉強したい」というあなたには、おすすめの方法ですね。

方法②ツールを使って割り出す

方法の2つ目は、ツールを使って割り出す方法ですね。

CSSを割り出してくれるツールを使うことで割り出していく方法です。

メリットは時間を有効に使えることです。ツールを使えば手動で1時間かかっていたものが、2、3分で済みます。

浮いた時間で、別記事の構成に充てたりすることができるので有効ですよね。

デメリットは、削除できないものもあったりすることですね。

これはブログサービスを使っている場合には多いのですが、本来自分では何ともできないところを検出してしまうことがあるんです

その結果できないことに対して、もやもやすることがありますね。

「時間を無駄にしたくない」、「デザインより記事を書きたい」というあなたには、おすすめの方法です。

手順②手動で不要なCSSを削除する

不要なCSSの削除の手順の手順の2つ目は、手動で不要なCSSを削除することですね。

割り出したCSSをもとに不要なCSSを削除しましょう。

不要なCSSを割り出すツールと使い方の紹介

ここでは不要なCSSを割り出すツールと、使い方について紹介していきましょう。

割り出しツールは、以下の通り。

では詳しく見ていきましょう。

ツール①chromeの開発者ツールのCoverage機能

不要なCSSを割り出すツールの1つ目は、chromeの「Coverage」機能ですね。

coverage機能は、ページの中で使用されていないCSSやJavascriptを見つけてくれるツールですね。

chromeの「coverage」機能の使い方

使い方の手順は以下の通り。

では詳しく見ていくことにしましょう。

手順①自身のブログやサイトのトップページにアクセス

まずは自身のブログやサイトのトップページにアクセスしましょう。

当ブログの場合には、Joujilog.comにアクセスですね。

手順②アクセス後に余白で右クリックをして、検証をクリック

次に、トップページの余白のところで右クリックをします。すると、一番下に検証というところがありますね。

そこをクリックしましょう。

手順③右上の…マークをクリック

次に右上に、…のマークがあるはずです。

そこをクリックしましょう。

手順④出てきたメニューから「more tools」をクリック

すると、ドロップダウンでメニューが出てくるはず。

その中から、「more tools」をクリックしましょう。

手順⑤出てきたメニューから「Coverage」をクリックする

すると横にもう一つドロップダウンでメニューが出てきます。

その中から「Coverage」をクリックしましょう。

手順⑥上部の「Source」をクリック

すると、上記のような画面になります。

一番上のところに「Source」というタブがあるはずです。

そこをクリックしましょう。

手順⑦Consoleと書かれたタブの横にCoverageタブがあるのでクリック

すると、上記のような画面になりますよね。

下に進んでいくと、「Console」と「Coverage」というタブがあるはずです。

その中から、「Coverage」をクリックしましょう。

手順⑧●をクリック

すると上記のような画面になっているはずです。

●が書いてあるほうをクリックして、「Coverage」機能を動作させましょう。

手順⑨Typeの中からCSSと書かれているものをクリックする

すると、上記の画像のような画面になります。

下の表の中から「Type」を見て、その中からCSSと表記されている部分をクリックしましょう。

手順⑩左の赤くなっている部分をクリックして、書いている部分を割り出す

次に上記のような画面になるので、左が赤くなっているものを見ていきましょう。

ものによっては、削除ができないものもあるのでできるものだけを見つけていくようにしましょう。

ツール②unused CSS

不要なCSSを割り出すツールの2つ目は、Unused CSSですね。

Unused CSSはリンクを入れるだけで、今現在サイト内で使われているCSSのセレクターを確認して、教えてくれる超優秀なツールですね。

Unused CSSの使い方

Unused CSSの使い方は、以下の通り。

では詳しく見ていきましょう。

手順①Unused CSSにアクセスする

まず、Unused CSSにアクセスしましょう。

⇒Unused CSS へのアクセスはこちら

手順②自分のサイトのURLを入力し、「CRAWL FOR UNUSED CSS」をクリック

次に「enter the rood URL…」と書かれた場所に、サイトのURLを入力します。

入力し終わったら、「CRAWL FOR UNUSED CSS」と書かれたボタンをクリックしましょう。

するとサイトの中をチェックが始まります。

手順③セレクターが出てくるので、そのセレクターをもとにいらないCSSを削除していく

次に使っていないCSSが出てくるのでそのセレクターを参考にいらないCSSを削除していきます。

まとめ｜不要なCSSを残しておくのはブログのデータの無駄遣い

お疲れさまでした。

ここまで、不要なCSSの削除の仕方をお話してきました。

まとめると、以下のようになります。

まとめ

という感じです。

ブログの中に必要のないCSSがあると、表示速度が遅くなったり、必要のないデータ量となり大変無駄です。

ぜひこの記事を見ながら、必要のないCSSを削除していきましょう。

ってことで今回はこの辺で。

また次回に。