AFFINGER5のアップデートでSUGOI MOKUJI(すごいもくじ)のデザインが崩れたので、手動で直せる方法を見つけ出しました！
カラフルだった目次の一部タイトルが黒色に・・・
本記事ではプログラミングが苦手な人でも、5分程で作業が完了できる方法を紹介していきます。
早速、復旧させていきましょう！
SUGOI MOKUJIの設定を変更
はじめに機能しなくなった目次機能の設定画面を開き、CSSスタイルの欄にチェックを入れます。
CSSが切れると、目次デザインは以下のように変更されます。
崩れた原因のコードを修正
今回はcssと言う部分のコードを修正していきます。
まずはプラグイン内にある、目次のデザイン設定が書かれているコードを見つけに行きましょう！
探し方は、プラグイン→プラグイン編集
→右上の編集するテーマを｢SUGOI MOKUJI｣に選択
｢assets｣→｢css｣→｢style.css｣でコード画面を呼び出す。
3行目以降の全てのコードをコピーして、外観→カスタマイズ→追加CSSにコピーしたコードを貼り付けます。
h3タイトルを黒色表示させるコードを削除する
h3の見出しタイトルを黒くしているコードは98行目あたりに書いてあります。
今から行う修正が最後の工程です！
修正するコードは以下にあります
#st_toc_container .st_toc_list li a {
display: block;
padding: 5px;
border-bottom: 1px dotted #ccc;
color: #000;
text-align: left;
text-decoration: none;
word-break: break-all;
word-break: break-word;
hyphens: auto;
flex-grow: 1;
flex-basis: 0;
}
上記の中から２箇所を修正！
border-bottom: 1px dotted #ccc;
↓ ↓ ↓
border-bottom: 1px dotted;
color: #000;
↓ ↓ ↓
削除
これで目次のh3文字に色が再び付くようになります。
なぜこの方法？
はじめは別のプラグインでも入れようかと悩みました。
でもSUGOI MOKUJIのデザインが気に入っているので、なんとかデザインを残したい！
そんな時にプラグインのCSSをコピーして、問題の場所を見つけ出してイジって治してやろうと思いつきました。
結果的に、問題の部分を修正することは出来たのですが、正直不具合の詳しい原因は僕もまだわかっていません。
今後のアップデートで改善されるかもしれないし、放置されるかもしれません。
なので今回お伝えしたのは、今出来るとりあえずの対処方法です。
まとめ
プラグイン｢SUGOI MOKUJI｣でh3の文字の色が変更できなくなったら、
step
1プラグイン編集から｢SUGOI MOKUJI｣のstyle.cssをコピー
step
2カスタマイズ→追加CSS欄にコピーしたコードを貼り付け
step
398行目あたりのコードを2箇所修正
今回はカスタマイズの追加CSS欄にコードをコピーして、98行目付近のコードを編集&削除してカラー表示を邪魔しているものを消去しました。
ぜひ実行してみてください！
Twitterで最新情報をGET！ Follow @blog_seed