JIN

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

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

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

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

BEFORE
カスタマイズ前


AFTER

カスタマイズ後

MENくん
MENくん
スクロールバーと画像を追加したよ
くま3号
くま3号
いや、目次の内容、、、、
こんな感じで横にいるよ
横にずっといる目次

[toc]

カスタマイズの準備

目次の設定

目次の設定

外観>ウィジェットで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;
}}
メンくん
コードの説明はしないよ!調べてもわからなかったら聞いてください
画像を入れる場合はPNGがおすすめです。

まとめ

PC表示のときだけですが、目次がサイドにあると見やすいかもしれませんね。

SANGOのメインカスタマイズ(?)サイトはこちら

ここにボックスタイトルを入力

 

関連記事