んー、正解かどうかわからないですが・・

#toc, .toc {
margin: 0 auto;
width: 60%;
}

@media screen and (max-width:480px) {
#toc, .toc {
width: 80%;
}
}

こんなCSSじゃ、いかかでしょうか？

ありがとうございます　サイト https://totobahamas.com/life/

解決しました...がCSSを貼り付けないとCocoonの目次機能の

デフォルトだとこのような問題が普通起こるのでしょうかね？？？

また、文字を少し右よりに微調整する方法も教えていただけるでしょうか？

ちなみに添付画像どうり目次設定は中央寄せにチェックを入れていますが、、

よろしくお願いします。

Cocoonの高速化設定を有効にしていると、詳しいことが、わからないのですが、おそらく、ご利用のスキンのCSSでデザインを指定してあるのではないかと思います。

文字左側を空けるのは以下で可能かと思います。

数値は適宜調整ください。

#toc .toc-content, .toc .toc-content {
padding-left: 10%;
}

@toto さん

目次は本文中で「h2」を見出しタグを使うと、自動的にに作成されるのですが、さらに、「h2」の章の中に「ｈ3」という小見出しを作る場合もあろうかと思います。

また、さらに「ｈ3」の章の中に「ｈ4」の小々見出しを設定することもできます。

そうすると、目次では、章の階層構造がわかりやすく、インデントされて表示されるかと思われます。

「ｈ2」しか見出しは使わない、というのであれば、「ｈ2」だけを考えれば良いのですが、今後「ｈ3」や「ｈ4」も使うかもしれない、というのであれば、それも含めて見栄えをテストした方がいいのかもしれません。

あ、いけない、画像を拝見しますと、「h3」までに設定されているようですね。

@leafytreeさん

ご丁寧なアドバイス本当に感謝しています。

サイトを立ち上げたばかりの初心者なので６日間かかってできななかった事が解決できました。

数値を３０％に変更して使用させていただきます。見出しの使い方についても、今後ご意見参考にさせていただきます

他のユーザーの方はデフォルトで利用されているようなので、なぜこうなるのか？気になる所ですが...

@too さん

なぜこうなるのか、につきましては、フォーラムご利用の案内の冒頭にありますとおり、高速化設定をOFFにして、環境情報を添えていただきますと、理由が判明する場合が多いです。

高速化設定がONの状態で、かつ、環境情報もわかりませんと、外部からは、調べる手立てがない状態です。

これは、推測ですが、tooさんが、当初使われていたであろう、スキンを、私のローカル環境のテストサイトで、適用してみました。

https://notepad.pw/share/u72dn1byd

すると、やはり、横幅いっぱいに目次が表示されたので、おそらくは、スキンの作者様のデザインだろうという推測になります。

@leafytreeさん

ご返信ありがとうございます

お忙し中いろいろとアドバイス本当に感謝です

一応、ご指定の高速化設定をオフにした、環境情報を添付いたします。

@too さん

私の説明が下手で、わかりにくかったため、もう少し説明を加えますと、このフォーラムで質問が解決するまでは、Cocoonの高速化設定をOFFにしままにしておいてください、という意味です。

そうしませんと、外部の者がtooさんのサイトのソースコードをチェックすることができないためです。

また、環境情報については、下の方が画像に写っていないので、半分ぐらいしか情報が読めません。

画像ではなく、フォーラムの入力欄に直接貼り付けていただいてもかまいません。

今回の目次が幅いっぱいになる、というのは、Cocoon設定で選択されたスキン（veilnui-simplog-bule）の仕様です。

Cocoon設定は、多機能なので、スキンを使わなくても、全体のカラーを統一させることもできるようですし、別のスキンを試してみるのも良いですし、このまま使われるのも良いと思います。

ただ、目次で、左側の空きを30％にされているようですが、スマホですと、右に寄りすぎてしまいます。

以下のCSSを一番下に追記いただくと、スマホでは左側10％の空きになります。

@media screen and (max-width:480px) {
#toc .toc-content, .toc .toc-content {
padding-left: 10%;
}
}

話は、変わりまして、高速化設定がOFFになっていないため、良くわからないのですが、tooさんは、子テーマをお使いになっていらっしゃいますか？

WordPressの場合は、親テーマはどんどんアップデートしていくので、子テーマの使用は必須です。

ご返信ありがとうございます。

Cocoonの高速化設定をOFFの状態で設定しました

親テーマと子テーマともインストール後子テーマを有効化して使っています。

以下、ご確認おねがいします

