当サイトではアフィリエイト広告を利用しています

[CSS,HTMLのみ] 開閉式の目次を導入する

2024年09月09日

ページの方に設けていたインデックスを「目次」として、投稿にも採用したい。



目次機能を決定する


当ブログのテンプレート「JetTheme」には、デフォルトで自動目次作成機能が設けられており、

見出しを設定すれば、目次が作成される。（多少問題はあったが、、）

JetTheme main.js をインライン化してみる - Blogger メモ帳 月夜ニ君ノ音想フ♪

JetTheme main.js をインライン化してみる - Blogger メモ帳 月夜ニ君ノ音想フ♪

Blogger JetTheme 「main.js」をインライン化して、自動目次を全角文字に対応させる。

lunablu37.blogspot.com


自動生成も考えたが、そもそも、投稿自体に肝心の見出しがきちんと記述されてないため、

見送ることとし、新しい投稿より「見出し」を整理し、「目次」追記してゆくことにした。


目次の記載方式


目次のHTMLの記載方法を検索してみると、たいてい＜ul＞,＜li＞タグで作られている。

目次からヘッダーにジャンプさせるための＜a＞タグを＜li＞タグで囲む感じ。

<ul>
  <li><a href="#xxx">ｘｘｘｘｘ</a></li>
</ul>

当初、これでやってみてたんですが、段落がつきすぎて、スマフォだと見ずらい。

CSSで制御できるのかな？めんどいので、＜p＞タグにすることにした。

  <p><a href="#xxx">ｘｘｘｘｘ</a></p>

各見出しの方には、目次からの飛び先「id」を追記する。

<h2 id="abc">曲名ＡＢＣ順</h2>
<h2 id="alb">アルバム別</h2>


目次の開閉方法


ページによっては、目次の項目数が多く、画面いっぱいになってしまう懸念があるので、

やはり、開閉できるようにしたい。擬似クラス「:checked」を使う方法もあるようだが、

メニューに使用しているアコーディオン方式で折り畳むことに、これが一番簡単な気がする。

なお、ページアクセス時の最初の表示は、目次が開いてる状態にすることにした。

【初心者】htmlで折りたたみ機能をつけるやり方2つを紹介 - WEBCAMP MEDIA

【初心者】htmlで折りたたみ機能をつけるやり方2つを紹介 - WEBCAMP MEDIA

「自分のサイトに折りたたみ機能をつけたいが、やり方がわからない・・・」 こう思う方は多いのではないでしょうか。本記事をお読みいただくと以下が分かります。 htmlで折りたたみ機能をつけるやり方がわかる ...

web-camp.io


目次のHTML


<div class="memobox">
<tape>目次</tape>
<details open=""> 
  <summary>【開／閉】</summary>
  <p><a href="#abc"><span style="font-size: 150%;">曲名ＡＢＣ順</span></a></p>
  <p><a href="#alb"><span style="font-size: 150%;">アルバム別</span></a></p>
  <p><a href="#no0">・AAAAA</a></p>
  <p><a href="#no1">・BBBBB</a></p>
  <p><a href="#no2">・CCCCC</a></p>
  <p><a href="#no3">・DDDDD</a></p>
  <p><a href="#no4">・EEEEE</a></p>
  <p><a href="#no9">・その他</a></p>
</details>
</div>



目次のデザイン


ちょっとラフな感じの目次にしたかったので、こちらを参考にさせて頂いた。

メモっぽい雰囲気の「テープ風デザインのボックス」が気に入ってしまった。

ノート風デザインのHTMLを作成する方法 - FirstDesignLab

こんにちは！今回は、ウェブサイトやブログに簡単に追加できるノート風デザインのボックスを紹介します。テープで貼り

firstdesignlab.com


目次のCSS


#single-content .memobox {
    position: relative;
    max-width: 100%;
    margin: 1.5em auto;
    padding: 2.5em 1.0em 1.5em;
    box-shadow: 0 2px 3px rgb(0 0 0 / 20%);
    background: white;
}
#single-content .memobox tape {
    position: absolute;
    top: -15px;
    transform: translateX(-.3em) rotate(-5deg);
    padding: .5em 2em;
    border-right: 2px dotted rgb(0 0 0 / 10%);
    border-left: 2px dotted rgb(0 0 0 / 10%);
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
    font-weight: 600;
    background-color: #fff462;
}
#single-content .memobox summary {  /* 開閉の文字設定 */
    color: $(font.color);
    font-weight: 600;
    text-align: right;
}
#single-content .memobox p{  /* デフォルトの行間の打消し */
    margin-top: 0em;
    margin-bottom: 0em;
}
#single-content .memobox p a{
    padding: 5px 0 1px 0;
    font-size: 80%;
}
@media (prefers-color-scheme: dark) {  /* ダークモード対応 */
    #single-content .memobox {
       border: 1px solid rgb(30,30,30);
       box-shadow: 0 10px 6px -6px rgba(0,0,0,.5);
       background: rgb(51,51,51);
    }
    #single-content .memobox tape {
       border-right: 2px dotted rgba(0,0,0,.5);
       border-left: 2px dotted rgba(0,0,0,.5);
       box-shadow: 0 0 5px rgba(0,0,0,.5);
       background-color: #5f6527;
    }
    #single-content .memobox summary {
       color: rgb(240,240,240);
    }
}


目次の完成形



目次オープン時（デフォルト状態）




目次クローズ時







追記


当初ブログ全盛期には、「目次」などという発想はまったくなく、見出しさえ設けてない。

そもそも、日記発祥だったので、ウェブサイトな発想はなかった気もする。

ユーザーの使い勝手とか、SEO対策とか、まったく意識してなかったよなぁ。

高速化対策が一段落したら、、そっちの方が気になってきてしまった次第です。

過去の投稿とか、少しずつですが、ブラッシュアップしてゆけたらなぁと思ってます。



Previous Post