目次の背景色をカスタマイズ 好みの色に変える方法

Cocoonはそのままの設定で目次が設定出来ますが、便利なテーマな反面そのままでは他の方と同じ見た目になってしまいます、他の方と差別化を図ったり、自分の内容にそった目次にしたり簡単に出来る様に変更する仕方を紹介。

今回は「目次のレイアウトは変えず背景と文字の色変更」する方法を紹介。

カラーコードWeb色

Webでは日本語の色を入力しても当然表示はされません、Web用に色が設定されていますが、
流石にすべて覚えるのは無理がありますし、覚えれません。

便利なWeb用の色見本を簡単に探せるサイトがありますので、色を変える際にはこのサイトを参考にして下さい。
背景・文字色・その他スタイル色を変更に利用できます。
「原色大辞典」

色を決める際の注意点

まず先に色を決める際の注意点を記載します。

1. 先に背景か文字の色を決める。
2. 読みにくいかパソコンやスマホで確認。
3. スマホではバックライトの明るさ・暗さでも読みやすいか。

背景色を先に決めるか文字色を先にある程度自身のサイトのコンセプト色を決めると後々色を決める際に良いかもしれません、どちらも変更ばかりすると文字が読みづらかったりして何度も変更して確認が多くなります、そして私自身も迷いました…

色を決める際には、パソコンでの読みやすさやスマホでの昼夜での画面の明るさで案外見にくくなる色もあります。色覚が認識が困難な方は赤系色とか青系色の重なりは色覚困難な方には見えなくなります、その点も考慮して設定をする事をお勧めします。

目次背景の色を変更する方法

変更するにはスタイルCSSを変更します、コードは消したりしますとブログが表示されなくなるなど、初心者では分からなくなりますので、万が一に備えてバックアップを取るなどをして作業をすると安心しです。

「外観➡テーマファイルエディター➡Style.css」　の一番下の空白の部分に挿入します。

.toc {
  background-color: #efefef; /*好みの背景の色*/
}

色を変更するには【#efefef】を最初に紹介した原色大辞典を参考に好みの色を探して変更するだけです。

目次文字色を変更

//目次カスタマイズ
.toc-title {
  font-size: 20px; /*サイズ*/
  color: #efefef; /*色*/
}

//見出しカスタマイズ
.toc .toc-list li a {
  font-size:14px; /*サイズ*/
  color: #efefef; /*色*/
}

例では文字と背景の色を同じ色にしてますが、見難くなりますので確認しながら決めて下さい。