新型コロナウィルスの緊急事態宣言が解除されたとはいえ、まだ外に出る気にならなかった私。
ヒマだったので、ブログの色なんかを少し変えてみたくなったので、あれやこれやと試してみました(^^)
ほとんど前と変化はないけど(笑)、でもそれなりに気に入った感じになってくれました。
中でも文字の色を、前はグレーだったのですが、今回は茶色にしてみたんです。
そしたら、なんだか全体の雰囲気が変わって優しい印象になった気がするんですよね(^^♪
でも、1つ違和感のあるところが・・・
どしたの？ 何も思わなかったよ？
目次のね、色がちぐはぐで(;^ω^)
そうなんです。実際に違和感を感じたときの目次がこちら。
目次のタイトルや数字はサイト全体と同じ色なんですが、目次のコンテンツがCocoonのデフォルト色になったままなのです。
Cocoonは設定画面で何かと変更が出来るとても使いやすいテーマなのですが、この目次の色は変えることができないようでした。
でも！ 何とか変えてみたい！
ありがたいことにCocoonのカスタマイズ方法は、ネット上に色々とあります。
色んな情報を参考にさせていただいて、web知識の全くない初心者の私ですが、どうにか思い通りに色を変えることができたので、もしどなたかのお役に立てればと思い記事にしました。
事前準備
とりあえずは、Cocoonの設定画面から、目次項目の中の『目次を表示する』にチェックをしておきましょう。
ここにチェックがないと目次が表示されませんよ～
あとは、目次を表示させたいページや、目次の展開方法など細かい設定をお好みでします。
スタイルシート（style.css）を変更する
以前、下記の記事を書いたのですが、そのときも怖々このスタイルシート（style.css）を変更してました。
ですが、この記事を書いたのが10ヵ月ほど前になり、その間全くスタイルシート（style.css）は触れてなかったので、記憶もおぼろげ (ﾟ´ω｀ﾟ)
なので、またまったくの白紙からのスタートになりました。
それでも、少しは記憶の片隅に残ってたので、調べていくうちにあーこーだったなと思い出してきて、少しハードルが低くはなりました(^^)
では、早速ワードプレスにログインしましょう。
そしたら、左のメニューから、『外観⇒テーマエディター』と進みます。
表示された画面が、『Cocoon Child』『スタイルシート（style.css）』になっていることを確認してください。
私の場合は、いきなり『Cocoon Child』『スタイルシート（style.css）』でしたが、バージョン等によって違うことがあると思います。
くれぐれもお間違えの無いようになさってください。
上記を図に表すと、下記のようになります。
赤枠の4カ所をチェックしてくださいね☆
次に、画面真ん中辺りの/*必要ならばここにコードを書く*/という文章があるのを確認してください。
ここの下にいよいよ、目次コンテンツの色を変えてね、という指示を書きます。
具体的な場所は、下記画像の大きな赤矢印のところです。
で、何を書くの？ですが。
.toc a{
color:#fff;
}
#fffには、自分の好きな色を設定してくださいネ。
目次に指示を与えるには『.toc』を使うのだそうです。
tocはtable of contentsの略だとか。
へーーー
ここまでできたら左下にあるファイルを更新ボタンをクリックし、ファイルの編集に成功しました。となればOKです。
色が変わっているか確認
では、ドキドキの瞬間ですね！
色はちゃんと変わっているのでしょうか。
プレビュー表示してみましょう。
じゃーーんっ
わーーーい＼(^o^)／ ちゃんと変わってます。
出来てよかったね♪
まとめ
Cocoonの目次コンテンツの色を変える方法をご紹介しました。
私はweb知識はありませんが、それでも変えることができました。
他の人からしたら、大差ないと思われる色の違いだと思いますが、一度気になり出すと気になってしょうがない(笑)
私のように初心者で困っておられる方のお役に少しでも立てれば嬉しいです(^_-)-☆
応援よろしくお願いしますm(__)m
にほんブログ村
コメント