続続・はてなブログのデザインCSSとtoc

はてなブログのCSSをいじっていたら、とんでもない事実を発見しました。

デザインCSSの編集
はてなブログでtoc (table of contents)
Markdownモードの記事の再編集、デザインCSSの再編集
終わりに
- 現在のデザインCSS
蛇足 tocについて

デザインCSSの編集

今までのブログで書いたように、このブログのデザインはデザインテーマhandwritingに、ちょこっとだけデザインCSSで上書きしたものとなっています。私は主にMarkdownモードで記事を書いているのですが、今回はh1とかh2のデザインも変えたくなり、h1からh6までの設定をデザインCSSに追加してみました。(Chromeの開発者ツールは相当cssの編集に役に立ちます。)いい感じになったので、これで行こうと思ってたんですが、、、

はてなブログでtoc (table of contents)

ふと、ブログの記事にtoc (table of contents, 目次)をつけてみたいと思いました。調べてみると、はてなブログでは目次記法としてtocを生成してくれる機能が提供されていて、どの編集モードでも[:contents]を書けばtocを挿入できるようです。(ただ、handwritingだと挿入されるものは相当シンプルなので、cssでカスタマイズするのがいいようです)

staff.hatenablog.com

と、ここである新事実を発見しました。

Markdownには、#から######まで、それぞれh1からh6の6段階に対応した見出しの記法があります。

はてなブログでは、記事内の見出しとしてh3からh5を想定しているので、上記のうち###から#####を使用して記事を書くとよいでしょう。

私はMarkdownモードでは##から使って書いていたのでびっくりしました。なんかh1を使うのはまずいのかな〜と思って##を見出しの最上位にしてたんですが、どうやら###を最上位にするのがいいそうです。そして見出しの最下位は#####までがいいそうです。

そういえば、見たままモードで指定できる見出しは3段階(大見出し、中見出し、小見出し)ありました。見たままモードで書いた記事のDOMを開発者ツールで見てみると、確かに見出しはh3からh5となってました。

Markdownモードの記事の再編集、デザインCSSの再編集

まあ、いちいち書き直さなくてもいい気はするんですが、はてなブログさんの想定にそってない記事というのは気持ち悪いので、Markdownモードで書いた記事を書き直します。と言っても、見出しを###から#####までを使うようにするだけです。

そして、せっかくいい感じにできたh1からh6のデザインCSSも書き直します。というか###から#####までしか使わないなら、h3、h4、h5だけ設定すればいいような気もします。

終わりに

Markdownモードはh1からh6まで指定できるのがいいところというのもあるんですが、最初の頃の記事は見たままモードで書いていたので、その記事も共通のデザインCSSでいい感じに表示するために、Markdownモードでも###から#####を使って書くのがいいと思いました。ということで、見出しのデザインCSSはh3、h4、h5だけ設定します。

追記
なんだかSEO的にはh2を最上位にしていた今までの方が良かったっぽいです。というか、見たままモードはHTMLを直に編集できるのを忘れていました。Markdownモードの記事ではなく、見たままモードで書いた記事を書き直した方が良かったのかもしれません。
追記終わり

ところで、開発者ツールで見てみるとデザインテーマではh1からh6までCSSの設定がされているのがわかります。handwritingのcssソースファイルは特に配布されてるわけではないので、何のセレクタにどういう設定がなされているのかわかりづらいと思いました(もちろん開発者ツールのソースから見ればいいんですが...)。

あと、話題に出したのでこの記事には一応tocをつけてみました。つけてみたいと言っておいてなんですが、別にいらないかなと思いました。cssはハイポジさんの記事を参考にしました。

現在のデザインCSS

今までの記事に書いたものも含めて、今のところのデザインCSSを記しておきます(@importは除く)。

pre.code {
    margin: 0 0 2em;
    border: none;
    background: #f6f6f6;
    /* border-radius: 2px; */
}

.entry-content h3 { /* 140% */
    font-size: 150%;
    font-weight: 600;
    padding-left: 40px;
    background-size: 30px 15px;
    border-bottom: solid 1px #ace0e3;
}

.entry-content h4 { /* 130% */
    font-size: 120%;
    font-weight: 600;
    padding-left: 30px;
    background-size: 20px 10px;
}

.entry-content h5 { /* 120% */
    font-size: 105%;
    font-weight: 600;
    padding-left: 0;
    background-image: none;
}

.entry-content p {
    line-height: 1.75;
    margin: 0 0 2em;
}

.entry-content a[href] {
    color: #6ca0a3;
}

