目次のデザインをすっきりさせた

スポンサーリンク

style.cssに目次のデザインを追加しました。

こんなふうに変更しました。

ブログの目次のデザインを変更した

違いがわかりますか?

スポンサーリンク

スタイルを変更したのは主に3箇所

  • 目次のアイコンを追加した
  • 見出し3のフォントサイズを小さくした
  • 余白を狭くした
/*目次のデザイン*/
.article .toc {
	border-color: #a08010 ;
	padding: 10px;
	width: 95%;
}
.article .toc-title {
	text-align: left;
}
.article .toc-title::before {
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f03a";
    margin-right: 0.8em;
    margin-left: 0.4em;
    transform: scale(1.4);
    color: initial;
}

ちなみに、このクラス名の「toc」というのは、「table of contents」 つまり、目次のことです。

::before擬似クラスで先頭にアイコンを追加した

これは::before擬似クラスで実現しています。

アイコンをフォントで追加する方法は、font-familyでFont Awesomeを指定して、contentで適当なユニコードを指定することです。

どうやってFont Awesomeのユニコードを調べる?

font awesomeには、ユニコードを取得する項目があります。

例えば、listのアイコンは¥f03aというのがユニコードです。

こちらもどうぞ

タイトルとURLをコピーしました