WordPress cssをインライン化するのと外部ファイル化する事の違い

CSSの内容はhtmlに直接記述し、インライン化することができるわけですが、style.cssのように外部ファイル化することの違いは何なのでしょうか？
　
　
CSSはページの上から下へ属性が記載されています。そこには優先順位というのがあって「h1」、「p」、「img」のように基本的なタグは上の方に、「p.inline-center」のようなpタグに属性をつけたものは下の方に記述されます。
　

（4000行のファイル）
　
　
例えばこのように、pの属性がフォントサイズ14pxだとしましょう。

p {
    color: #1a1a1a;
    font-family: arial,sans-serif;
    font-size: 14px;
}

　
　
そしてこれ以下にこのスタイルを追加することで

p.inline-center {
    text-align: center;
    font-weight: bold;
}

最初に設定されたフォントサイズを引き継いで、中央寄せと太文字という新たな属性が付けられます。
　
　
自作のCSSを追加したいときに、このように外部のcssファイルに書き加えると基本となる属性が紐付けされるというわけです。
　
　
CSSをhtmlファイルにインライン化すれば、style=””のようにその場で属性をつけることができる。つまり、外部ファイルの基本属性から独立させられるという違いがあるのです。
　
　
私自身、新しいスタイルを加えたい時、外部ファイルに追加していくのですが、この記事を作っている最中でも、中央寄せしたいなと思ったとき、この記事以外では必要がない場合、インライン化してしまいます。
　
　
ということは、インライン化されているcssは、そのページだけに必要な時に使われます。実際、CSSを簡単に自作したい人向けに作られているプラグインは、直接htmlページに割り込ませインライン化しているのです。
　
　
ちなみに、function.phpに簡単なコードを追加し、下記ページのようにカスタムフィールドにCSSを記載してやれば、即席でスタイルシートを自作することもできます。
参考にしてください。

カスタムフィールドの値やコードを取得して出力するために

カスタムフィールドに入力した値やデータやコードを取得して、出力できるとWordPressのカスタマイズの幅が広がります。カスタムフィールドの内容を出力する為のひとつのタグとして、get_post_metaが必要になります。どう扱うかは、こちらの記事でも解説しています。

WordPress cssをインライン化するのと外部ファイル化する事の違い

CSSの内容を style=" " でhtmlに直接記述することができるわけですが、style.cssのように外部ファイル化することの違いは何なのでしょうか？

インライン化と外部ファイル化との表示速度

cssをインライン化すると、htmlコードがごちゃごちゃして汚くなります。その点、外部ファイル化するとヘッダーにcssのリンク情報が入るだけなので、見た目はスッキリします。
　
　
ここで生まれる違いは、インライン化したcssよりも、外部ファイル化されたcssの方が読み込みに時間がかかってしまうということ。サイトを育てていく上で、プラグインを追加したり、画像を増やしていくと、サイトが重くなり、表示速度が遅くなってしまいます。
　
　
サイトにアクセスしたときに、ブラウザが外部ファイル化されたcssを読みに行こうとするので、外部ファイルが増えることで、表示速度にも影響がでてきます。
　
　
とはいえ、インライン化するとhtmlページが汚くなってしまうので、数百行以上あるcssであれば外部ファイル化するべきですが、簡単なcssであれば、インライン化することがサイトへの負担は軽くなります。
　
　
スポンサードリンク