koblog

高校生のWEBデザインブログ

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

サムネイル

先日から表示速度改善のため、このブログでもCSSの軽量化を試しています。

使ったのはMinifierですが、はじめは軽量化したCSSの読み込み方法が分かりませんでした。そこで今回はMinify化(軽量化)したCSSはてなブログで読み込む方法をまとめておきたいと思います。

 

軽量化することで、表示速度だけでなくSEO的にも有利になるので試してみてください。

 

 

Minifyについて

今回は説明を省きます。詳しい説明は公式サイトをどうぞ。

簡単に説明するとCSSを軽量化することです。Minifierを使うのでMinify化といいます。

 

MInify化したCSSの読み込み

はてなブログの場合、CSSを記述する場所(デザインCSS)にMinify化したCSSを書いてもきちんと反映されません。具体的には、レスポンシブが効かなくなります。(レスポンシブ対応テーマ・CSSのみ)

 

ということで対策法を紹介します。

まず下のリンクを開いてコードをMInify化します。使い方はコードを入力して「Minify」をクリック、軽量化されたコードをコピーするだけです。

https://cssminifier.com/

 

次に、はてなブログのデザインCSSに書いているコードを全て消します。念の為バックアップをとっておいてください。デザインCSSのコードを消したら下のコードを追加してます。

/* Responsive:yes */

 

最後に設定から詳細設定→「headに要素を追加」を開きます。

そこで下の画像のように軽量化したコードを<style>~~~</style>で囲んで書きます。これで反映されます。 

キャプチャー1

キャプチャー2

サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる