Cosense Toolbox
userscript 一覧テーマ作成使い方パーサーGitHub ↗
Cosenseのセクションに番号を表示UserCss
テーマ変更#セクション#見出し#バッジ

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;
}
元のCosenseページを見る ↗

Cosense Toolbox / Cosense をもっと面白く、もっと強力に使うためのツール群

GitHub ↗

マイ・ツールボックス

    積んだ import を1つにまとめてコピー → 自分の設定ページ(ユーザー名ページ)に貼るだけ。