目次のスタイルを変えてみる公式テーマを変更するのに思いの外ハマってしまった

ちょっと前に目次をちょっとだけカスタマイズしました。

www.foto2strada.com

そのときにせっかくなので目次のスタイルを変更しようと思ったのですが、思いの外ハマってしまったのでまとめてみたいと思います。

目次のカスタマイズにCSSを触るが。。。

目次のスタイル変更にCSSの変更を行いました。
CSSを変更するには、設定の「デザイン」→「カスタマイズ」→デザインCSSで変更をすればOK(なはず)
はてなブロの場合、目次は.table-of-contentsで定義されているので、デザインCSSの一番下に定義をした上げればいいはず。
変更前は以下の状態だったのを

やりたいことは以下のことでした。

背景色を白色にすること
「目次」を消すこと(目次が2重に表示されてしまうので)
目次に青枠をつけること

定義するCSS設定は以下のように記述。

.table-of-contents {
position: block;
background: white;
display: none; /* 目次の表示を消す */
border: solid 3px #6091d3; /*線*/
padding: 35px 10px 15px 35px ; / * パディングの設定 */
border-radius: 10px; /*角の丸み*/  font-size: 14px;
}
.table-of-contents::before {
display: none;
}

これでうまくいく・・・なのだが、いくら定義してもうまくいかず。
以下の図のように、目次を消すことはできたのですが消えたところにコンテンツが上に移動せずにアンバランスな形に。

CSSは下部に記載したものが適用されるはずなのに？？と悩んでしまいました。

変更されなかった理由は？

いろいろ調べてみると変更できなかった理由は、インストールしたテーマにあったようです。
CSSの記述で「!important」と記載するとそのスタイルが優先されるようです。
このためにいくら下部に記載しても反映されなかったというオチでした。

解決策は？

じゃあ、次にどう解決すれば良いのか？
インストールしたテーマは、以下のような記述で直接記述されていないので困ったことに。

/* <system section="theme" selected="8599973812270629022"> */
@import "https://blog.hatena.ne.jp/-/theme/8599973812270629022.css";
/* </system> */

調べてみると、解決策がありました。
結論は「インストールしたテーマを直接デザインCSSに記載してしまうこと」

方法は
1. @importに記述しているURLを直接ブラウザで表示してそのCSSをすべてコピペして、はてなブログのデザインCSSに「まるごと」コピー！
1. 上記CSSの該当箇所の!importantの記述を削除

変更前

.table-of-contents {
position: relative;
background-color: #ECEEF1;
padding: 45px 10px 15px 35px !important;
border-radius: 6px;
font-size: 14px;
line-height: 28px;
}

変更後

.table-of-contents {
position: relative;
background-color: #ECEEF1;
padding: 45px 10px 15px 35px ;  /* !importantを削除！！ */
border-radius: 6px;
font-size: 14px;
line-height: 28px;
}