上下に動かせるボックスをサイドバーに入れ目次を作る方法（チャットGPT活用）

記事を読んでいて横のサイドバーに目次がついてくる（追従）のを見た事ありませんか？

自分も見た時に「すごい分かりやすい、読者ファーストだな」って思ったんです。

なのでサイドバーに追従する目次を設定してみたのですが、

「途中で切れている・・・」

「これじゃあせっかく目次をサイドバーに設定しても一番下に行かないと目次が分からない」と思いました。

と思ってチャットGPTに相談して出来た事を書いていきますね。

自分はcocoon（コクーン）を使っているのでcocoon（コクーン）ベースでお話していきますね。

今回の設定の流れとまとめを書いておきます。

記事で詳しく解説していますが、長くなるのでコードだけ知りたいって方は下の４ステップを見てもらえると分かりやすいかなと思います。

サイドバーに追従する目次を設定する方法

普通のサイドバー追従型の目次の設定をしていきます。

外観→ウィジェットを選択

ウィジェットをサイドバースクロール追従に追加

この時自分は、ブロックを選びましたが、やってないので分からないですが、「カスタムHTML」や「テキスト」のウィジェットでも出来ると思います。

入れたいウィジェットをクリックして、「サイドバースクロール追従」にチェックを入れて「ウィジェットを追加」をクリック。

「ブロック」の中に[toc]（目次のショートコード）を入れて保存します。

すると目次が追従型サイトバーに表示されます。

上の画像であるようにブロックの上に「テキスト」のウィジェットを入れています。

なぜかというと上下に動かせるボックスを動かした時、目次の上の部分が切れてしまったのです。

なので「テキスト」ウィジェットを追加し中にはスペースを２段分ほど入力しておくと綺麗に表示されますので、併せて入れておくと良いですよ。

追従型サイドバーに目次だけだとちょっと見にくい

問題点１・目次が切れてしまう

冒頭でも話をしたように結構なボリュームの記事になるとそれだけで目次が多くなってしまいます。

そうすると目次が切れてしまい、結局記事を読んで行って一番最後らへんで目次がスクロールして最後まで行く形になります。

なので目次が切れてしまうとユーザービリティでも良くないし、記事を閉じられる事につながります。

なので今回思った上下に動かすことが出来る目次ボックスがあると便利だと思ったわけです。

問題点２・文字が大きくごちゃごちゃしてて見にくい

自分も最初サイドバースクロール追従型の所に目次を設置したのですが、文字は大きいし、小さい所に文字が折り返して表示されているからめっちゃ読みにくいんですよね。

人って横や縦に文字が並んでいると読みやすいけどブロックの中に折り返し書いてあると急に読みにくくなるんですよね。

なのである程度文として読める目次をサイドバーに設置することがユーザーにとってメリットがあるかなと考えました。

そして今までなら考えただけで終わっていたのですが、技術の進化ってすごいですよね。

チャットGPTに今の悩みを相談したら解決方法を教えてくれるんですもんね。

では次の章ではチャットGPTに相談して設置していくことを書いていきます。

チャットGPTに動かせるボックスの作り方を質問

ワードプレスのテーマ「コクーン」のウィジェットでサイドバー追従にスクロール出来るボックスを入れたいと思います。その際のコードを教えてほしい。また抜けている情報があれば教えて

自分でボックス内にマウスをもっていって上下に動かすとそのボックスだけ動かせるボックスを作りたいんだけど

すると自分が思っていた答えが返ってきました。

この答えを実行していきます。

ウィジェットの「ブロック」の中にコードを入れます

「ブロック」を開いて下記のコードを入れます。

<div id="drag-scroll-box">
<span class="fz-15px">[toc]</span>
</div>

上記のコードの説明は「ドラッグしてスクロール出来るボックスだよ」って事です。

そしてその中に入れているものは

<span class=”fz-15px”>○○</span>・・・○○のフォントサイズを15PXにするよ

[toc]・・・目次のショートコード

このままだとただのボックスなので、スタイルシート（CSS）で「このボックスにはこうゆう設定をしてね」って設定していきます。

CSSにコードを書いていく

まずは「外観」→「テーマファイルエディター」をクリック。

