ディレクトリやファイルの構成図（ツリー構造図）を表示させたいと思った事はよくあるが、方法が分からない。そこで、今回はリストのブロックスタイルを追加して、CSSだけで簡単に構成図を表現する方法をやってみた。
まずリストを作成する
以下のように、リストブロックページに追加する。
リストブロッックで以下の様に階層を作成。
- 第１階層
- 第２階層
- 第３階層
- 第２階層
- 第２階層
リストにCSSクラスを追加する
作成したリストを選択、左サイドバーで「高度な設定」を開いて「追加 CSS クラス」にクラス名を設定。
以下では「追加 CSS クラス」に「tree」と入れている。
これにより、他のリストに影響しないようにすることができる。
実際にCSSで作成したツリー構成。
- 第１階層
- 第２階層
- 第３階層
- 第２階層
- 第３階層
- 第２階層
HTMLではこのようになっていると思う。
<ul class="wp-block-list tree">
<li>第１階層
<ul>
<li>第２階層
<ul>
<li>第３階層</li>
</ul>
</li>
<li>第２階層
<ul>
<li>第３階層</li>
</ul>
</li>
</ul>
</li>
</ul>上を元に、以下のCSSを作成している。
CSSでツリー構成図を完成させる
以下のソースコードをstyle.cssに記述。。
/*リストの⚫︎を消す*/
.tree li {
list-style-type: none;
margin: 0px 0px 0px 15px;
padding: 0;
position: relative;
}
/*各リストの左からの位置*/
.tree ul li {
position: relative;
margin: 0px 0px 0px 0px;
padding: 5px 0px 0px 20px;
}
/*リストの前に横ラインを入れる*/
.tree ul li:before {
content: "";
display: block;
position: absolute;
top: 18px;
left: 0;
width: 13px;
height: 0;
border-top: 1px solid #666;
}
/*リストの横ラインの前に縦ラインを入れる*/
.tree ul li:after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 0;
height: 100%;
border-left: 1px solid #666;
}
/*縦ラインの下の余分なラインを消す*/
.tree ul li:last-child:after {
height: 18px;
}
/*最上位の余分な縦横のラインを消す*/
.tree > ul > li:before,.tree > ul > li:after {
/* 最上位も線を表示する時はコメント化 */
border: none;
}
/*フォルダアイコンを入れる場合このスタイルが適用される*/
.tree i {
margin-right: 8px;
}