Bambi's BLOG @ hatena

ブログ運営 カスタマイズ テーマ制作 アフィリエイト いろいろ (ずぼらでも頑張るブログ)

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

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

 

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

 

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>はサポートされなくなってしまったらしいです。

私は、ほんの2ヶ月前から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