ページの種類に応じたCSS

 
固定ページには、デフォルトテンプレートとFull Width Pageスタイルのページがあります。
１）これまではページのスタイルに依らず同じCSSの設定でした（下記は今までのCSS）

pre.d1 {
   width: 85%;
   background:#345;
   color:#fff;
   font-size:13pt;
   padding:8px;
   font-family: 'Avenir','Corbel','Osaka','MP Pゴシック';
}

２）変更後は、次のように、FullWidthの場合とそうではない場合で分ける方法が分かったので設定をした所・・・幅の狭いページではpreタグは100%とし、全幅のページは82%に表示出来るようになりました。

.page-template-full-width pre.d1 {
   width: 82%;
   background:#345;
   color:#fff;
   font-size:13pt;
   padding:8px;
   font-family: 'Avenir','Corbel','Osaka','MP Pゴシック';
}
body:not(.page-template-full-width) pre.d1 {
   width: 100%;
   background:#345;
   color:#fff;
   font-size:13pt;
   padding:8px;
   font-family: 'Avenir','Corbel','Osaka','MP Pゴシック';
}

 
WordPressの場合、Bodyタグに、ページスタイルに応じたClass名が入っているので色々な応用が出来る事が分かりました
 
参考サイト：https://www.nishi2002.com/15404.html