こんにちは！totoです。
最近ブログが重いのが悩みの種です。
そこで、今回改善策の１つとしてCSSをMinify化（軽量化）しました。
Minify化とは
Minify化（ミニファイ）とは、JavaScriptやCSSのコード内の不要な改行やインデント（空白）を削除して、動作はそのままの状態で、圧縮・軽量化することをいいます。
Minifierという圧縮ツールを使います。
はてなブログなどのサービスを利用している場合、サーバやサイトの管理者ははてなブログになるため、出来ることは限られます。
今回軽量化するのは自分で設置したコードです。
それでも、多少なりとも表示速度の改善ができ、SEO的にも有利になるのでやっておいて損はないです。
Minify化手順
Minifierで圧縮
まずは自分のサイトの管理画面→デザイン→カスタマイズ→デザインCSSのコードを全てコピー。
コピーしたコードは後々カスタマイズを増やすなどして編集する時に必要になるのでメモ帳などに保管しておいて下さい。
下記サイトにアクセス。
下記画像の左側「入力CSS」欄にコピーしたコードを貼りつけ。
ミニフィフィをクリック。
数秒で右側「縮小出力」に軽量化されたコードが表示。
クリップボードにコピーをクリック。
まずは、メモ帳などに貼り付け。
はてなブログに取り込み
それでは、はてなブログに取り込みます。
まずはデザインCSS内のコードを全て消します。
変更を保存をクリック。この瞬間が一番緊張します。
クリックしたとたんブロブのデザインが崩れますが、大丈夫！
以下の作業で戻ります。
/* Responsive:yes */
上記コードをデザインCSSに貼り付け。
最後に管理画面→設定→詳細設定→「headに要素を追加」に
軽量化したコードをスタイルタグで囲みます。
<style>ここに圧縮したコードを貼り付け</style>
これで反映されます。
こちらのブログを参考にさせて頂きました。 ありがとうございます。
【保存版】Minify化したCSSをはてなブログで読み込む方法 - koblog
Minify化まとめ
<p>
軽量化前のメニューバーの赤線は以前に編集で付けたらものです。
おわりに
今回はMinifierを使ってCSSをMinify化（軽量化）する手順でした。
最初は不安なので、テストブログで試しました。
問題なく反映されたので、迷うことなく本番で実行しました。
囲み枠も吹き出しも圧縮前後変わりなく反映されています。
短時間でできるので、ブログが重いと気になってる方、試してみて下さい。
まだまだ課題はありますが、今回は対策のひとつ、CSSの軽量化でした。
では。