「編集するテーマ」の所が「cocoon　child」になっているのを確認し、「スタイルシート」が選択されているのを確認し、「選択したファイルの内容」の一番下へ行きます。

コードを貼り付けて「ファイルを更新」を押します。

コードはこちら

#drag-scroll-box {
  overflow-y: auto; /* 垂直方向のスクロールバーを有効にする */
  height: 350px; /* ボックスの高さを設定 */
  /* その他のスタイリング（幅、ボーダー、パディングなど） */
}

その後プレビューを見てみると、なんということでしょう。スクロール出来るボックスが完成しています。

文字の表示に関してはレスポンシブデザインなのでちょっとズレていますがちゃんとスクロール出来るボックスになっています(^^♪

文字の大きさを変更をしようとするとスクロール出来なくなった

調子に乗った自分は「スタイルシートって何でも出来るじゃん！！すげー」とスタイルシートに文字の大きさを設定するコードを追加するとスクロール機能が無くなってしまい「なんで？」と時間を無駄にしましたので失敗事例も載せておきますね。

と間違っていないですよと教えてくれるのですが、このコードを入れてもなぜかスクロールしなくなったので、ウィジェットの目次ショートコードの方で文字サイズの変更をしました。

チャットGPTに相談し目次の文字も青くしてみた

目次の文字の色の変更もちょっと苦戦したので伝えていきます。

HTMLタグで文字が青に出来るのかチャットGPTへ相談

ここもチャットGPTへ相談しました。

<font color="blue">このテキストは青色です。</font>

このコードを教えてくれたのでウィジェットの「ブロック」の所で

「目次のショートコード」をすれば出来ると思っていました。

しかしこれでは、目次と点しか青色にならなかったんです。

結果・HTMLタグでは目次を青くすることは出来なかった。

チャットGPTへスタイルシートの編集の仕方を相談

もう一度チャットGPTへ相談。

.toc-entry, .toc-link {
  color: blue;     /* 目次のテキスト色 */
  font-size: small; /* 目次のテキストサイズ */
}

ここで教えてくれた方法でスタイルシートに書き込みましたが出来ませんでした。

教えてくれたコードでは出来ず、さらにチャットGPTへ相談

再度チャットGPTへ相談。

検証から目次の部分を指定しているコードを探す

まず１を試すことにしました。自分が「青にしたい」って所が間違っているんじゃないかって事ですね。

自分のブログを開いて目次の所で右クリック→一番下の「検証」をクリック。

すると訳の分からないコードが出てきます。

でもちょっとだけ我慢してみていきましょう。

目次の所で検証を開いているので、目次のコードの所が選択されています。

次にコードの所にマウスで動かしていくと、どこのコードがどの部分かが分かるんです。

今回の目次の部分は「toc-content」と表示されたので、それを元にコードを書き換えました。

.toc-content  {
  color: blue ;     /* 目次のテキスト色 */


}

検証で見つけた物のコードを書き換えても表示されない

「これで出来た」って思ったんですが、青色にはならなかったんです。

ちゃんと目次のコードは指定しているのになんでやろ？って事で再度チャットGPTへ相談。

「正しいセレクタの特定」もしたし、「キャッシュの削除」もした、ん？

追加のヒントに書いてあるように、「確かに目次はリンクでもあるし、リスト表示だな」と思って

.toc-content a {
  color: blue ;     /* 目次のテキスト色 */

}

「a」を付けてみたところ、目次の文字が青色に変わった

目次の色を付けたくて悩んでいる方は上のコードをスタイルシートに入力すると良いですよ。

文字の下線もつけてみた

こちらもチャットGPTへ相談し下記のコードを教えてくれたのでスタイルシートへ入力しました。

これを教えてくれたのでコードを書き換えてスタイルシートへ貼り付けました。

.toc-content a {
  color: blue ;     /* 目次のテキスト色 */
   border-bottom: 1px dotted rgba(0, 0, 0, 0.5); /* 黒の点線で透明度50% */
}

これで追従型のサイトバーに自分の思い通りの目次が設定出来ました。

上下に動かせる目次ボックスの作り方まとめ

途中色々問題がありましたが、楽しく編集できました。

上記の説明は失敗事例もいれているので煩わしく感じるかもしれませんので、最短で設定したい方はこちらを参考にしてください。