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

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

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

まずリストを作成する

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

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

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

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

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

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

.construction{
  list-style-type: none;
}
.construction ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.construction ul {
  position: relative;
  /* margin-top: 1rem; */
  margin-left: 15px;
}
.construction ul:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-left: 1px solid red;
}
.construction ul li {
  position: relative;
  margin: 0;
  padding: 7px15px;
  /* padding: 0; */
}
.construction ul li:before {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
  left: 0;
  width: 15px;
  height: 0;
  border-top: 1px solid blue;
}
.construction ul li:last-child:before {
  top: 15px;
  bottom: 0;
  height: auto;
  background-color: #fff;
}