【はてなブログ】アイコン＆アニメーションでオシャレな目次を作る方法！

今回は、当ブログでも使用しているオシャレな目次を設定する方法について、ご紹介したいと思います。

実際の動作については、下記の目次で表示しているようなイメージです。

目次の動作

目次のリストスタイルに丸ポチや数字ではなく、等のアイコンを使用しており、見出しのレベルに応じて表示するアイコンを変えています。

また、PC版ではカーソルを乗せた時、項目が右にスライドするアニメーションが付いてます。

こうすることで、どの目次の項目を選ぼうとしているかが明確になり、視覚的な面白さだけでなく利便性もアップさせる事ができます。

目次の設定方法

下記のCSSコードを「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」の欄にコピペして追記して下さい。

コードは記事の最後で紹介しているサイト様を参考に、当ブログ用にカスタマイズしたものになっています。

そのため、細かい値などは、ご自身のブログに合わせて調整して下さい。

デザインCSS

/*↓----目次デザイン----↓*/
ul.table-of-contents {
  padding: 5px 5px 5px 35px;
  font-size: 100%;
}
ul.table-of-contents ul {
  font-size: 100%;
}
ul.table-of-contents::before {
  content: none;
}
.entry-content .table-of-contents {
  position: relative;
  border: 3px solid #01A9DB; /* 目次の枠の色 */
  background-color: #FFF; /* 背景色 */
  border-radius: 0px 0px 8px 8px;
  margin: 3em 0 0 0; /* 枠の大きさ */
}
.table-of-contents:after { /* 目次部分 */
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: "\f03a 目次"; /* 目次の表示名 */
  background: #01A9DB;
  color: #fff;
  right: 0%;
  left: 0%;
  bottom: 100%;
  border-radius: 8px 8px 0 0;
  padding: 2px 0 2px 0;
  margin: 0 -3px 0 -3px;/* -で指定の部分はborderと同じ値 */
  text-align: center;
  font-size: 1.2em;
  letter-spacing: 1.5em
}
.table-of-contents li {
  font-size: 1em;
  font-weight: bold;
  color: #01A9DB;
  position: relative;
  list-style-type: none;
}
.table-of-contents li:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: "\f138"; /* 大見出しアイコン*/
  top: 0.45em; /* アイコン位置調節 */
  left: -1.2em; /* アイコン位置調節 */
}
.table-of-contents li > ul > li:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: "\f101"; /* 中見出しアイコン */
  top: 0.3em;
  left: -1em;
  font-size: 1.2em;
}
.table-of-contents li > ul > li > ul > li:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: "\f105"; /* 小見出しアイコン */
  top: 0.3em;
  left: -0.6em;
  font-size: 1.2em;
}
.table-of-contents a{
  color: #545454;
  padding: 3px; /* 列の間隔 */
  display: block;
  text-decoration: none;
  transition-duration: 0.3s /* カーソルが戻る時間 */
}
.table-of-contents li a:hover {
  padding-left: 10px; /* カーソル重ねた時に移動する距離 */
  transition-duration: 0.3s /* カーソルが移動する時間 */
}
/*↑----目次デザイン----↑*/

表示アイコンの変更

上記のコードで、「大見出しアイコン」などのコメントが入っている箇所が、アイコン画像を設定している部分になります。

アイコンを変更したい場合は、content: "\f101"; の赤字部分を好きなアイコンのUnicodeに変えてください。

アイコンのUnicodeは、下記サイトで「Free」のものを検索すると出てきます。
fontawesome.com

参考サイト様

今回、参考にしたサイト様は以下のとおりです。感謝！
mshitech.hatenablog.com