
テーマ変更#セクション#見出し#バッジ
Cosenseのセクションに番号を表示UserCss
セクション(見出し)の横に、連番入りの緑色の丸いバッジがつきます。1つ目、2つ目…と自動で番号が振られるので、見出しの数や順番がひと目で分かり、ページの構成を把握しやすくなります。手順や章立ての多いページで特に便利です。
入れるだけで自動的に番号がつきます。
デモ
疑似Cosenseページ・ライブプレビュー
インストール
設定ページの code:style.css に貼る
@import url('/api/code/cosense-toolbox/Cosenseのセクションに番号を表示UserCss/style.css');
ソースコード全文を見る(CSS)
.app {
counter-reset: section;
}
.app:not(.presentation) .line.section-title:not(.line-title) {
position: relative;
}
.app:not(.presentation) .line.section-title:not(.line-title):after {
z-index: 1000;
counter-increment: section;
content: counter(section);
display: inline-block;
width: 1.6em;
height: 1.6em;
position: absolute;
top: -10px;
left: -55px;
background-color: #52ba68;
border-radius: 50%;
color: #fff;
font:
600 normal 90%/1.6 "Century Gothic",
Arial,
sans-serif;
text-align: center;
white-space: nowrap;
}