2022年12月29日

H1見出しの上に、補助見出しを付ける

 WordPressを使って、かつてのHTMLで全て書くのと比べれば楽になりましたが、問題もあります。

 カテゴリーを作るほどではないが、分類名を設けてた上でコンテンツを別々のページに個々のタイトルを付けて、その「分類名」を表示することができません。個々のページのタイトルが<H1>として一番上に表示されてしまうからです。

h1の上01.png



 辛うじてパンくずリンクが表示されいますが、これを利用するためにはカテゴリーを設定しなくてはいけません。

 この例で言えば、「お知らせ」というカテゴリーの下に、カテゴリーは作らないまでも、一連のコンテンツをまとめるための「準カテゴリー」のようなものを設定し、それを言わば「補助見出し」として表示したいわけです。

 苦戦の末、実現できました。

h1の上02.png


 最初にヒントになったのは、<H1>タグの中に<br>タグが見えるタイトルがあることに気づいたからです。(その見出しは2行で表示される。)

 それでは、<H1>タグの中に、別のタグを入れ子にして入れることはできないだろうかと調べたところ、HTML5でそれが赦されていることが分かりました。

hタグの中に入れることの出来るタグ の中程
html5になって入れ子のルールが変わりました。

a / audio / b / br / button / canvas / cite / code / data / em / i / iframe / img / input / label /picture / select / small / span / strong / svg / textarea / time / video /

これらのタグは入れ子として文法上問題ありません。


 本文中にHTMLで書くのならば簡単なのですが、WordPress(+テーマ Luxeritas)では、ページタイトルが自動的に<H1>タグとなり、しかも基本的には表示する文字列を入力することになっています。

 ただ、<br>タグも結果的に入れられたので、<span>タグも入るだろうと思い、やってみると出来ました。ただし、style=... と入れても無効になってしまいました。

 そこで、「追加CSS」として以下の記述をしました。
h1 span
{ font-size: smaller;
display:block;
border:2px solid #ff00ff;
text-align:left;
margin-left:-1.7em;
margin-top:-1.5em;
margin-bottom:0.2em;
background-color:white;
width:-moz-fit-content; /* Firefox */
width:fit-content; /* other browsers */
}


 一方、ページのタイトルとしては、
<span> 補助見出し </span>H1見出し

と記入します。

 編集画面でもコピー&ペーストで入りますが、<br>タグが、文字としては見えないように、<span>タグは文字として見えません。
 クイック編集画面だと、そのまま文字として見えます。

h1の上03.png


 あくまでもh1タグ内の文字列ですので、位置や大きさは制限がありますが、十分実用になると思います。


posted by kewpie at 08:43| Comment(0) | TrackBack(0) | WordPress
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/190023462
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
コメントの投稿について
○お名前とコメント欄の記入は必須です。
○メールアドレスは任意です。記入されても公開はされません。管理人のみに知らされます。
○スパム防止のため、
・ホームページアドレス欄への記入はできません。
・コメント欄にURLは記入できません。
・スパムと思われる語を記入できません。
 これらをしようとすると、最終的に投稿完了できません。
○投稿完了後に、管理人の判断でスパムと判断した投稿は削除させていただきます。