スポンサーリンク

note風スタイル第4弾!目次のデザイン

「note風スタイル」ということで、ブログのスタイルシートを編集しています。

今回は、目次について。

主な変更点は……
  • 文字を細く・小さく・薄く
  • 背景色をグレーに
  • 項目の間に線を追加

noteの目次の特徴は、「控えめ」なこと。

記事によっては目次を付けていないものも多いです。

目次(table of contents)のHTML構造
  • .toc
    • .toc-title
    • .toc-content
      • ol.toc-list
        • li
          • a

リスト構造(ol, li)とアンカーリンク(a)の関係で、かなり複雑な入れ子になっていますね。

それを踏まえてスタイルシートはこちら。

スポンサーリンク

まずは全体

/* 目次のデザイン */

.article .toc {
  border-color: white;
  background-color: #f7f9f9;
  width: 100%;
  padding: 16px;
}

全体的なデザインを変更しました。

タイトル部分

/* 目次のタイトル */
.article .toc-title {
  text-align: left;
  color: #585c5b;
  font-size: 16px;
  font-weight: 600;
  padding: 0px;
}

.article .toc-title::before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  content: "\f0d7";
  margin-right: 0.4em;
  margin-left: 0.0em;
  transform: scale(1);
  color: #585c5b;
  font-size: 16px;
  font-weight: 700;
}

リスト部分。

/* 目次の項目 */
.toc-content {
  color: #585c5b;
  font-size: 16px;
  font-weight: normal;
}

.toc ol.toc-list {
  margin: 0;
  padding-left: 0;
  list-style-position: inside;
}


.article .toc-list>li {
  padding: 8px 0;
  border-top: 1px solid #d6d6d6;
}

.article .toc-list>li a {
  color: #585c5b;
  padding: 0px;
  font-weight: normal;
}

.article .toc-list>li:first-child {
  padding-top: 8px;
  border-top: none;
}

目次の第2階層

特に第2階層は、list-styleを変更しています。

/* 目次(第2レベル) */

.article .toc-list>li li {
  list-style: none;
  padding-left: 0.4em;
}

.toc-list>li li a {
  font-weight: normal;
}

.toc-list>li li ::before {
  display: inline-block;
  position: relative;
  content: '';
  width: 4px;
  height: 4px;
  left: -0.4em;
  top: -0.2em;
  margin-bottom: 4px;
  border-radius: 100%;
  background: #585c5b;
}

ブログ村ランキングに参加しています。
ポチっと応援していただけると嬉しいです。

PVアクセスランキング にほんブログ村 ブログランキング・にほんブログ村へ
ニッチな話題 ホームページ運用
\記事が役に立ったらシェアしてね/
ちいラボ
タイトルとURLをコピーしました