totochn’s diary

ひとり旅のこと レザークラフトのこと・・・

はてなブログのCSSをMinifierを使って軽量化

当ブログではアフィリエイト広告を利用しています

こんにちは!totoです。

最近ブログが重いのが悩みの種です。

そこで、今回改善策の1つとしてCSSをMinify化(軽量化)しました。

f:id:totochn:20210311234556j:plain:h250

Minify化とは

Minify化(ミニファイ)とは、JavaScriptCSSのコード内の不要な改行やインデント(空白)を削除して、動作はそのままの状態で、圧縮・軽量化することをいいます。

Minifierという圧縮ツールを使います。

はてなブログなどのサービスを利用している場合、サーバやサイトの管理者ははてなブログになるため、出来ることは限られます。

今回軽量化するのは自分で設置したコードです。

それでも、多少なりとも表示速度の改善ができ、SEO的にも有利になるのでやっておいて損はないです。

Minify化手順

Minifierで圧縮

まずは自分のサイトの管理画面→デザイン→カスタマイズ→デザインCSSのコードを全てコピー。

コピーしたコードは後々カスタマイズを増やすなどして編集する時に必要になるのでメモ帳などに保管しておいて下さい。

下記サイトにアクセス。

https://cssminifier.com/

下記画像の左側「入力CSS」欄にコピーしたコードを貼りつけ。

ミニフィフィをクリック。

f:id:totochn:20210311193210p:plain:w300:h200

数秒で右側「縮小出力」に軽量化されたコードが表示。

クリップボードにコピーをクリック。

まずは、メモ帳などに貼り付け。

はてなブログに取り込み

それでは、はてなブログに取り込みます。

まずはデザインCSS内のコードを全て消します。

変更を保存をクリック。この瞬間が一番緊張します。

クリックしたとたんブロブのデザインが崩れますが、大丈夫!

以下の作業で戻ります。

/* Responsive:yes */

上記コードをデザインCSSに貼り付け。

最後に管理画面→設定→詳細設定→「headに要素を追加」に

軽量化したコードをスタイルタグで囲みます。

<style>ここに圧縮したコードを貼り付け</style>

これで反映されます。

こちらのブログを参考にさせて頂きました。 ありがとうございます。

【保存版】Minify化したCSSをはてなブログで読み込む方法 - koblog

Minify化まとめ

<p>
  1. デザインCSSのコードをMinifierを使って圧縮

  2. デザインCSSを削除し、/ Responsive:yes /を貼る

  3. 圧縮したコードをスタイルコードで囲んで

    「headに要素を追加」に貼り付け

Minifier使用前
軽量化前

軽量化前のメニューバーの赤線は以前に編集で付けたらものです。

Minifier使用後
軽量化後

おわりに

今回はMinifierを使ってCSSをMinify化(軽量化)する手順でした。

toto

toto

軽量化は思ってた以上に簡単にできるよ!

最初は不安なので、テストブログで試しました。

問題なく反映されたので、迷うことなく本番で実行しました。

囲み枠も吹き出しも圧縮前後変わりなく反映されています。

短時間でできるので、ブログが重いと気になってる方、試してみて下さい。

まだまだ課題はありますが、今回は対策のひとつ、CSSの軽量化でした。

では。

PVアクセスランキング にほんブログ村