Rikiによる知識財産の共有

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

【ブログを見やすくする11】目次をオシャレにする

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

読みやすいブログを作るためにデザインを試行錯誤していて、今回は第11弾となります。

前回は、これまでに挙げた目次のタイトルの頭にアイコンをつける方法を記事にしました。以下をご覧ください。

www.riki-riki.com

今回は目次をオシャレにする方法をお伝えします。

 

ブログを見やすくする11〜目次をオシャレにしよう〜

目次をオシャレにする方法

これまでCSSにより目次を変更する方法をお伝えしてきました。

今回はコピペで目次をオシャレにできる方法をお伝えします。

 

下記の記事を参照ください。

https://saruwakakun.com/html-css/reference/ul-ol-li-design

サルワカくんという方が目次の様々なデザインのCSSをアップしてくださっています。

 

これまでに私がお伝えしたCSSの内容を理解していればここからアレンジを加えることも可能だと思います。

 

ぜひコピペして自分だけのデザインを作ってみてください。

 

CSSの貼り付け方法はこれまでの記事と重複になりますが説明します。

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

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

 

ここに好きなデザインのCSSを貼り付けます。

 

そして変更を保存すると、あなたの目次がオシャレになります。

 

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

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

 

今後

これで目次をオシャレにすることができました。これからは目次以外のところでブログを見やすくする方法を調べてお伝えしようと思います。