課題
Qiitaの記事のマークダウンで#で始まる行はh1、##の場合はh2という記法があります。
前々から思ってたのですが、フォントサイズがちょっと違うくらいだと、違いがわからない。つまり今どのレベルを読んでいるのかわからなくなります。
この記事では、Qiitaでの根本的な解決方法ではなく、自作のブログシステムとかでMarkdownを読み取ってh1とかを書く場合の話が主です。
具体的には、1.1.2. みたいな微妙なパラグラフのとき、1.1.2.なのか、1.2.なのか、実は2.なのか、みたいな。右に出るインデックスみたいなとこではちゃんと字下げされてるんですけど。
本来のhighlightの役割から外れるけど、ここでやってみますと、、、ここからサンプル↓
1. トップ（h1）
文章サンプル１２３。。。
1.1. ひとつ下げた２つ目（h2）
文章サンプル１２３。。。
1.1.1. ３つ目（h3）
文章サンプル１２３。。。
1.1.1.1. ４つ目、段落細かすぎ（h4）
文章サンプル１２３。。。
1.1.2. ３つ目の２（h3）
文章サンプル１２３。。。
1.2. ２つ目の２（h2）
文章サンプル１２３。。。
2. トップの２つ目（h1）
文章サンプル１２３。。。
2.1. ２つ目の１つ目（h2）
文章サンプル１２３。。。
↑サンプルここまで。
並べると違いはわかりますね。でも1.2、2.、2.1のあたりはやっぱり混沌。
Qiitaの場合は、h1とh2が区別しづらいです。一番よく使うのに。
対応方法
Qiitaに関しては、上のように、「1.1.2」とかを書いていくしかないかなと思いました。
先にも触れたように以下では、自分でブログサイトを作っててhtmlやcssをいじれる場合の対応についてです。「1.1.2」とかを都度書いてもいいですけど。
暫定解：文字列「#」でレベルを表現しちゃう
自作のサイトでは実際やってみてますが、h1の場合は「#」を、h2の場合は「##」を、文字列として直接書く方法です。これはCSSで、
h1:before {
content: "# ";
}
h2:before {
content: "## ";
}
でできます。
自作のサイトならQiitaと違ってもっと他の表現方法で違いを出せるから、もしかしたら「#」なんて入れなくていいかもしれないですが、これでしばらく様子を見てみます。違和感があったらなくすかもしれません。