WordPress でのツリー構成図の作成方法

ディレクトリやファイルの構成図（ツリー構造図）を表示させたいと思った事はよくあります。

そこで、今回はリストのブロックスタイルを追加して、CSSだけで簡単に構成図を表現する方法をやってみたいと思う。

まずリストを作成する

以下のように、リストブロックでリストを作成する。
高度な設定で「追加 CSS クラス」を設定する。

以下がリストブロックで作成したリスト。

Geminiテスト
- フォルダ-1
  - テスト-１.rtf
- フォルダ-2
  - テスト-１.rtf

以下のところにCSSクラスを追加する。
これにより、他のリストに影響しないようにすることができる。
以下では「追加 CSS クラス」に「tree-structure」と入れている。

実際にCSSで作成したツリー構成。

Geminiテスト
- フォルダ-1
  - テスト-１.rtf
- フォルダ-2
  - テスト-１.rtf

このレイアウトでは一番左のラインが問題である。一番下まで伸びる必要が無い。
やり方が分からない。

HTMLではこのようになっていると思う。

<ul class="wp-block-list tree-structure">
  <li>"Geminiテスト"
    <ul>
      <li>フォルダ-1
        <ul>
          <li>テスト-１.rtf</li>
        </ul>
      </li>
      <li>フォルダ-2
        <ul>
          <li>テスト-１.rtf</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

上を元に、以下のCSSを作成している。

CSSでツリー構成図を完成させる

以下のソースコードをstyle.cssに記述。

.tree-structure{
  list-style-type: none;
}
.tree-structure ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.tree-structure ul {
  position: relative;
  /* margin-top: 1rem; */
  margin-left: 15px;
}
/*たてライン*/
.tree-structure ul:before {
  content: "";/*入ってくるテキスト*/
  display: block;
  position: absolute;
  top: -2px;
  bottom: 0;
  left: 0px;/*縦ラインの左右位置*/
  width: 0;
  border-left: 1px solid #808080;
}
/*テキスト行間の高さと横の位置*/
.tree-structure ul li {
  position: relative;
  margin: 0;
  padding: 7px15px;
  padding: 0px 0px 0px 18px;
}
/*よこライン*/
.tree-structure ul li:before {
  content: "";
  display: block;
  position: absolute;
  top: 13px;/*上下位置*/
  left: 0px;/*横ラインの左右位置*/
  width: 15px;
  height: 0;
  border-top: 1px solid #808080;
}
/*子のよこライン上下位置*/
.tree-structure ul li:last-child:before {
  top: 13px;
  bottom: 0;
  height: auto;
}