記事を読んでいてサイドバーの目次があるのは便利なんだけど、下の方まで表示されないからもったいない気がするんだよねー。
確かにそうだね。自分もそう思うからチャットGPTを活用して設定してみよう。
記事を読んでいて横のサイドバーに目次がついてくる(追従)のを見た事ありませんか?
自分も見た時に「すごい分かりやすい、読者ファーストだな」って思ったんです。
なのでサイドバーに追従する目次を設定してみたのですが、
「途中で切れている・・・」
「これじゃあせっかく目次をサイドバーに設定しても一番下に行かないと目次が分からない」と思いました。
じゃあスクロール出来るボックスを設置したらどうか?
と思ってチャットGPTに相談して出来た事を書いていきますね。
自分はcocoon(コクーン)を使っているのでcocoon(コクーン)ベースでお話していきますね。
今回の設定の流れとまとめを書いておきます。
記事で詳しく解説していますが、長くなるのでコードだけ知りたいって方は下の4ステップを見てもらえると分かりやすいかなと思います。
- step1ウィジェットでサイドバースクロール追従に「ボックス」を追加
スペースの関係でその上に「テキスト」ウィジェットもいれる
- step2「ボックス」ウィジェット内に下記のコードを入力し保存
<div id="drag-scroll-box"> <span class="fz-15px">[toc]</span> </div>
- step3「外観」→「テーマファイルエディター」→「cocoon child」になっていることを確認し、「スタイルシート」の一番下に下記コードを入力し保存
#drag-scroll-box { overflow-y: auto; /* 垂直方向のスクロールバーを有効にする */ height: 350px; /* ボックスの高さを設定 */ /* その他のスタイリング(幅、ボーダー、パディングなど) */ } .toc-content a { color: blue ; /* 目次のテキスト色 */ border-bottom: 1px dotted rgba(0, 0, 0, 0.5); /* 黒の点線で透明度50% */ }
- step4「ファイルの更新」を押し出来ているか確認。
出来ていない場合、ブラウザのキャッシュを削除してみる。
サイドバーに追従する目次を設定する方法
普通のサイドバー追従型の目次の設定をしていきます。
外観→ウィジェットを選択
ウィジェットをサイドバースクロール追従に追加
この時自分は、ブロックを選びましたが、やってないので分からないですが、「カスタムHTML」や「テキスト」のウィジェットでも出来ると思います。
入れたいウィジェットをクリックして、「サイドバースクロール追従」にチェックを入れて「ウィジェットを追加」をクリック。
「ブロック」の中に[toc](目次のショートコード)を入れて保存します。
すると目次が追従型サイトバーに表示されます。
上の画像であるようにブロックの上に「テキスト」のウィジェットを入れています。
なぜかというと上下に動かせるボックスを動かした時、目次の上の部分が切れてしまったのです。
なので「テキスト」ウィジェットを追加し中にはスペースを2段分ほど入力しておくと綺麗に表示されますので、併せて入れておくと良いですよ。
追従型サイドバーに目次だけだとちょっと見にくい
ここで自分は思いました、なんか分からんけど見にくくない?
問題点1・目次が切れてしまう
冒頭でも話をしたように結構なボリュームの記事になるとそれだけで目次が多くなってしまいます。
そうすると目次が切れてしまい、結局記事を読んで行って一番最後らへんで目次がスクロールして最後まで行く形になります。
でも実際記事を読んでいて冒頭部分はある程度分かる。ちょっと飛ばして見たいって時に目次が切れていたら、どうでしょう?
高速スクロールするのも手間だし、目的の所を飛ばしてしまうって事もありますよね?
なので目次が切れてしまうとユーザービリティでも良くないし、記事を閉じられる事につながります。
なので今回思った上下に動かすことが出来る目次ボックスがあると便利だと思ったわけです。
問題点2・文字が大きくごちゃごちゃしてて見にくい
目次があって良いけど、ただ単に文字が大きく読む気にならないでは意味ないですよね?
自分も最初サイドバースクロール追従型の所に目次を設置したのですが、文字は大きいし、小さい所に文字が折り返して表示されているからめっちゃ読みにくいんですよね。
人って横や縦に文字が並んでいると読みやすいけどブロックの中に折り返し書いてあると急に読みにくくなるんですよね。
なのである程度文として読める目次をサイドバーに設置することがユーザーにとってメリットがあるかなと考えました。
そして今までなら考えただけで終わっていたのですが、技術の進化ってすごいですよね。
チャットGPTに今の悩みを相談したら解決方法を教えてくれるんですもんね。
では次の章ではチャットGPTに相談して設置していくことを書いていきます。
チャットGPTに動かせるボックスの作り方を質問
自分も言葉が見つからなかったので最初はこんな質問をしました。
ワードプレスのテーマ「コクーン」のウィジェットでサイドバー追従にスクロール出来るボックスを入れたいと思います。その際のコードを教えてほしい。また抜けている情報があれば教えて
帰ってきた答えがちょっと自分が思っていたものと違っていたので再度質問しました。
自分でボックス内にマウスをもっていって上下に動かすとそのボックスだけ動かせるボックスを作りたいんだけど
すると自分が思っていた答えが返ってきました。
マウスでボックス内を上下に動かせるようにするためには、ドラッグ可能なスクロールボックスを作成する必要があります。これはJavaScript(特にjQuery)を使って実装するのが一般的です。以下に、基本的な実装方法を説明します。
さすがチャット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; /* ボックスの高さを設定 */
/* その他のスタイリング(幅、ボーダー、パディングなど) */
}
その後プレビューを見てみると、なんということでしょう。スクロール出来るボックスが完成しています。
文字の表示に関してはレスポンシブデザインなのでちょっとズレていますがちゃんとスクロール出来るボックスになっています(^^♪
文字の大きさを変更をしようとするとスクロール出来なくなった
調子に乗った自分は「スタイルシートって何でも出来るじゃん!!すげー」とスタイルシートに文字の大きさを設定するコードを追加するとスクロール機能が無くなってしまい「なんで?」と時間を無駄にしましたので失敗事例も載せておきますね。
#drag-scroll-box {
overflow-y: auto; /* 垂直方向のスクロールバーを有効にする / height: 300px; / ボックスの高さを設定 / / その他のスタイリング(幅、ボーダー、パディングなど) / } にfont-size: 14px; / 文字サイズを14ピクセルに設定 */
を入れるとスクロールできなくなるんですが何でですか?
font-size: 14px;
を #drag-scroll-box
のCSSに追加したことでスクロールができなくなったとのことですが、通常、font-size
の設定がスクロール機能に直接影響を与えることは少ないです。ただし、いくつかの状況でこのような問題が起こる可能性はあります。
と間違っていないですよと教えてくれるのですが、このコードを入れてもなぜかスクロールしなくなったので、ウィジェットの目次ショートコードの方で文字サイズの変更をしました。
チャットGPTに相談し目次の文字も青くしてみた
目次の文字の色の変更もちょっと苦戦したので伝えていきます。
HTMLタグで文字が青に出来るのかチャットGPTへ相談
ここもチャットGPTへ相談しました。
「<strong></strong>CSSとかではなく横のやつみたいに文字を青にする方法」(めっちゃ雑に聞くww)
HTMLだけでテキストの色を青にするには、通常、<font>
タグを使います。ただし、このタグはHTML5では非推奨とされており、現代のウェブ開発ではCSSを使用することが一般的です。しかし、単純なHTMLのみで色を変更したい場合は、以下のように<font>
タグを使います。
<font color="blue">このテキストは青色です。</font>
このコードを教えてくれたのでウィジェットの「ブロック」の所で
「目次のショートコード」をすれば出来ると思っていました。
しかしこれでは、目次と点しか青色にならなかったんです。
結果・HTMLタグでは目次を青くすることは出来なかった。
チャットGPTへスタイルシートの編集の仕方を相談
もう一度チャットGPTへ相談。
WPの目次の色を青にして文字サイズを小さくするにはどこを編集したらいい?
WordPressで目次の色を青にし、文字サイズを小さくするには、テーマのCSSファイル、カスタムCSSセクション、または子テーマのスタイルシートを編集する必要があります。これは、使用しているテーマや目次プラグインによって異なる場合がありますが、一般的な手順は以下の通りです。
方法 1: カスタムCSSを使用する
ほとんどの現代のWordPressテーマでは、管理画面から直接カスタムCSSを追加できます。
- WordPressのダッシュボードにログインします。
- 「外観」→「カスタマイズ」に移動します。
- 「追加CSS」または類似のセクションを探します。
- 以下のようなCSSコードを追加して「公開」をクリックします。cssCopy code
.toc-entry, .toc-link { color: blue; /* 目次のテキスト色 */ font-size: small; /* 目次のテキストサイズ */ }
- ここで、
.toc-entry
や.toc-link
は、使用している目次プラグインまたはテーマによって異なるクラス名に置き換えてください。
.toc-entry, .toc-link {
color: blue; /* 目次のテキスト色 */
font-size: small; /* 目次のテキストサイズ */
}
ここで教えてくれた方法でスタイルシートに書き込みましたが出来ませんでした。
教えてくれたコードでは出来ず、さらにチャットGPTへ相談
再度チャットGPTへ相談。
目次のテキストの色が変わりません
1・目次に適用されている正確なCSSクラスまたはIDを特定する必要があります。これは、ブラウザの開発者ツール(通常はF12キーで開くことができます)を使って行えます。目次の部分で右クリックし、「要素を検証」を選択して、適用されているCSSクラスやIDを探します。
2・変更が即座に反映されない場合、ブラウザのキャッシュやWordPressのキャッシュプラグインが原因である可能性があります。キャッシュをクリアしてから、ページを再読み込みしてください。
3・場合によっては、他のCSSルールが優先されていることがあります。例えば、テーマのデフォルトスタイルや他のプラグインが目次のスタイルに影響を与えている可能性があります。この場合、開発者ツールで適用されているスタイルを確認し、どのCSSルールが適用されているかを特定すると良いでしょう。
4・使用している目次プラグインによっては、プラグイン自体の設定でスタイルを変更できる場合があります。プラグインの設定ページを確認して、色やフォントサイズのオプションがないか確認してみてください。
めっちゃ提案してくれるやん!
検証から目次の部分を指定しているコードを探す
まず1を試すことにしました。自分が「青にしたい」って所が間違っているんじゃないかって事ですね。
自分のブログを開いて目次の所で右クリック→一番下の「検証」をクリック。
すると訳の分からないコードが出てきます。
「あかんもん出てきた・・・」
分かります(笑)速攻で閉じたいページですよね(笑)
でもちょっとだけ我慢してみていきましょう。
目次の所で検証を開いているので、目次のコードの所が選択されています。
次にコードの所にマウスで動かしていくと、どこのコードがどの部分かが分かるんです。
今回の目次の部分は「toc-content」と表示されたので、それを元にコードを書き換えました。
.toc-content {
color: blue ; /* 目次のテキスト色 */
}
検証で見つけた物のコードを書き換えても表示されない
「これで出来た」って思ったんですが、青色にはならなかったんです。
ちゃんと目次のコードは指定しているのになんでやろ?って事で再度チャットGPTへ相談。
上記のスタイルシートの変更で文字は小さくできたけど、目次のテキストの色は変わらず、番号だけ青に変わった。文字を青にしたい時はどうすればいいの?
目次のテキストの色が変わらず、番号だけ青に変わった場合、それはCSSセレクタが番号に関連する要素にのみ適用されていることを意味します。目次のテキスト全体の色を変更するには、テキスト自体に適用される正しいセレクタを特定し、そのセレクタに対してCSSの色のプロパティを適用する必要があります。
ステップ1: 正しいセレクタの特定
目次のテキストに適用されているセレクタを特定するには、ブラウザの開発者ツールを使用します。
- 目次のテキスト部分で右クリックし、「要素を検証」を選択します。
- ハイライトされたHTMLコードを確認し、テキストに適用されているクラス名やIDを見つけます。
ステップ2: CSSの更新
見つけたクラス名やIDに基づいてCSSを更新します。たとえば、目次のテキストに .toc-text
クラスが適用されている場合、以下のように記述します。
cssCopy code
.toc-text { color: blue !important; }
ここで、.toc-text
は実際に見つけたクラス名に置き換えてください。また、!important
を使用して、他のスタイルによる上書きを防ぎます。
ステップ3: キャッシュの確認
変更後、ブラウザのキャッシュが原因で変更が表示されない場合があります。キャッシュをクリアし、ページを再読み込みしてください。
追加のヒント
- もし目次がリスト(
<ul>
や<ol>
)で構成されている場合、リスト項目(<li>
)に対してスタイルを適用する必要があるかもしれません。 - 目次のリンク(
<a>
)に色を適用する場合は、リンクセレクタに対してCSSを書く必要があります。例:.toc-text a { color: blue !important; }
これらのステップを試しても問題が解決しない場合は、使用しているWordPressテーマやプラグインの特定のスタイリングが影響している可能性があります。その場合、テーマの文書やサポートに問い合わせて、特定のセレクタや設定方法についてアドバイスを得るのが良いでしょう。
「正しいセレクタの特定」もしたし、「キャッシュの削除」もした、ん?
追加のヒントに書いてあるように、「確かに目次はリンクでもあるし、リスト表示だな」と思って
.toc-content a {
color: blue ; /* 目次のテキスト色 */
}
「a」を付けてみたところ、目次の文字が青色に変わった
いやー、なかなか奥が深かったけど勉強になったな。
それにしても、ほんとチャットGPTのおかげですよね。ほんとにすごい。
目次の色を付けたくて悩んでいる方は上のコードをスタイルシートに入力すると良いですよ。
文字の下線もつけてみた
こちらもチャットGPTへ相談し下記のコードを教えてくれたのでスタイルシートへ入力しました。
テキストの下に薄めの点線を引くことは出来る?
テキストの下に薄い点線を引くことは、CSSを使って実現できます。点線を薄くするには、点線の色を指定して透明度を調整するか、または薄い色を選択します。以下はその一例です。
cssCopy code
.your-toc-class a { border-bottom: 1px dotted rgba(0, 0, 0, 0.5); /* 黒の点線で透明度50% */ }
この例では、rgba(0, 0, 0, 0.5)
を使用しています。これは、赤、緑、青の各値が0(黒色)で、透明度(アルファ値)が0.5(50%)の色を意味します。透明度を調整することで、点線の薄さを変更できます。透明度を下げるほど、点線はより薄くなります
これを教えてくれたのでコードを書き換えてスタイルシートへ貼り付けました。
.toc-content a {
color: blue ; /* 目次のテキスト色 */
border-bottom: 1px dotted rgba(0, 0, 0, 0.5); /* 黒の点線で透明度50% */
}
これで追従型のサイトバーに自分の思い通りの目次が設定出来ました。
上下に動かせる目次ボックスの作り方まとめ
途中色々問題がありましたが、楽しく編集できました。
最近はプログラミングで困っている人を助けたいって思っているので今回の記事で誰かの役に立てればうれしいなと思います。
上記の説明は失敗事例もいれているので煩わしく感じるかもしれませんので、最短で設定したい方はこちらを参考にしてください。
- step1ウィジェットでサイドバースクロール追従に「ボックス」を追加
スペースの関係でその上に「テキスト」ウィジェットもいれる
- step2「ボックス」ウィジェット内に下記のコードを入力し保存
<div id="drag-scroll-box"> <span class="fz-15px">[toc]</span> </div>
- step3「外観」→「テーマファイルエディター」→「cocoon child」になっていることを確認し、「スタイルシート」の一番下に下記コードを入力し保存
#drag-scroll-box { overflow-y: auto; /* 垂直方向のスクロールバーを有効にする */ height: 350px; /* ボックスの高さを設定 */ /* その他のスタイリング(幅、ボーダー、パディングなど) */ } .toc-content a { color: blue ; /* 目次のテキスト色 */ border-bottom: 1px dotted rgba(0, 0, 0, 0.5); /* 黒の点線で透明度50% */ }
- step4「ファイルの更新」を押し出来ているか確認。
出来ていない場合、ブラウザのキャッシュを削除してみる。
コメント