インデントレベルごとに行頭文字を変更
インデントのレベルごとに違うバレットを表示する
インデントが複雑なちょっと長いページを作るとき、いきなり何レベルも戻そうとすると、前の行が見えなくて、レベルを間違えてしまうことがあります。
このようなとき、インデントのレベルごとに違う行頭文字を表示できるようにしました。
サンプルは、５段階まで行頭文字を定義してあり、第６レベルからは通常のドット表示に戻ります。
関連するUserCSS
style.css/* インデントレベルごとに行頭文字を切り替えるスタイル指定*/
/* メニューのHide Dotと連動する */
/* この例では、第５レベルまでの行頭文字を指定。第６レベルからはドットに戻る */
/* すべてのビュレット文字に共通の設定 */
.line .indent-mark .dot:before {
display: block;
position: absolute;
right: -5px;
top: -10px;
color: #555;
}
/* 第１レベルのインデント（c-0）の設定 */
/* ドットはバックグラウンドカラーなので透明にする */
/* セレクタとして
.line .indent-mark .dot { ... }
を使うとインデントレベルごとに
background-color: transparent;
を指定する必要はないが、指定のないレベルのドットが消える
*/
.line .indent-mark .c-0 + .dot {
background-color: transparent;
}
/* このレベルの行頭文字を表示 */
.line .indent-mark .c-0 + .dot:before {
content:"◎";
}
/* 以下同様 */
.line .indent-mark .c-1 + .dot {
background-color: transparent;
}
.line .indent-mark .c-1 + .dot:before {
content:"★";
}
.line .indent-mark .c-2 + .dot {
background-color: transparent;
}
.line .indent-mark .c-2 + .dot:before {
content:"▶";
}
.line .indent-mark .c-3 + .dot {
background-color: transparent;
}
.line .indent-mark .c-3 + .dot:before {
content:"■";
}
.line .indent-mark .c-4 + .dot {
background-color: transparent;
}
.line .indent-mark .c-4 + .dot:before {
content:"□";
}