.entry-content ul {
    margin: 0 0 2em;
}

.entry-content blockquote {
    color: #928346;
    margin: 0 0 2em;
}

.table-of-contents:before {
    content: "Table of Contents";
    font-size: 120%;
    font-weight: 600;
}

.table-of-contents {
    padding: 10px 10px 10px 50px;
    border: solid 1px #ace0e3;
    border-radius: 10px;
}

.table-of-contents ul {
    margin: 0;
}

蛇足 tocについて

HTMLのアンカーリンクすらよくわかってなかったので、ちょっと困惑してました。普通webページのtocはページ内アンカーで実現されているみたいです。つまり、h1などの見出しに対して<h1 id="hoge">Hoge</h1>のようにしてidを設定すれば、<a href="#hoge">Hoge</a>というページ内アンカーを作れるので、アンカーリンクをリスト(ul、li)で表記したものをtocとしているようです。

ということで、純粋にHTMLでtocを実現したいなら、それぞれの見出しにidをつけるのと、idへのアンカーリンクのリストを書くのを自分でする必要があります。でも、tocはlatexのように自動で生成してくれると便利です。自動でtocを生成してくれるJavaScriptやツールなどがあるようです。

markdownでtoc

昨今、ユーザはHTMLではなくmarkdownを書き、サーバがmarkdownからHTMLを生成し、生成されたHTMLがWebページとして提供される、という形態がよくみられます。例えば、markdownで記事が書けるはてなブログやQiita、レポジトリのmarkdownファイル(README.mdとか)がHTMLに変換されて表示してくれるGitHubなどです。これらのmarkdownからHTMLへの変換部分はどれも異なるため、ページ内アンカーを使ってtocをつけるのに何が必要かちょっと混乱したのでメモしておきます。

はてなブログ

目次記法があるので、[:contents]を挿入すればいいです。markdownの変換に関してですが、[:contents]を挿入した記事では### Hogeは<h3 id="hoge">Hoge</h3>と変換されるようです。よってページ内アンカーを使ったtocが実現できます。idは見出しの中の文字から自動的に生成されるようです。

目次記法を使わずに自分でtocを書くことについてなんですが、Markdownモードではmarkdown記法での見出し(###とか)にidを設定することはできません。ただし、HTMLを直で書くことはできるので、markdownの中に### Hogeではなく、<h3 id="hoge">Hoge</h3>みたいに書けば、見出しにidを設定できます。そのidを使えばページ内アンカーを書いてtocにできるはずですが、面倒なのでオススメしません。

Qiita

自分はQiitaで記事を書いてみたことはないので、見出しが使われている任意の記事のDOMを見ただけです。Qiitaはそもそも標準で右下にtocを表示してくれています。

ただ、記事中にtoc(または、ページ内アンカー)を書きたいと思うことがあるかもしれません。Qiitaでははてなブログのように###をHTMLに書き換える必要はありません。なぜならQiitaはmarkdownからHTML変換時に、見出しにidを付与してくれているからです。DOMを見てみると<h1> <span id="(何とか)" ...のようになっています。このidを使えばHTMLを書かずにページ内アンカーを作れ、tocが書けると思います。(idが日本語のときは、アンカー先にはURL encodingしたものを設定すべきらしいです)

GitHub

これも自分でレポジトリを作ったことはないので、見出しが使われている任意のmarkdownファイルのDOMを見ただけですが、なんだか複雑怪奇でした。結論としてはQiitaと同様に見出しにidが付与されてるので、それを使えばいいのですが、どうして付与されてるのかわかりませんでした。

DOMを見た限り、見出しにはid="user-content-(なんとか)"が付与されているので、アンカーリンクではそのidしか指定できない気がするのですが、実際はhref="#(なんとか)"で指定できます。DOMを見ただけではよくわかりませんでした。

markdown-toc

上のようなことを、わざわざ調べたのはmarkdown-tocというEmacsのパッケージを使ってみたかったからでした。

はてなブログでこれを使ってtocを挿入しても、想定するアンカー先(見出し)にidが設定されてないため、アンカーリンクが機能しないんですが、最初はさっぱりわかってませんでした。多分QiitaとかGitHubならちゃんとページ内アンカーが機能すると思います。

また、このパッケージでは最上位の見出しは#からでないとといけないという制限があるようです。このことからも、このパッケージははてなブログのMarkdownモード用途には向いてないと思いました。

参考

markdownのtocについては以下の記事がとても参考になりました。

qiita.com

つーさにブログ

つうさにのメモ用ブログ