サイト名：バハマの歩き方
サイトURL： https://totobahamas.com
ホームURL： https://totobahamas.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/veilnui-simplog-blue/style.css
WordPressバージョン：5.4
PHPバージョン：7.3.14
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:75.0) Gecko/20100101 Firefox/75.0
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：en-US,en;q=0.5
----------------------------------------------
テーマ名：Cocoon
バージョン：2.1.4.1
カテゴリ数：10
タグ数：1
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.1
style.cssサイズ：719バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：0
AMP：1
PWA：0
Font Awesome：4
Auto Post Thumbnail：1
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：1
WEBフォントLazy Load：1
----------------------------------------------
利用中のプラグイン：
Akismet Anti-Spam 4.1.4
Contact Form 7 5.1.7
TinyMCE Advanced 5.4.0
WP Multibyte Patch 2.8.4
----------------------------------------------

@too さん

カスタマイズするCSSのコードを書く場所なのですが、投稿ページにあるカスタムCSSの欄ですと、そのページだけしか適用されません。

WordPressのダッシュボードで「外観」→「テーマエディター」とたどると、「テーマの編集ページ」が開きます。

そこに以下のような記載がありますので、

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template: cocoon-master
Version: 1.1.1
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}

以下のコードを書き込みますと、

#toc, .toc {
margin: 0 auto;
width: 60%;
}

#toc .toc-content, .toc .toc-content {
padding-left: 30%;
}

@media screen and (max-width:480px) {
#toc, .toc {
width: 80%;
}
#toc .toc-content, .toc .toc-content {
padding-left: 10%;
}
}

以下のようになります。

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template: cocoon-master
Version: 1.1.1
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

*目次のデザインを修正*/
#toc, .toc {
margin: 0 auto;
width: 60%;
}

#toc .toc-content, .toc .toc-content {
padding-left: 30%;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/

/*目次のデザインを修正*/
#toc, .toc {
width: 80%;
}
#toc .toc-content, .toc .toc-content {
padding-left: 10%;
}
}

書き込みが終わった、「ファイルの更新」のボタンをクリックします。

ボタンをクリックしたとき、エラーが出なければ、たぶん成功しているかと思います。

投稿ページのカスタムCSSに追記したコードは削除してください。

わかりにくかったら、

以下のコードを一番下にコピペでも、イケるかと思います。

/*目次のデザインを修正*/
#toc, .toc {
margin: 0 auto;
width: 60%;
}

#toc .toc-content, .toc .toc-content {
padding-left: 30%;
}

@media screen and (max-width:480px) {
#toc, .toc {
width: 80%;
}
#toc .toc-content, .toc .toc-content {
padding-left: 10%;
}
}

#toc .toc-content, .toc .toc-content {
	padding-left: 0;
}
#toc, .toc {
	width: auto;
}

これでいい気もします

https://gyazo.com/6db96aeb055ad93fec0edeae519daedb

お試しください❦

あら、かうたっくさん

ありがとうございます。 ? 

@too さん

かうたっくさんのコードの場合は、目次は左寄せになるみたいです。

その場合でも、

#toc .toc-content, .toc .toc-content {
padding-left: 0;
}

では、左側の目次の枠線と文字が近づきすぎてしまうので、これは、要らないみたいです。

かうたっくさんの案を採用される場合は、

#toc, .toc {
width: auto;
}

これだけの方がいいかもしれません。

中央配置にする方法もあるみたい・・

#toc, .toc {
margin: 0 auto;
width: auto;
display: table;
}

これは、私も知らなかった。

以下、参考にしたベージ。

可変幅の要素を中央寄せするCSS

かうたっくさん、

さては、知ってて、書かなかった？

ヤですねぇ・・

PC表示

スマホ表示の画像間違えてました。

width:80%;取るの忘れてました。

本当はこっち。

投稿者:: @leafytree

かうたっくさん、

さては、知ってて、書かなかった？

もうなってるんで、あえてかいてませんでした ? 

あら～ッ！デベロッパーツールの下の方、見落としてましたぁ～ ? 

#toc, .toc {
margin: 0 auto;
width: auto;
}

これだけで、よさそうですね。

いつもながら、参りました。 ? 

@too さん

#toc, .toc {
margin: 0 auto;
width: auto;
}

私の無知から、案内が長くなってしまいましたが、上記のコードを「テーマの編集ページ」の下記の画像の位置にコピペしてみてください。

@leafytreeさん、かうたっくさん

ご丁寧にいろいろありがとうございました。

本当に感謝です、

改めて結果を報告します。

取り急ぎ連絡まで