ComposerでのH1とH2の見出しの使用

トピック内でレベル1のMarkdown見出し(#)を使用すると、HTML出力ではh1になりますか、それともh2になりますか?

「いいね!」 1

<h1> を出力します :slight_smile:

「いいね!」 1

ということは、Discourse はページ内に複数の <h1> タグがあることを良しとしているということでしょうか?トピックのタイトルが h1 なら、そのトピック内の第一レベルの見出しはデフォルトで h2 になるべきではないでしょうか?

「いいね!」 1

Discourse は何も想定せず、尋ねられたことを出力します。
投稿内でトップレベルの見出しとして ## を使うよりも ### を使う方が確実に良い習慣です :slight_smile:

編集: Use of H1 vs. H2 headings in composer - #16 by Canapin を参照してください。

「いいね!」 2

これは、# をレベル1の見出しにしないことで、私たちが避けることができる「ユーザー教育」の側面が間違いなくあります… :anxious_face_with_sweat:

それを変更する方法をご存知ですか?あるいは、少なくともツールバーでレベル1の見出しを非表示にすることはできますか?(Markdownで直接書いている人は現実的な教育対象だと推測しています…)

「いいね!」 1

はい、かなり簡単です。リスト要素には data-name="heading-1" 属性があり、CSSでそれをターゲットにできます :slight_smile:

「いいね!」 1

ええと、私もちょうど調べていました。簡単なテストでは、マークダウンとリッチテキストコンポーザーの両方で H1 オプションが非表示になります。

button[data-name="heading-1"] {
  display: none;
}

(これは残しておくかもしれません!コンポーザーで H1 を提供するあまり理由が見当たりません。)

「いいね!」 2

おっしゃることは理解できますが、これは Discourse がどちらか一方に決めたことではありません。Discourse は CommonMark と呼ばれるマークダウンの規約に従っており、仕様では # が H1 に変換されることが規定されています。マークダウンの見出しが HTML タグに変換される方法に関するこの規約は、主要なマークダウン仕様全体でかなり標準的だと思います。

「いいね!」 2

さて、<h1>の見出しが2つあることは、それほど大きな問題ではありません。これはかなり古いSEOのミームであり、長い間問題にはなっていません。Googleなどは、最初に見つかったものか、最も適切だと考えるものを使用します。

コンテンツとして2つのメインヘッダーを使用することが最も賢明な方法かどうかは議論できますが、プラットフォームがトピック名と投稿内のヘッダーに異なるスタイルを使用する場合、実際には大した問題ではありません。

それでも、投稿では## / <h2>を使用する方が適切です。しかし、それが実際的な役割を果たさないため、私の意見では、ユーザーが「間違った」ヘッダーを使用することを恐れて、それらを避けるヘッダーを使用する方が良いでしょう🤷‍♂️

「いいね!」 2

見出しは今日のSEOにとってわずかなシグナルにすぎないかもしれませんが、私はまだオタクなので、複数のH1は好きではありません。:nerd_face:

また、Stephがページ公開の印刷可能なドキュメントを作成していることについても考えています。その際、投稿内のH1がページ最上部のH1よりもさらに大きく表示されています。

画像

それらをH2にすることで、最上部のH1よりもわずかに小さく保つことができます。

画像

「いいね!」 1

ええ、それが問題です。私にとっては、最初のレベルの見出しから使うのが自然なのですが、テーマが同じ前提でスタイル設定されていないと、ごちゃごちゃになります。ここに一種の断絶がありますね。

(余談ですが、あなたの方では、特に操作をしなくてもドキュメントが英語で表示されているのですか!?)

それは自然であり、ウェブページをゼロから構築する場合には理にかなっています。しかし、CMSやパブリッシングシステムは、ページの H1 をタイトルフィールドから取得することがほとんどなので、コンテンツセクションには通常 H2 を使用することになります。

(そして、ウェブブラウザの翻訳ツールを使って英語にしました。)

「いいね!」 1

私も同意しますが、コミュニティメンバーがそれを知っていることを期待すべきではないと思います。

はい、その通りです。そして、H1オプションを非表示にすることに何ら欠点も見当たりません。

ただし、通常の投稿をするほとんどのユーザーは、見出しをあまり使っていないようです。より長いドキュメントのトピックを作成する人々は、おそらく##と「TT」アイコンについて、ある程度の経験を持っているか、すぐに経験するでしょう。

(また、見出しはトピックでのみ使用し、返信では禁止すべきであると提案されている、この興味深い古い議論に気づきました:返信でのh1やh2のようなヘッダーを無効にする

「いいね!」 2

また、トピックでのみ見出しを使用し、返信では使用を禁止するという興味深い古いディスカッションを見つけました。返信でh1やh2のような見出しを無効にする

もし誰かの興味を引くようであれば、この小さなスニペットは、返信するときだけ、コンポーザー内の「TT」見出しアイコンを完全に非表示にします。

.composer-action-reply button.heading {
  display: none;
}
「いいね!」 1

見出しはSEOだけでなく、アクセシビリティのためでもあります。

スクリーンリーダーは見出しから見出しへと移動でき、キーボードショートカットでヘッダーの階層を指定できます。

トピックには<h1>タイトルがありますが、すべての返信には、スクリーンリーダーで表示される独自の非表示の<h2>が先頭に追加されます。

<h2 aria-hidden="false" class="sr-only" id="post-heading-9">
  post by Jagster 4 hours ago
</h2>

したがって、いずれにせよ、コンテンツ内で<h1>または<h2>の見出しを投稿すると、それは常に既存の<h2>の子孫になります :upside_down_face:

投稿内で<h3>より高い見出しを使用すると、スクリーンリーダーでのナビゲーションが少し奇妙になる可能性があります。

既存のトピック間では完全には一貫していませんが、Customization > Plugin の投稿テンプレートでは、トップレベルの見出しとして<h3>が使用されています。

| | | |
| - | - | - |
| :information_source: | **Summary** | このプラグインが何をするのかを簡単に説明してください。 |
| :hammer_and_wrench: | **Repository Link** | <> |
| :open_book: | **Install Guide** | [Discourseにプラグインをインストールする方法](https://meta.discourse.org/t/install-plugins-in-discourse/19157) |

<br>  

### Features
 
プラグインの主な機能を説明します
 
### Configuration
 
プラグインを設定するための詳細な手順を含めます(必要に応じてスクリーンショットを含めます)
 
### Settings 
 
設定とその説明のテーブルを含めます

| Name | Description
|-|-|
|

興味深いことに、Customization > ThemeCustomization > Theme component のテンプレートではこのようにはなっていませんが、それらのテンプレートには見出しが含まれていません。おそらくこれは変更されるべきでしょう。

「いいね!」 4

同意します。私も少しオタク気質で、見出しの階層がきれいであることを好みます。
ですから、物事を正しく行うためには、投稿ではh3、h4、h5のみを使用すべきです。それを「修正」するようなテーマコンポーネントがあると面白いかもしれません。つまり、ボタンからより高い見出しレベルを削除し、トピック内のh3以下のスタイルを「翻訳」して、それらを使用したときに正しく見えるようにするということです。

投稿でさらにレベルが必要な場合に備えてh6もありますが、これは非常に小さいです

H5も投稿内の通常のテキストよりも小さいため、それを使用するかどうかはわかりません

これはh5です
「いいね!」 2

ああ、知りませんでした!Pfaffman氏の「投稿内のヘッダーの最初のレベルはh3であるべきだ」というコメントは、これを説明しているのかもしれません [1]

その場合のCSSハックは次のようになります。

button[data-name="heading-1"], button[data-name="heading-2"] {
  display: none;
}

アクセシビリティに取り組んでいただきありがとうございます。それを念頭に置いて作業を進めています。


  1. source ↩︎

「いいね!」 3

H3~H5のスタイルを調整することは確かに可能ですが、そのままにしておいても問題ないかもしれません。

「いいね!」 2