メモ

Honkit でメニューを折り返す調整をした CSS を追加したメモ

Posted on by seigo

Honkit でメニューを折り返す調整をした CSS を追加したメモです。

デフォルトの設定だとこうなる

もしかしたら、最新の Honkit だと解消されているかもしれませんが、自分が使っている Honkit ではメニューがこうなります。

honkit-adding-multiline-menu-tips_01.png

メニュー折り返えさず … で省略されてしまうんです。このおかげで各項目を折り返さなくする気合もできなくはないのですが、丁寧に説明するときに、なかなか日本語ではもじゅ数を少なくすることができない。

white-space – CSS: カスケーディングスタイルシート | MDN

こちらにあるように white-space: normal; を設定することによって折り返したいわけです。

book.json に調整 CSS を加える

book.json でタイトルやプラグインなどを設定していますが、ここに CSS を加えることもできます。

{
  "title": "デジタルハリウッド大学院大学 2023 プロダクトプロトタイピングB 授業資料",
  "description": "2023 授業資料",
  "language": "ja",
  "plugins": [
    "anchors",
    "hide-published-with",
    "copy-code-button",
    "intopic-toc",
    "back-to-top-button"
  ]
}

以下の記述で styles/website 要素を加えます。

{
  "title": "デジタルハリウッド大学院大学 2023 プロダクトプロトタイピングB 授業資料",
  "description": "2023 授業資料",
  "language": "ja",
  "plugins": [
    "anchors",
    "hide-published-with",
    "copy-code-button",
    "intopic-toc",
    "back-to-top-button"
  ],
  "styles": {
    "website": "styles/website.css"
  }
}

この設定、公式の Configuration · HonKit Documentation に書いていないのですが、たしか Honkit のフォーク元（前身）である Gitbook のナレッジで見つけた気がします。

こちらの記事 HonKit のデフォルトテーマの箇条書きのスタイルを微調整した でも言及されていてホッとしました。

styles/website.css の設定

styles/website.css にこちらの CSS を加えます。

.book-summary ul.summary li a,.book-summary ul.summary li span {
    white-space: normal;
}

これは Chrome のデベロッパーツールで、対象の要素を割り出して white-space: normal; を設定しています。

honkit-adding-multiline-menu-tips_00.png

設定したあとに、書き出してみると、無事折り返してくれます。

とはいえ 1 行で無理だとしても 2 行で収まるくらいの文字数にしないと、やはり見栄えが悪いのでがんばっていきたいところです。

seigo