目次ボタンをCSSのみで追加する方法

表1に示す項目を設定をします。

以下のコードをjavascript.jsに追加します。

jQuery(function ($) {
  // 目次内のリンククリックの場合
  $('.toc a').click(function() {
    // 目次を閉じる
    $('.toc-checkbox').prop('checked', false);
  });
});

以下のコードをstyle.cssに追加します。

.main {
  z-index: 1;
}

.toc-checkbox {
  display: none;
}

/* 目次コンポーネント */
.entry-content .toc {
  border: 0;
  display: block;
  inset: auto 0 0 0;
  margin: 0;
  padding: 0;
  position: fixed;
  width: auto;
  z-index: 1;

  /* 閉じた状態 */
  .toc-content {
    box-shadow: 0 -100vh 0 100vh rgb(0 0 0 / 0%);
    height: 0;
    opacity: 1;
    padding: 0 10px;
    transition: height 0.3s, padding 0.3s, box-shadow 0.3s, visibility 0.3s, opacity 0s 0.3s;
    visibility: hidden;

    /* ヘッダー閉じる用領域 */
    &::before {
      border-bottom: 1px solid #eee;
      border-radius: 15px 15px 0 0;
      content: '\f00d';
      font-family: 'Font Awesome 5 Free';
      font-size: 20px;
      font-weight: 900;
      height: 40px;
      inset: 0;
      line-height: 1;
      position: absolute;
      text-align: center;
    }
  }

  /* 目次ボタン */
  .toc-title {
    align-items: flex-end;
    bottom: 100%;
    box-sizing: content-box;
    display: flex;
    font-size: 14px;
    height: 40px;
    justify-content: center;
    margin: 0 0 -40px;
    padding: 40vh 0 0;
    position: absolute;
    width: 100%;
    z-index: 1;

    &::before,
    &::after {
      bottom: 65px;
      color: #fff;
      display: block;
      position: fixed;
      right: 10px;
    }

    /* ボタンアイコン */
    &::before {
      content: '\f0ca';
      font-family: 'Font Awesome 5 Free';
      font-size: 20px;
      font-weight: 900;
      line-height: 40px;
      margin: 0 0 10px;
      transform: rotate(0);
      transition: transform 0.3s;
      width: 50px;
      z-index: 1;
    }

    &::after {
      background-color: #333;
      border-radius: 50%;
      box-sizing: border-box;
      content: '目次' !important;
      font-size: 11px;
      height: 50px;
      line-height: 1;
      padding: 32px 0 0;
      text-decoration: none;
      width: 50px;
    }
  }

  /* 開いた状態 */
  &:has(.toc-checkbox:checked) {
    .toc-content {
      background-color: #fff;
      border-radius: 15px 15px 0 0;
      box-shadow: 0 -50vh 0 0 rgb(0 0 0 / 30%), 0 0 5px rgb(0 0 0 / 30%);
      height: 60vh;
      opacity: 1;
      overflow-y: auto;
      padding: 50px 20px;
      visibility: visible;
    }

    .toc-title {
      height: 0;
      padding: 0;

      /* ボタンアイコン */
      &::before {
        content: '\f00d';
        transform: rotate(180deg);
      }
    }
  }
}