色々な手段を使っても特定の固定ページに別のCSSを適用できないので、さんざん教本のたぐいや入門書を読みあさったけれど、どの方法が使えるのかさっぱり分からない。たいていはclassの指定で何とかなると解説されている。それで･･･基本の基本でbody_class関数がどういうclass名を吐き出すのかネットを泳ぎ回って見つけてきた。
何と！ page-templateというclass名を吐き出しているらしいではありませんか！ さっそく自分のサイトのソースコードを表示してみる（IEだとブラウザーの「ページ」というタブの中に「ソースの表示」がある）。
<body class=”page page-id-xxx page-child parent-pageid-xx page-template page-template-novel-php logged-in admin-bar no-customize-support”>
と、いうことはですよ、page-template-novel-php というclassが存在していて、これで指定をすればこの固定ページテンプレートを使ったページ限定でCSSを適用できるってことですよ！ おそらく、いちいち全部指定しなければならないけれど、小説掲載用ページ共通のCSSができるわけだ。たぶん、おそらくは、きっと･･･。
さっそくものは試しということで、CSS編集に書き込んでみる。いやはやjetpackってプラグインはなんて便利なんでしょう。でも、containerとかcontentというクラスがあるけど、大丈夫なんだろうか？
.page-template-novel-php {
width: 680px;
overflow: hidden;
padding: 10px;
border: 2px groove #666;
}
試しに↑このように入れてみたら、レイアウトが大幅に狂った。枠線の外側にコンテンツがはみ出していっている！？
他の項目でも試してみたけれど、やっぱりレイアウトが乱れる。こういうところからして分かっていないのがいかにもドシロートだなと思うのですが･･･。要するにクラスを二重で指定すればOKだったようです。でも、「.page-template-novel-php」の後に「content」を入れたのでは意味がありませんでした。「.content」でなければクラスとして認識されないようなんです！
いやはやプログラムの世界って面白いな。たったひとつの「.」が非常に大きな意味を持っているんですね。「.」があることによって「.page-template-novel-php」の中の「.content」に以下のレイアウトを適用しますっていう指示になるってことなんですね。そういう訳で、正しい指示文は以下のようになります。
.page-template-novel-php .container {
width: 980px;
margin: 20px auto 0;
position: relative;
-webkit-box-shadow: 0 0 5px 1px #a8a8a8;
-moz-box-shadow: 0 0 5px 1px #a8a8a8;
box-shadow: 0 0 5px 1px #a8a8a8;
}.page-template-novel-php .wrapper {
padding: 20px 140px;
background: #fff;
}.page-template-novel-php .content {
width: 680px;
overflow: hidden;
padding: 10px;
border: 2px groove #666;
}.page-template-novel-php .page-title-top, .subheading-top {
border: none;
}
以上をCSS編集に書き込んだら、見事期待通りのレイアウトへと変貌を遂げました！ やった～！長かった苦闘もこれで最終版に突入だわ。