紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

CSSインライン化でブログの表示速度を上げる方法【はてなブログ】

f:id:slash1196:20210715223743j:plain

f:id:slash1196:20200520205950j:plain

ブログの表示速度を上げたい人

「ブログの表示速度改善で調べていたらCSSのインライン化が出てきた。

でもCSSのインライン化って何?

誰か教えて。」

 

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

 

  この記事でわかること

  • CSSのインライン化とは?
  • CSSのインライン化のメリット
  • CSSのインライン化の注意点
  • CSSのインライン化の仕方

 

こんにちわ、紅蓮です。

 

表示速度の改善を行うときに、CSSコードの圧縮だけで満足していませんか?

 

今回はCSSのインライン化でブログの表示速度を上げる方法です。

 

この記事を読むとCSSのインライン化とはから、メリット、注意点、やり方まで丸っとばっちりわかっちゃいます。

 

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

今ではアフィリエイトからの収益が毎月3000円ほど入ってきます。

 

僕はサイトのカスタマイズオタクで、今まで扱ってきたテーマは75件以上。

 

そんな僕が今回はCSSのインライン化について、ばっちりお話しします。

ぜひ最後までお読みくださいね。

 

では行ってみましょう。

Here We Go!!

 

 

CSSのインライン化とは?

f:id:slash1196:20210514174929j:plain

CSSのインライン化についてお話していきましょう。

 

CSSのインライン化とは、HTMLの内にstyleタグを使ってCSSコードを書き、読み込む方法です。

 

CSSのインライン化のメリット

f:id:slash1196:20210613192550j:plain

CSSのインライン化するメリットはやはり、読み込み速度の速さですね。

 

というのもインライン化すると、外部ファイルを読み込む必要がないから。

 

通常ブログはHTMLとCSSを別のところに設置していて、HTMLにCSSのファイルを外部ファイルとして読み込むことでデザインを表示しています。

 

はてなブログでも同じで、デザインCSSというところにおいたCSSは、外部ファイルとして読み込んでいるんです。

 

でもこの外部ファイルとして読み込む方法、実はブログ内のほかのコードの読み込みよりも優先度が高いんですよ。

 

そのために外部ファイルを読み込んでいる間に、headなどに置かれたブログ内のほかのコードの読み込みをストップさせてしまうんですよね。

 

そのために若干ですが、読み込み速度が遅くなっちゃうんですよね。

 

一方CSSをインライン化すると、外部ファイルではなく直接HTMLに作用することができるために外部ファイルを読みこみに行く必要がなくなります。

 

表示速度が速くなるんですよね。

 

これを買い物に例えると、以下のようになります。

 

  • CSSを外部ファイルで読み込む方法:自転車で一時間かかるスーパーマーケット
  • インライン化する方法:歩いて5分のスーパーマーケット

 

どう考えても後者のほうがいいですよね。

 

CSSのインライン化の際の注意点

f:id:slash1196:20210608165144j:plain

ここでは、CSSのインライン化の際の注意点についてお話していこうと思います。

 

注意点は、以下の通り。

 

  • 注意点①CSSが長すぎる場合には注意
  • 注意点②CSSの順番をしっかりと守ること

 

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

 

注意点①CSSが長すぎる場合には注意

1つ目の注意点は、CSSが長すぎる場合には注意が必要なことです。

 

というのも、コードの行が多ければ多いほど読み込みに時間がかかるからです。

 

例えばコードが5行ですむものと、50行のものではコンピュータの労力が違います。

 

ですから長すぎるコードは、あまりよろしくないですね。

 

  長いコードをインライン化したいとき

とはいえ長いコードをインライン化したいときもありますよね。

そんな時には圧縮してしまいましょう。

 

そうすることで、行数がぐっと縮まりますし、コンピューターにとってもいいですからね。

 

圧縮してしまいましょう。

 

注意点②CSSの順番を守ること

注意点の2つ目は、CSSの順番を守ることです。

上から順番に書いていくようにしましょう。

 

というのもブログは一番上にあるコードを優先して読み込んでいくからです。

 

例えば一番上にグローバルメニューのコードがあると、グローバルメニューを読み込むようにします。

 

順番をなるべく間違えないようにしないと、せっかくインライン化してもブログ自体が混乱してしまっては意味がないです。

 

ですからブログのデザインの上から書いていくようにしましょうね。

 

CSSのインライン化の仕方

f:id:slash1196:20210527200426j:plain

ではいよいよCSSのインライン化の仕方についてお話していきましょう。

 

インライン化の手順に関しては、以下の通り。

 

  • 手順①デザインCSSに書いているコードをコピーする
  • 手順②コードを圧縮する
  • 手順③headに要素を追加に追加する
  • 手順④レスポンシブデザイン設定のコードを入力
  • 手順⑤文字コードを設定する

 

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

 

手順①CSSに書いているコードをコピーする

CSSのインライン化の手順の1つ目は、CSSコードのコピーですね。

 

デザインCSSから、現在読み込んでいるCSSコードをコピーしましょう。

 

  デザインCSSの場所

f:id:slash1196:20210606181402j:plain

管理画面→デザイン→カスタマイズ→デザインCSSをクリックしましょう。

 

すると、コードが出てくるので、そちらをコピーしましょう。

 

手順②コードを圧縮する

CSSのインライン化の手順の2つ目は、コードを圧縮することです。

 

というのもいくらインライン化してもコードの行数が多いと、重たくなってしまう可能性があるからです。

 

重くなってしまっては、インライン化した意味がなくなってしまいますよね。

 

圧縮ツールは、 クリックだけでOKのCSS圧縮ツールおすすめ5選【初心者向け】

にて詳しく解説しています。

 

ぜひご参考にしてくださいね。

 

手順③headに要素を追加に追加する

CSSのインライン化の手順の3つ目は、headに要素を追加することです。

 

  headの場所

f:id:slash1196:20210524163311j:plain「管理画面」→「設定」→「詳細設定」と進み、「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のインライン化とは、HTMLの内にstyleタグを使ってCSSコードを書き、読み込む方法です。
  • CSSのインライン化のメリットはやはり読み込み速度が速くなること。理由は、直接読み込むために別のファイルを読み込みにいかなくてもいいから。
  • CSSのインライン化の時の注意点は、以下の通り。
    • 注意点①CSSが長すぎる場合には注意
    • 注意点②CSSの順番をしっかりと守ること
  • CSSのインライン化の仕方は、以下の通り。
    • 手順①デザインCSSに書いているコードをコピーする
    • 手順②コードを圧縮する
    • 手順③headに要素を追加に追加する
    • 手順④レスポンシブデザイン設定のコードを入力
    • 手順⑤文字コードを設定する

CSSのインライン化は、表示速度改善にはマジでおすすめですね。

ぜひやってみてくださいね。

 

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

また次回に。