ここでアフィリエイターデビューしませんか?
このサイトで学べることは?

【カスタマイズ】Cocoonの目次をカスタマイズする

メニュー 2.サイトの作り方
スポンサーリンク

Cocoonは最初から目次が綺麗に表示されているため、
カスタマイズの重要度としては低いですが、
サイトの雰囲気によってカスタマイズするほうがいい場合もあります。

/***** cocoon 目次スタイル *****/
.toc {
    border-left: 5px double #cccfd2;
    border-right: 5px double #cccfd2;
  border-top: 5px double #cccfd2;
  border-bottom: 5px double #cccfd2;
    margin: 0 35px 10px;
}

.toc a {
    color: #666;
}

.toc-title {
    background-color: #f3f4f5;
    font-size: 20px;
    font-family: "M PLUS Rounded 1c";
}

.toc-content {
    font-size: 16px;
    font-family: "M PLUS Rounded 1c";
}

.toc.tnt-number-detail ol {
    font-weight: 700;
}

span[id^="toc"] {
    padding-top: 1.5em;
}

/* 目次ウィジェット */
.nwa .toc {
    border: 0;
  width:100%;
    border-left: 5px double #cccfd2;
    border-right: 5px double #cccfd2;
  border-top: 5px double #cccfd2;
  border-bottom: 5px double #cccfd2;
}

/***** cocoon 目次スタイル *****/
.toc {
    margin: 0 auto 15px;
}
span[id^="toc"] {
    padding-top: 1.7em;
}

コメント