「ブログの表示速度改善で調べていたらCSSのインライン化が出てきた。
CSSのインライン化って何？どうやればいいの？誰か教えて。」
こんなお悩みにお答えします。
この記事でわかること
- CSSのインライン化とは？
- CSSのインライン化のメリット
- CSSのインライン化の仕方
記事の信頼
こんにちわ、Jouji(@jouji0720)です。
ブログの表示速度が遅いと悩んでいませんか？表示速度が遅いと上位表示できないといわれているために、結構表示速度に関しては気になってしまいますよね。
そんなあなたに、今回ははてなブログでのCSSのインライン化のやり方をご紹介していきます。この記事を読むとCSSのインライン化とは何かから、メリット、注意点、やり方までわかります。
僕はこの方法を使って、はてなブログのサイトスピードを2割速くすることに成功しました。ぜひ最後まで読んで、一緒に手を動かしていきましょう。
CSSのインライン化とは？
CSSのインライン化とは、HTMLファイルの中にCSSコードをスタイル属性を使って設置して記事の装飾をすることです。
例えば以下のような感じです。
（html)<p class=”moji”>例えばこんな感じ</p>
（CSS）.moji｛color:#000000;｝
↓
<style>.moji{color:#000000;}</style>
<p class=”moji”>例えばこんな感じ</p>
CSSのインライン化のメリット
CSSのインライン化するメリットは、次のものがあります。
-
ページの読み込み速度が上がる
-
ページの読み込みの優先度を上げることができる
-
別記事への影響がない
それぞれ解説します。
ページの読み込み速度が上がる
CSSのインライン化するメリットの1つ目は、ページの読み込み速度が上がることです。というのも外部ファイルを読み込む必要がないからです。
通常のブログシステムは、CSSを反映するときに以下のような外部ファイルを読み込んでいます。
<link rel="stylesheet" href="style.css">
しかしCSSコードをインライン化すると、HTMLにCSSを反映させることができるために、外部に読み込みに行く手間が省けます。その結果、表示速度があげることができます。
ページの読み込みの優先度を上げることができる
CSSのインライン化するメリットの2つ目は、ページの読み込みの優先度を上げることができることです。というのもインライン化したCSSコードはどこにでも置けるからです。
通常サイトは以下の順番で、読み込まれていきます。
- ヘッダー
- ボディ
- フッター
CSSコードをインライン化してヘッダーに置くと、CSSを読み込む優先度が上げることができます。
別記事への影響がない
CSSのインライン化するメリットの3つ目は、別記事への影響がないことです。というのも、インライン化すると、該当のHTMLにしか反映されないからです。
通常のブログでは、CSSを外部ファイルとして読み込んでいます。そのためにブログ全体に反映されます。
でもCSSをインライン化すると、該当する記事ファイルにしか反映されません。そのために別の記事ファイルには、影響がないです。
CSSのインライン化の仕方
CSSのインライン化の手順に関しては、以下の通りです。
- デザインCSSに書いているコードをコピーする
- コードを圧縮する
- headに要素を追加に追加する
- レスポンシブデザイン設定のコードを入力
- 文字コードを設定する
では詳しく見ていきましょう。
CSSに書いているコードをコピーする
CSSのインライン化の手順の1つ目は、CSSコードのコピーすることです。
デザインCSSから、現在読み込んでいるCSSコードをコピーしましょう。
デザインCSSの場所
管理画面→デザイン→カスタマイズ→デザインCSSをクリックしましょう。
すると、コードが出てくるので、そちらをコピーしましょう。
コードを圧縮する
CSSのインライン化の手順の2つ目は、コードを圧縮することです。というのもいくらインライン化してもコードの行数が多いと、重たくなってしまう可能性があるからです。
重くなってしまっては、インライン化した意味がなくなってしまいます。
圧縮ツールは、 クリックだけでOKのCSS圧縮ツールおすすめ5選【初心者向け】にて詳しく解説しています。ぜひご参考にしてくださいね。
headに要素を追加に追加する
CSSのインライン化の手順の3つ目は、headに要素を追加することです。
headの場所
以下のコードの間に、コードを貼り付けていくと楽です。
<style> ここにデザインCSSからコピーしたコードを貼り付ける </style>
貼り付け終わったら、一番下の変更するボタンをクリックするのを忘れずしておきましょう。
レスポンシブデザイン設定のコードを入力
CSSのインライン化の手順の4つ目は、レスポンシブデザイン設定のコードを入力することです。
入力するコードは、次の通りです。
<meta name="viewport" content="width=device-width, initial-scale=1">
こちらを先ほどの<style>タグの前に入れるようにしましょう。
最後にはもちろん、「変更する」ボタンをクリックするのを忘れずに。
文字コードを設定する
CSSのインライン化の手順の5つ目は、文字コードを設定することです。
文字の設定コード
文字コードの設定するコードは、以下の通り。
<meta charset="utf-8">
こちらを、先ほどのviewportの前に貼り付けましょう。
改行部分を消して、最後にまた「変更する」をクリックするのを忘れずにしておきましょう。
まとめ｜CSSのインライン化は、表示速度改善にはマジでおすすめ
ここまで、CSSのインライン化でブログの表示速度を上げる方法をお話してきました。
CSSのインライン化は、表示速度改善にはマジでおすすめです。インライン化をすることで、CSSの優先順位を決められるからです。
ぜひこれを機会にやってみてはいかがでしょうか？
今回は以上です。
次に読むのにおすすめの記事
はてなブログのカスタマイズ方法を知りたい場合
はてなブログの書き方を知りたい場合
アフィリエイトの始め方を知りたい場合
アフィリエイトを体系的に学びたいなら
