特定のページだけにCSSを適用する方法★<body>内に直接<style>を記述してCSSを挿入できる？！

自分用の備忘録です。
色々調べても、あまり記述が見つからなかったので、こちらで公開します！

<body>内に直接<style>~</style>を書いて、その中にCSSを記述できるか？
サンプルブログをご覧ください
特定のページだけにCSSを適用する方法★<body>内に直接<style>でCSSを記述できる？！

一応、きちんと調べて書いているつもりですが、まだCSSの勉強し始めて２ヶ月しか経ってないので間違った記述があるかもしれませんが、ご了承ください。
（よく知っている方へ→間違った記述があったら教えてください）

f:id:zuboraca:20180801100231j:plain

まずは表題に関して結論から。

<body>内に直接<style>~</style>を書いて、その中にCSSを記述できるか？

ですが...

できます。

通常はCSSは<head>内に記述するか、外部から読み込む

普通は

CSSは<head>~</head>内で外部CSSを読み込むか、直接<style>で書き込むか、
または<body>の中に書き込む場合は、その都度<div style="~">のようにタグ内にstyleを書き込んで属性を指定します。

特定のページにだけCSSを反映させる方法

<head>をページ毎に変更することが出来れば、<head>~</head>内に書き込む方法で特定のページにだけCSSを反映せることができるのかも知れませんが、ブログサービスによっては<head>の内容をページ毎に変更することができません。

例えば、私の使っている「はてなブログ」は、ブログの設定で<head>内に書き込みはできるけど、ブログ全体に反映さてしまうので、特定のページだけにCSSを反映させることができません。

では、そんな場合はどうするかと言うと↓↓

<body>内に直接CSSを書き込む方法

これまでは<head>に書き込むことになっていたCSSの<style>を<body>に書き込むことができます！

今、自分が使っている「はてなブログ」の例で紹介します。
他のブログサービスの方は、htmlコードで記述できるやり方でやってみてください。

はてなブログの場合は、記事編集画面の「HTML編集」からやります。
↓↓ここね。

f:id:zuboraca:20180801084203p:plain

記事は「見たまま」編集で書いて、最後に「HTML編集」に切り替えて、文章の最後に<style>~</style>で囲った中にCSSを記述するだけ。

非常に簡単♡

↓↓こんな風に。

f:id:zuboraca:20180801085113j:plain

上記は、このページのHTMLです。タイトル部分を変更しています。
他のページと比べてみてください♪♪
タイトルの部分はこのページだけにCSSが適用されているのがわかると思います。

※Wordpressは使ってないので良くわかりませんが、Wordpressの人は<style>の前に空白の行を入れると読み込まれなくなってしまうみたいなので、気をつけましょう！

サンプルブログをご覧ください

実は、私がこの方法を知ったきっかけとなったのは、自分が作った「はてなブログのテーマ★Palette（パレット）」は、着せ替えのCSSコードををコピぺするだけで、簡単に色々なデザインに変更できますよ！

というのを示したくて、サンプルブログでページ毎にCSSコードを適用させ、デザインの違いを知ってもらいたかったのですが、前述のように<head>内に書き込みができないし、どーしよう。

試しに<body>に書き込んで反映されるのかやってみよう！ってやってみたら

できた♡

っていう...

サンプルブログはこちらから見られます。

サンプルエントリー（初期設定ブラック） - Palette sample blog

一つ一つのページにCSSで別のデザインが適用されているのが分かると思います！

少し前までは<style scoped>~~なんちゃらにしないとエラーになってしまい、それでも<styel scoped>自体もサポートされているブラウザが少なかったみたいで、その後<style scoped>はサポートされなくなってしまったらしいです。

私は、ほんの２ヶ月前からCSSのお勉強を始めたばかりなので、そんなこともつゆ知らず、それに<style>自体、<head>に入れなきゃダメって言うのも本で読んだわ。ぐらいの印象で特に気にせず<body>にインしちゃって結果オーライだったんです♪♪

調べていくと、この方法は去年12月にOKになったばかりで、まだみんな知らないし、そこまで使う機会がないんだと思うけど、知らず知らずのうちに最新のことをしてたっぽいわ！(#^-^#) 自分、天才かよ！

かなり難しいけど↓↓こちらのバージョンからできるようになったみたいです。

HTML 5.2: 4.2. Document metadata

英語な上にHTMLのなんちゃらの詳しく書いてあるので、全体的には良く意味がわからないんだけど、