自分用の備忘録です。
WordPressやはてなブログなどブログサービスで、特定のページだけにCSSを反映する方法です。
色々調べても簡単な方法が見つからなかったので、誰かのお役に立てればと思いこちらに公開します♪♪
色々調べるとheader.phpを作る、や固有のid=をつけて区別する。。。など面倒くさい方法ばっかり！
それよりもはるかにちょー簡単な方法を見つけたので共有します♪
投稿や記事の中（bodyの中）に直接CSSを記述できる！？
表題の、「投稿記事内（body内）にCSSを直接書き込むことはできるか？」ですが
結論から言いますと。。。
できます。
下記で詳しく説明していきますので、参考にしてみてくださいね(^-^)
通常はCSSは<head>内に記述するか、外部から読み込む
普通は
CSSは<head>~</head>内で外部CSSを読み込むか、直接<style>で書き込むか、
または<body>の中に書き込む場合は、その都度<div style="~">のようにタグ内にstyleを書き込んで属性を指定します。
簡単に特定のページにだけCSSを反映させる方法
<head>をページ毎に変更することが出来れば、<head>~</head>内に書き込む方法で特定のページにだけCSSを反映せることができるのかも知れませんが、ブログサービスによっては<head>の内容をページ毎に変更することができません。
例えば、私の使っている「はてなブログ」は、ブログの設定で<head>内に書き込みはできるけど、ブログ全体に反映さてしまうので、特定のページだけにCSSを反映させることができません。
WordPressの場合もカスタマイズの追加CSSやテーマエディタに書き込んでしまうとサイト全体のCSSが変わってしまいます。
そこで！
↓↓
投稿記事内、<body>内に直接CSSを書き込む方法
これまでは<head>内に書いていたCSSを<style>〜</style>を使って、直接投稿記事や<body>に書き込むことができるようになりました！
WordPressの場合
1)記事の編集画面でカスタムHTMLのブロックを選ぶ。
2)<style>~</style>で囲って、その中にこのページだけに反映したいCSSを書き込む。
はてなブログの場合
「はてなブログ」の例で紹介しますが、
他のブログサービスの方は、htmlコードで記述できるやり方でやってみてください。
はてなブログの場合は、記事編集画面の「HTML編集」からやります。
↓↓ここね。
記事は「見たまま」編集で書いて、最後に「HTML編集」に切り替えて、文章の最後に<style>~</style>で囲った中にCSSを記述するだけ。
非常に簡単♡
↓↓こんな風に。
実際にこのページだけタイトルの背景の色を白ではなく若干薄いグレーに設定しています。他のページと見比べてみてください。
この方法を思いついたきっかけ
実は、私がこの方法を知ったきっかけとなったのは、自分が作った「はてなブログのテーマ★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のなんちゃらの詳しく書いてあるので、全体的には良く意味がわからないんだけど、
本来は<style>は<head>の中で使うのが望ましいよ。
<style>を<body>の中で使う時は、元のスタイルを上書きしてレイアウトが変になったり、塗りつぶしたりしちゃうから気をつけてね！
らしいことが書いてありました。
以上、本日は備忘録も兼ねて
特定のページだけにCSSを適用する方法★<body>内に直接<style>でCSSを記述できる？！
をお送りしました。
参考にしたページ：
body内にCSSを記述する件と段組レイアウトとinline-blockを検証 | ウェブサイトマスターの為の覚書き
CSSファイルを<head>内ではなく</body>直前で読み込む
HTML 5.2: 4.2. Document metadata
