Cocoon-grayishの目次を小さくする

現在、このブログではWordPressテーマの「Cocoon」と、そのスキン（子テーマ）である「grayish」を使用しています。

grayishは全体的にシンプルでおしゃれなデザインが気に入って使い始めましたが、ひとつ気になる点がありました。
目次のサイズが大きく、ファーストビューを占有してしまうのです。

そこで、見た目はあまり変えず目次のサイズを小さくすることにしました。
以下はそのメモです。

修正結果

before_after

コンパクトになりました。

目次のサイズを小さくする手順は以下です。

以下のCSSコードを追加します。※paddingの値は好みで調整

/*Cocoon-grayishのカスタマイズ　目次の項目間の余白を狭くする*/
.skin-grayish .tnt-number .toc-list>li, .skin-grayish .toc .toc-list>li{
padding: 0.25em 0 0.25em 2em;
}

親テーマのCocoonだけを使用している場合、cssは.toc-contents ul li のmarginを調整すれば済むはずでした。しかし今回はgrayishを使用しているため、スキン側で追加されているCSSを上書きする必要があります。

上書きするべき箇所は
.skin-grayish .tnt-number .toc-list>li と
.skin-grayish .toc .toc-list>li の2箇所あったため、両方ともに狭めのpaddingを指定しました。

これによりgrayishのデザインになるべく手を加えず、目次を小さくできます。
（なお最初は文字サイズも調整しようとしましたが、タップ領域が狭くなりすぎるのでやめました。）

grayishでは　Cocoon 設定 > [目次]タブ > 目次ナンバーの表示　から、
先頭のマークが数字以外のものも選べたようです。

UI_目次ナンバーの表示

試しに[数字（デフォルト）]以外を選んでみたところ先程の設定だと崩れてしまいました。。
他の表示を選ぶ場合は、別途コンソールからセレクターを確認して修正する必要がありますね。