かよきせきデザイン|千葉のホームページ制作>kayokiseki-designブログ

body内にstyleを書く


チップス系のブログを書いていると、「この一記事だけ定義したいスタイルがある!」というケースがあります。

今まではインラインスタイルで書いたり、他のページを作ってiframeで見せたり、cssにたった1記事分のstyleを加筆したり、色々な工夫をしていたのですが、正直とても面倒くさかったです(;´Д`)

今年の抱負「昨年は結婚や入院でちょっと疎かになってしまったブログを定期的に書く」。この野望?無謀?いえいえ出来ることからやってみよう!好奇心の形になったようなブログですが、今年もどうぞよろしくお願いいたします。

なんとか1記事ごとにstyleを書けないものか…。さすがにこれだけ皆さんチップス系のブログを書いている方たちが、面倒なことをしているはずないのでは?と初めて疑問を持ちました(汗)

そういえば、SoyCMSではたまに手入力したSoyブロックのコメントアウトがうまく機能しないケースがあり(そういう時は本家からコピペすれば不思議とうまくいく…)、<head>内に配置したmetaを引っ張るSoyブロックが、ソースコードを確認すると<body>側に入っていたことがありました。しかしちゃんとCSSは効いていたのです!


「<head>内配置と学んだのに、<body>内でもちゃんと<style>は効くのかΣ(゚Д゚)!」程度でその時は済ませてしまったのですが、HTML5に詳しい方はお判りでしょうか。HTML5から<body>内にも<style>を書くことができ、2013年では対応ブラウザが少なかったものの2017年主に使用されているブラウザでは問題はありません。


わたくしの愛用しているCSS辞書サイト「HTMLクイックリファレンス」さんの「HTML5タグリファレンス」によれば、

<style>にはscoped属性をつけることで、
scoped属性を指定したstyle要素の親要素、および、その子孫要素に対してのみスタイルを適用(HTML5から追加された属性)

とありますので、端的にいえば<body>内の要素内に<style scoped></style>を書くとその要素限定のスタイルを書くことができるのです。


ではこれを利用して、SoyCMSでブログ記事ごとに個別CSSを設定する方法です。「プラグインタブ」>「カスタムフィールド」を使用します。

まずカスタムフィールドで「複数行テキスト」の新規フィールドを作ります。仮に「entry-style」というID名にします。


次にブログページの記事別テンプレートを編集しましょう。<!-- b_block:id="entry" --><!-- /b_block:id="entry" -->の間に

<style scoped><!-- cms:id="entry-style" -->記事別cssが入ります<!-- /cms:id="entry-style" --></style>

と書きます。記事投稿画面に出来たカスタムフィールド「entry-style」に、その1記事のみスタイル定義するCSSを書けばOKです。とても簡単!

ではさっそくですが、例えばこんなCSSアニメローダーを置いてみます。ちゃんと動いていますね!このローダーのCSSは上記のとおり<body>内にSoyブロックを使ってカスタムフィールドで書いています。



ソースコードを見てみます。

このような方法で、ブログ個記事別にCSSを簡単に設定することができました!長いCSSが、インラインと違ってすらすら書けるのが本当に楽です!メディアクエリだって書けますし。ぜひ活用してみてください。