見出しの目次を2列にしたい - CSSカスタマイズ相談

RE: 見出しの目次を2列にしたい

kobat — Wed, 18 Dec 2024 01:06:20 +0000

すぐに教えて頂き有難うございます。お陰様で早速取り入れました。

RE: 見出しの目次を2列にしたい

大門未知子 — Wed, 18 Dec 2024 00:14:20 +0000

●答え

以下のCSSをコピペ。

/* デフォルトで2列 */
:root {
  --toc-column: 2;
}

/* 表示幅≦834pxのときは1列に変更 */
@media (width<=834px) {
  :root {
    --toc-column: 1;
  }
}

/* 目次幅 */
.toc {
  width: 100%;
}

/* 目次章の列 */
.toc-list {
  display: grid;
  grid-template-columns: repeat(var(--toc-column), minmax(0, 1fr));
  column-gap: 2em;
}

1.png

2.png

見出しの目次を2列にしたい

kobat — Tue, 17 Dec 2024 23:40:28 +0000

COCOONには大変お世話になっています。
数々のカスタマイズを教えて頂き感謝しています。
またかと思われると思いますが、もし可能なら教えて頂きたいと投稿させて頂きました。

見出しの目次は1行になっていますが、これを添付ファイルの様に2行にできたらと思いご相談させて頂くことにしました。可能なら宜しくお願い致します。

サイト　https://tozankai.com/
目次を使用しているページの一つ　https://tozankai.com/post-2283/
（一時的にステータスの制限からPW制限に変えてあります　PW103）

04ae4f498fe6b520643440f96ddc5d18.png