WEBCRE8.jp > 調べる > [CSS/JS]単一の記事にCSS/JSを適用する方法を調べた

[CSS/JS]単一の記事にCSS/JSを適用する方法を調べた

この記事は約5分ぐらいで読めます

jQueryプラグイン「tinyTips」
HTML5のscoped属性
WordPressプラグインCustom CSS and JS

ちょっと前に、[色]デザイナーっぽくカラーコードの16進数を覚えたくないですか？の記事の下の方置いておいたカラーコードについての問題に、記事投稿時にはつけることの出来なかった答えを設置しています☆これの実装がちょっと間に合わなくて、記事だけ投稿したのですが、その後興味あった人はチェックしてくれたりしたでしょうか？ｗ

こんな感じで問題の答えがポップアップします☆

jQueryプラグインtinyTips

このマウスオーバーしたらツールチップがふわっと出てくるのはskuare.netさんで紹介されていたjQueryプラグインのtinyTipsを使用しています。

jQuery利用の軽量吹き出しJavaScript「tinyTips」｜skuare.net

skuare.netさんのjQueryプラグイン紹介記事は、設置の仕方がシンプルに紹介してあって、いつも重宝しています。特にwebcre8のような、JavaScriptに明るくないデザイナーさんが参考にするにはぴったりのサイトだと思いますのでオススメしておきます☆

このプラグインを選んだ理由はツールチップの中に画像を含めたりすることもできるからですね。若干実装の仕方は手間があったりするのですが、画像を出すこともあるだろうなーと思ったので。

CSS/JSの記事ごとの実装(HTML5の場合)

で、このページ単位の装飾やギミックをブログやwebサイトなどで実装するにはどういう方法があるでしょうか。複数ページに渡って使われるスクリプトならまあ全ページにあってもいいでしょうし、CSSに追加しても構わないと思います。ですがそのページにしか使わないような特殊な指定はなるべくそのページだけにしておきたいですよね。JavaScriptの方はまあ普通に設置しておけばいいと思います。

CSS3には、これを実装する方法の一つとしてHTML5にはstyle要素のscoped属性というものがあります。詳しく知りたい方はhamashun.meさんの記事でしっかりなされていますからこっちで見てみてもいいと思います☆

hamashun.me : HTML5のstyle要素が持つscoped属性について

要はheadではなく、直接body内にCSSを書くための属性で、逆にこの属性が付くとheadには書けなくなります。これを使えばCSSを記事ごとに追加出来ます！昔使われていたstyle属性の方と違い、要素ごとに書き分ける必要もなく、例えばWordPressのようなシステムで管理していたとしても記事内の一番上に書けばいいのでさほど運用も難しくないんじゃないのかなーと思います。

ただしscoped属性はまだ残念ながら主要ブラウザにも実装されておらず、この属性の持つ設置された親要素内のみで機能するという特徴の恩恵を受けることはできないみたいです(2011年9月11日現在)。実際に設置した場合にはどこに設置しようとページの全てに適用されてしまいます。

なのでとりあえずは実装されることを待ちつつ、scoped属性を持ったstyleを置いた場合はCSSにその親要素のIDなりクラスなりを親セレクタとしてつけておけばとりあえずはいいんじゃないかなーと思います。例えばブログ記事内のpタグのみに赤い文字色をつける場合は.blogbody p｛color:#ff0000;}といった感じですね。

CSS/JSの記事ごとの実装(WordPressの場合)

WordPressだったら記事ごとに挿入するCSSやJSファイル、または指定自体を追加できるCustom CSS and JSというプラグインがコリスさんで紹介されています。こんな簡単な方法があったなんて…。

WordPressの記事ごとに個別のCSS, JavaScriptを追加できるプラグイン -Custom CSS and JS | コリス

まあこれに関しても書いてある通りにやればそんなに難しい事はありません。一つwebcre8が困ったことと言えば、これまでカスタムフィールドを使ったことがなかったので、記事にカスタムフィールドを付ける方法がわからなかったということですね…ｗ一応書いておくと記事編集ページの上部のタブ「表示オプション」の中にチェックボックスがあるのでそこからCSS/JSのファイルを指定するか、挿入する記述を書き込むことが出来ます。

というわけで最初はなんとかscoped属性で書き入れようとしていたものの、プラグインの便利さになびいてしまったと言う話しですｗ WordPressを使っているなら使わないと損ですもんね！