JINカスタマイズ｜サイドバーの目次

カスタマイズは自己責任にてお願いします（カスタマイズ前にバックアップ推奨）。コードを記入してもうまく反映されない場合があります。このカスタマイズは、あくまでもぼくのサイトで行ったものです。

この記事では

サイドバーの目次をカスタマイズをしてみました。

長い目次のときはスクロールできるように、上にイラストも入れてみました。

BEFORE

AFTER

MENくん

スクロールバーと画像を追加したよ

くま３号

いや、目次の内容、、、、

こんな感じで横にいるよ

[toc]

Contents

カスタマイズの準備
1. 目次の設定
2. コードを記入する準備
カスタマイズのコード
1. ここのコードをコピペ
まとめ

カスタマイズの準備

目次の設定

外観＞ウィジェットでTOC+をサイドバー追尾【PC】部分に追加しておきましょう。

TOC＋以外にサイドバー追尾になにか入っているとうまくいかないかもしれません。ごめんなさい。

コードを記入する準備

子テーマを使用している方は、style.cssを開いてください。追加CSSでちゃちゃっと終わらしたい方は、こちらの記事を参考にしてください。

カスタマイズのコード

下記のコードを子テーマもしくは追加CSSに追記してください。

ここのコードをコピペ

コード

/*--------------------------------------
  サイトバーの目次
--------------------------------------*/
.toc_widget .widgettitle.ef {
    margin-bottom: 0px;
    border: none!important;
    border-radius: 0;
}
.toc_widget ul {
    background: white;
    padding: 20px 0px 20px 40px;
    border: 1px solid #424242;
    line-height: 1.8em;
    max-height: 250px;
    overflow-y: auto;
}
.toc_widget ul li {
    list-style: decimal;
}
.toc_widget ul li ul {
    border: none;
    padding: 2px 0px 2px 20px;
}
.toc_widget ul li ul li {
    list-style: disc;
}
.toc_widget a:hover {
    color:#424242;
    opacity: .7;
}
.toc_widget .widgettitle.ef:before {
    content: url(画像.png);
    display: block;
  width:25%;
  margin:0 auto;
}
@media (min-width: 1024px){
.sidebar_style4 .widget:last-child {
    margin: 0px 0 -15px;
}}