Rikiによる知識財産の共有

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

【ブログを見やすくする④】目次にタイトルをつけよう

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

現在読みやすいブログにするにはどうすればいいのか考えたり、調べています。第三弾まで記事にしています。

前回は、目次の文字の色の変え方を記事にしました。以下をご覧ください。

www.riki-riki.com

 

ブログを見やすくする④〜目次にタイトルをつけよう〜

目次にタイトルをつける方法

途中までは前回の”目次の文字の色の変え方”と同じです。重複になりますが説明します。

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

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

 

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

 

.table-of-contents:before {

content: "目次";

font-size: 110%;

font-weight:bold;   

color:#696969;

}

 

そして変更を保存すると、あなたの記事の目次に”目次”というタイトルが入ります。

f:id:Riki-Riki:20200229212608p:plain

 

”目次”部分を”INDEX”など好きな言葉に変えることもできます。

”110%”は文字のサイズです。数字を変えて文字の大きさを変えることができます。

"bold”は太文字を意味しています。ここを”normal”にすれば通常の文字になります。

”696969”は文字の色を意味しています。好きなカラーコードに置き換えることで、好きな色の文字に変えることができます。

 

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

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

 

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

 

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

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

 

今後

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