Wordpressはどのページでも共通のCSSを読み込むので、特定のページでだけスタイルシートを使いたくても「共通のCSSに追記」「プラグインの導入」など全ページに影響する変更が必要になると思っていたのですが・・・、調べてみるとhtml5対応の比較的新しいブラウザなら記事に直接スタイルシートを書く事ができるようです。
body内の直接styleを直書きする。
・body内でstyleを使う方法です。
・古いブラウザだとスプリクトが画面に表示される可能性があるようです。(表示されたく無い場合は次項のjavascript案もあります)
・ビジュアルエディタで再編集の予定がある場合は><style>から</style>まで改行せずに書いてください。改行すると<br />が挿入されて動作しません
プログラム
<style>
.js_yellow{ background-color:#ffff00; }
.js_blue{ background-color:#0000ff; }
</style>
<p class="js_yellow">背景が黄色</p>
<p class="js_sky">背景が空色</p>デモ
背景が黄色
背景が空色
おまけ：body内の直接Javascriptを直書きする。
・直接bodyにスタイルシートが書けるとは思っていなかったので、当初はこの方法を使っていました。
・上の方法と比べ、Javascriptが動作しIE9以降でないと動きませんが、かなり古いブラウザでもコメントアウトによりスクリプトが画面上に表示されないメリットがあります。
※ビジュアルエディタで再編集の予定がある場合は「<!－－」と「// －－>」を削除し改行せずに書けば動作しますが、古いブラウザだとスクリプトが表示される可能性があります。
プログラム
<script type="text/javascript"><!--
var style = document.styleSheets.item(0);
style.insertRule(".js_green{background-color:#00ff00;}", style.cssRules.length);
style.insertRule(".js_red{background-color:#ff0000;}", style.cssRules.length);
// --></script>
<p class="js_green">背景が緑</p>
<p class="js_red">背景が赤</p>※赤字の部分を任意のスタイルに書き換えできます。insertRuleは1つで1スタイルしか指定できませんのでスタイルを追加する場合はstyle.insertRule(“スタイル”,style.cssRules.length);を追加して下さい。ダブルクォーテーション内で改行は使えません。
デモ
背景が緑
背景が赤
まとめ
styleはhead内でしか指定できないイメージがありましたが、調べてみると比較的新しいブラウザならbody内でも指定しても問題ないようです。
注意：cssは後から読み込んだ方が優先されます（「headで指定した共通cssよりbodyで指定した個別cssの方が優先」「検索ページで複数の個別cssを読み込めば最後に読み込んだ方が優先」）、id名やclass名が重複してるとデザインが崩れる可能性がありますので注意して下さい。