HTML&CSSでツリービューを作成する【WordPress】

style.cssに下記のコードを貼り付ける

WordPressサイトの場合は、子テーマを有効にしているなら子テーマのstyle.cssに、子テーマがないなら追加CSSに記述する。

ツリービュー用スタイルを、treeというクラスで適用できるようにする。

/**
 * ulタグをツリーマップにする
 */

ul.tree {
  list-style-type: none;
  padding: 20px 30px;
  background-color: #2d2d2d;
  color: #ccc;
}

.tree ul{
position: relative;
margin: 0;
margin-left: 30px;
padding: 0;
list-style-type: none;
}
.tree ul:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
border-left: 1px solid #ccc;
}
.tree ul li {
position: relative;
margin: 0;
padding: 5px 25px;
}
.tree ul li:before {
content: "";
display: block;
position: absolute;
top: 15px;
left: 0;
width: 15px;
border-top: 1px solid #ccc;
}
.tree ul li:last-child:before {
top: 15px;
bottom: 0;
height: auto;
background-color: #2d2d2d;
}

ツリービューにしたいコンテンツをulタグで記述する

ulタグをツリーマップ化し、作成コストを抑えられる。

<ul class="tree">
  <li>themes
    <ul>
      <li>parentーtheme
        <ul>
          <li>functions.php</li>
          <li>style.css</li>
        </ul>
      </li>
      <li>child-theme
        <ul>
          <li>functions.php</li>
          <li>style.css</li>
        </ul>
      </li>
      <li>index.php</li>
    </ul>
  </li>
</ul>

ツリービューの親ulタグに、クラス名を付与する

実装手順 ① で設定したtreeというクラスを、親ulタグに付与する。

<ul class="tree">
  <li>themes<ul>
      <li>parentーtheme<ul>
          <li>functions.php</li>
          <li>style.css</li>
        </ul>
      </li>
      <li>child-theme<ul>
          <li>functions.php</li>
          <li>style.css</li>
        </ul>
      </li>
      <li>index.php</li>
    </ul>
  </li>
</ul>

WordPressの場合は、リストブロックを選択し、右パネルの高度な設定＞追加CSSクラスの入力欄にtreeと入力する。

実装完了

• themes
  • parentーtheme
    • functions.php
    • style.css
  • child-theme
    • functions.php
    • style.css
  • index.php