H1の補助見出し（小見出し）は<span>を使いましたが、H2では、<em>または<strong>を、サブタイトルには<small>を使いました。
/* h2中のemで、小見出し(左・枠付き)を付ける */
h2 em {
font-size: medium;
font-weight:normal;
display:block;
border:2px solid #aaa;
margin:0.5em 0;
padding:0 1em 0 1em;
background-color:white;
width:-moz-fit-content; /* Firefox */
width:fit-content; /* other browsers */
}
/* h2中のstrongで、小見出し(左・枠付き)を付ける */
h2 strong {
font-size: medium;
display:block;
border:2px solid #aaa;
margin:0.5em 0 0.5em auto;
padding:0 1em 0 1em;
background-color:white;
width:-moz-fit-content; /* Firefox */
width:fit-content; /* other browsers */
/* h2中のsmallで、サブタイトル・筆者名（右寄せ）を付ける */
h2 small {
display:block;
font-size: large;
font-weight:normal;
margin:0.5em 0 0.5em auto;
width:-moz-fit-content; /* Firefox */
width:fit-content; /* other browsers */
}
本来の、em, strong, smallの使い方とは違いますが、見た目を重視しました。ただし、strongは太字になってしまいます。
その結果、目次でもそこだけ太字になってしまいます。
サブタイトルは、H1でも表示できるようにしてみました。
/* h1中のsmallで、サブタイトルを付ける */
h1 small {
font-size: smaller;
font-weight:normal;
display:block;
margin-left:auto;
width:-moz-fit-content; /* Firefox */
width:fit-content; /* other browsers */
}
<small>を使ったという点で、やはり本来のタグの使い高ではありません。
だんだん、CSSの指定が多くなってきて管理が大変になってきたので、プラグイン「CUSTOM CSS & JS」を使うことにしました。
ただ、H1に関する今回の特殊な指定を「CUSTOM CSS & JS」に入れると無視されます。
WordPressの中で（それとも、Luxeritasの中でか）、H1が特殊な扱い方を受けていることが分かります。
そこで、H1に関する今回の特殊な指定だけは、外観＞カスタマイズ＞追加cssに入れて置くことにしました。
なお、H1を非表示にして、画像で置き換えたいところが逢ったので、<b>タグをH1中で使って、非表示(display:none;)を使ってみましたが、あくまでも<h1>内部の文字が消えるだけで、<h1>の外枠などが残ってしまうことが分かり、諦めました。
本当は、Luxeritasでは、各ページごとに「追加ヘッダー」というのがあって、
追加ヘッダーという説明もあるのですが、なぜか機能していません。
※投稿単位でheadタグ内に <style>、<javascript>、<meta>、<link> その他タグ類を追加したい場合はここに記述してください。
※ <title> ~ </title> を記述するとタイトルを変更できます。
これが機能すれば、ページ毎にカスタマイズしにくいH1を変えられるかもしれないのですが…。
