【JIN】目次の余白を調整するカスタマイズ

JINをスマホから見たとき、目次の余白が広すぎるのでカスタマイズしました。

▽Before

▽After

事前準備

このカスタマイズはスタイルシートを編集します。

親テーマを使っているとアップデートなどに対応出来ないので、子テーマのインストールを推奨します。

子テーマのダウンロードは公式サイトからどうぞ。

親テーマがインストールされている状態で、小テーマをインストール・有効化するだけで使えるようになります。

カスタマイズ方法：style.cssの編集

子テーマを有効化したら、ダッシュボード＞外観＞テーマの編集にアクセスします。

最初から記入されている文字の下に、下記コードをコピー&ペーストします。

コードをコピー&ペースト

/*目次の余白*/
@media (max-width:767px){
	#toc_container .toc_list {
		padding: 0 10px 20px 10px;
	}
	#toc_container .toc_list > li {
		padding-left: 25px;
	}
	#toc_container .toc_list > li > ul > li {
 	   padding-left: 20px;
	}
}

コピペしたら、「ファイルを更新」をクリックして完了です。

動作確認

目次が表示されている記事を開いて、CSSが反映されているか確認してみましょう。

このカスタマイズはスマホ表示のみ適用なので、動作確認にGoogleChromeのデベロッパーツールを利用します。

デベロッパーツールは色々なことが出来るので、使えるようになると便利ですよ😊

おまけ

パソコンから見たときに、第一階層だけ太字にするカスタマイズ。

/*目次を太字にする*/
@media (min-width:768px){
	#toc_container .toc_list > li > a{
		font-weight:bold;
	}
}