Hikiメモ::目次部分のスタイルを変えたい

概要

{{toc}}をCSS指定可能にするだけで、ユーザビリティが向上する

{{toc}}は便利なんだけど・・・

{{toc}}と書くことでページ内の目次が生成される機能は、すばらしく便利です。

が、ちと残念な事が。生成されたページのHTMLを見ると、裸の<UL><LI>がずらずらと並んでいるだけで、他の箇条書き項目と見分けがつかないのです。

ユーザビリティの観点から、これは看過できない問題です。というのも、

• ユーザーが目次と"単なる"箇条書きを区別できない
• 結果、ユーザビリティ向上のために設置したtocがその役を果たさない

な、なんだって~(AA略)

素人を舐めてはいけません。放っておくといくらでも勘違いします。

結果として、親切で設置したつもりの{{toc}}が仇となってしまうのです。

カスタマイズ手順

とまあそんなワケで、さっそくHikiのカスタマイズに取り掛かりました。

ソースを見ると、どうやらhtml_formatter.rbで{{toc}}のフォーマットを決めているようです。

hikiインストールフォルダ/style/defaultのhtml_formatter.rbで、

def toc
s = "<ul>\n"
＜中略＞
s << ("</ul>\n" * level)
s
end

の部分を、

def toc

s = "<div class=\"toc\"><ul>\n"

＜中略＞

s << ("</ul></div>\n" * level)

s

end

と書き換える。

こうすることで、{{toc}}で生成される目次部分がtocクラスを持つdiv要素で囲まれます。

動作確認

div.tocのスタイル指定を追加して、動作確認。

Before:

After:

ふーむ、かなり分かりやすくなりました。

あとは目次部分に「目次」と一言添えれば、完璧でしょう。