Rikiによる知識財産の共有

【素敵なおじさん化計画中!】

【ブログを見やすくする③】目次の文字の色を変えよう

どうもみなさん!Rikiです!

現在読みやすいブログにするにはどうすればいいのか考えたり、調べています。昨日、一昨年に引き続き、読みやすいブログにするにはというお話をできればと思います。

昨日は、目次の背景への色のつけ方を記事にしました。以下をご覧ください。

www.riki-riki.com

 

ブログを見やすくする③〜目次の文字の色を変えよう〜

目次の文字の色を変えよう

途中までは昨日の”目次に色をつける”方法と同じです。重複になりますが説明します。

まずはてなブログのデザイン変更のページへいき、”カスタマイズ”を選択します。そこに”デザインCSS”というものがあるので、それをクリックします。

クリックしたら下に白いウィンドウが出てくるので、そこをさらにクリックするとこのような画面が出てくると思います。

 

ここに改行して以下のようなテキストを入力します。

 

.entry-content a {

color:#00ced1;

}

 

そして変更を保存すると、あなたの記事の目次の文字の色が変わります。

f:id:Riki-Riki:20200227195043p:plain

 

上のテキストの”00ced1”部分を好きなカラーコードに置き換えることで、好きな色の文字に変えることができます。

 

カラーコードは以下のサイトをご参照ください。

原色大辞典:https://www.colordic.org

 

これらの部分をいじって好みのデザインに変えてみてください。

 

CSSの入力方法がわからない人は以下の記事を参考にしてください。

https://www.riki-riki.com/entry/2020/02/26/224804

 

今後

これで目次の文字の色を変えられるようになりました。まだまだ目次を見やすくする方法があるので今後も引き続きお伝えしようと思います。