Rikiによる知識財産の共有

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

【ブログを見やすくする②】目次に色をつけよう

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

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

昨日は、目次の意味とはてなブログでの目次の付け方を記事にしました。以下をご覧ください。

www.riki-riki.com

 

ブログを見やすくする②〜目次に色をつけよう〜

目次に色をつける方法

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

f:id:Riki-Riki:20200226224635p:plain

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

f:id:Riki-Riki:20200226224222p:plain

 

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

 

.table-of-contents{

padding: 20px 10px 20px 40px;

border-radius: 5px;

background: #e6e6fa;

}

 

こんな感じです。

f:id:Riki-Riki:20200226224227p:plain

 

そして”変更を保存する”をクリックすると、あなたの記事の目次の背景に色がつきます。

今回の場合は以下のような感じになります。

f:id:Riki-Riki:20200226224235p:plain

 

上のテキストの”e6e6fa”部分がカラーコードと呼ばれていて、”e6e6fa”はラベンダー色を指しています。ここのカラーコードをお好みの色のコードに変更することで、好きな色の背景に変えることができます。

 

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

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

 

このカラーコードをいじっていろいろ試してみる楽しいですよ。

 

今後

これで目次の背景に色を付けられるようになりました。次にもう少し目次を見やすくする方法をお伝えしようと思います。