body内でCSSを読み込むには？問題点と対策まとめ

2021/01/02

2021/04/01

CSS

無料ブログサービスやWordPress等のCMSでは、サイト全体のスタイルシートをカスタマイズできても、各記事のCSSを変更する機能が備わっていないことが多いですよね。

また、各記事の投稿画面で編集できる範囲は大抵の場合<body>内に限定されています。

本来、CSSを読み込ませる<head>内の編集ができないため、記事内容に応じて柔軟にデザインを修正しにくいのが難点です。

そこで今回は、あの手この手を駆使して<body>内でCSSを操作する方法についてまとめてみました。

１．基本的なCSSの記述方法

まずはCSSの基本について、簡単におさらいしておきましょう。

CSSは以下（Ａ）～（Ｃ）の３パターンで記述されるのが一般的です。

（Ａ）<style>要素内に直接書き込む

以下のように<head>内に<style>要素を挿入することで、そのページに適用するCSSを記述できます。

<head>
<style>
p {
  font-weight: bold;
  color: red;
}
</style>
</head>
<body>
<p>こんにちは</p>
</body>

<head>

<style>

p {

font-weight: bold;

color: red;

}

</style>

</head>

<body>

<p>こんにちは</p>

</body>

（B）外部CSSを読み込む

あるいはスタイルシートを別途に作成し、以下のように<link>要素で呼び出す方法もあります。

<head>
<link rel="stylesheet" href="./css/style.css" type="text/css">
</head>
<body>
<p>こんにちは</p>
</body>

<head>

</head>

<body>

<p>こんにちは</p>

</body>

こちらも<head>内に設置するのがルールです。

（Ｃ）<body>内の要素に直接書き込む

<body>内の各要素のインラインに<style>属性を付け加えることで、個別にCSSを適用できます。

<body>
<p style="font-weight: bold;color: red;">こんにちは</p>
</body>

<body>

<p style="font-weight: bold;color: red;">こんにちは</p>

</body>

この方法なら「 <body>内でCSSを操作する」という目的は達成するものの、各要素にいちいちスタイルを書き込まねばならず、かなり非効率です。

また、<style>属性には疑似要素や疑似クラスが機能しないという制限もあります。

文字色などの小さな変更なら便利な方法ですが、ページ全体のデザインや高度な装飾を施すのには適しません。

２．<body>内に<style>要素を設けるのはアリか？

前述した通り<style>要素は<head>内に挿入するのが基本的なルールとなっています。

では、<body>内に<style>要素は挿入できないのでしょうか？

実は挿入できるし、機能もします。

以下のように<body>内にCSSを記述したとしても、普通に装飾が適用されてしまうのです。

<body>
<p>こんにちは</p>
<style>
  p {
    font-weight: bold;
    color: red;
  }
</style>
</body>

<body>

<p>こんにちは</p>

<style>

p {

font-weight: bold;

color: red;

}

</style>

</body>

ただし、この記述はW3Cの基準に沿わないため、あまりオススメしません。

W3Cとは、HTML等のWEB技術の標準化および勧告を行っている非営利団体のこと。

ざっくり言うと「WEBサイトはこのように作ってください」といったルールを決めている所と考えて良いでしょう。

W3Cの基準通りにコーディングしないと、一部のOS・ブラウザで表示上の不具合が生じたり、SEOに悪影響を及ぼす可能性もあります。

※2017年に行われたW3Cの勧告（HTML 5.2 W3C Recommendation）において、<style>要素の記述位置に関するルールが緩和されたとの情報もありますが、現状「W3C Markup Validator」の文法チェックでエラー判定が出るため注意してください。

小さな変更程度なら差ほど問題にならないかもしれませんが、リスクを避けるなら<body>内に<style>要素の挿入は控えましょう。

４．<body>内のJSでCSSを読み込む

W3Cの基準を満たしつつCSSを<body>内から読み込むには、今のところJavaScriptを使うのが無難のようです。

JSを記述または読み込む<script>要素は、<body>内に挿入しても何ら問題はありません。

<body>
<p>こんにちは</p>

<script type="text/javascript">
  var css = document.createElement('link');
  css.rel = 'stylesheet';
  css.href = './css/style.css';
  css.type = 'text/css';
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(css);
</script>
</body>

<body>

<p>こんにちは</p>

var css = document.createElement('link');

css.rel = 'stylesheet';

css.href = './css/style.css';

css.type = 'text/css';

var head = document.getElementsByTagName('head')[0];

head.appendChild(css);

</script>

</body>

上記のコードを</body>直前に設置することで、任意のスタイルシートを読み込むことができます。

※css.href = './css/style.css';は、スタイルシートの正確なパスに書き換えてください。

JSを実行すると、こちらの<link>要素が<head>内に追加される仕組みになっています。

<head>内はCSSの正当な読み込み位置なので、W3Cのチェックでもエラーは発生しません。

５．記事ごとのCSS編集を可能とするプラグインを導入する

WordPressなら、各記事で個別のCSSを編集できる大変便利なプラグインがあります。

「WP Add Custom CSS」をインストール⇒有効化すると、各エディター画面の下部にCSS入力用のフォームが追加されます。

フォーム内にはスタイルシートの記述方法と同じ要領で、自由自在にページ内のデザインを変更できます。

クラス指定や疑似クラスの適用も気軽にできるため、WordPressユーザーはぜひ検討してみてください。

まとめ

無料ブログサービスやWordPressなどのCMSでは、各ページのCSSを編集するのが難しい
<style>要素を<body>内に挿入するのは基本的にNG
<body>内でCSSを読み込むには、JavaScriptを使うのが無難
WordPressなら各投稿画面でCSSを編集できるプラグイン「WP Add Custom CSS」が便利