kayo_ruheさん

投稿者:: @kayo_ruhe

↑

目次の四角の幅を記事の文字が乗るスペース（白いところ）の半分くらいにしたい。もしくは自動的に文字量に合わせて幅を狭めるようにしたい。同時に目次の箇条書き項目頭にマークを出していたのに消えていたり、枠線が反映されていなかったり、一気に色々崩壊してしまっています。

ちょっとたくさんあって分からない部分もあります。

とりあえず、以下の部分。

/* 目次全体デザイン */
.toc{
 background:#F9F9F9; /* 目次全体の背景色を変える場合はここを変更 */
 display:block; 
 width 50%;
 border-top:5px solid; color:#FFC679;
 padding: 20px 15px;
 margin-bottom: 50px;
}

上記の「display:block;」を削除してみてはどうでしょうか。

「width 50%;」はエラーになっていますし、「margin-bottom: 50px;」も効いていませんので、削除した方が良いと思われます。

上記対応で、以下のようにはなると思います。

リストマーカーに関しては、以下のようにお書きになっていて、ご自分で消去なさっています。

.toc-content ol li {
 line-height: 1.5;
 padding: 0.5em 0 0.5em 1.4em;
 border-bottom: dashed 1px silver;
 list-style-type: none!important;
}

「list-style-type: none!important;」の部分です。

例えば「list-style-type」で検索いただくと、仕様詳細の書かれたサイトはいくつか見つかると思います。

細かい仕様であれば以下。
https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type

分かり易くまとめてくださっている解説サイトであれば、以下。

【CSS】list-style-typeの使い方：箇条書きのマーカー種類を変える
https://saruwakakun.com/html-css/reference/list-style-type

上記はいずれも「list-style-type」で検索して、ヒットしたサイトです。

目次のカスタマイズ、以下のようにお書きなっていますが、無効な部分もあるように思います。

/************************************
/* 目次のカスタマイズ
/************************************
/* 目次全体デザイン */
.toc{
 background:#F9F9F9; /* 目次全体の背景色を変える場合はここを変更 */
 display:block; 
 width 50%;
 border-top:5px solid; color:#FFC679;
 padding: 20px 15px;
 margin-bottom: 50px;
}

/* 目次の文字指定 */
.toc-title {
 text-align:left;
 margin: 0 90px 20px -10px;
 padding-left: -20px;
 font-size: 21px;
 font-weight: 600;
 color: #FFC679; /* 目次の文字色を変える場合はここを変更 */
}


/* 目次のアイコン設定 */
.toc-title:before {
 top: 0;
 left: -45px;
 width: 20px;
 height: 20px;
 font-family: "Font Awesome 5 Free";
 content : "\f03a"; /* アイコンを変える場合はここを変更 */
 font-size:20px;
 margin-right:20px;  /* 円の大きさはここで調節 */
 padding:9px;
 color:#FFF; /* アイコンの色を変える場合はここを変更 */
 background-color:#FFC679; /* アイコンの背景色を変える場合はここを変更 */
 border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

/* 目次のデザインカスタマイズ */
.toc-content ol {
 padding: 0 0.5em;
 position: relative;
}
.toc-content ol li {
 line-height: 1.5;
 padding: 0.5em 0 0.5em 1.4em;
 border-bottom: dashed 1px silver;
 list-style-type: none!important;
}

これらの目次の部分のカスタマイズを一度全部削除なさって、1つ1つがどういう意味があるのか、ご確認いただきながら、再度カスタマイズをなさった方が良いのかもしれないです。

すみません、それではタイムアウトのため、フォーラムからは離れます。

子テーマCSSに他にも文法エラーがあります。
★border-style:solid;で実線にし、border-width:1px;で線幅を定義したかった？

#commentform #submit{
font-size:15px; /*送信ボタン文字の大きさ*/
background-color: #fff; /* 送信ボタンの背景色 */
color: #4f463c; /*送信ボタンの文字色*/
border-radius: 5px; /*送信ボタンの角の丸さ*/
height: 50px; /*送信ボタンの縦幅*/
border-style: solid; 1px;★
margin-top:15px; /*送信ボタンとコメント欄の隙間（縦幅）*/
}

@mk2_mk2 さま

ありがとうございます。列挙して下さった3点を削除してみたところ、仰る通りの形になりました！

@mk2_mk2 さま

自分で書いて自分で消しているのですね！？おお、なんと・・・（全然分からん）

分からないのでこういうカスタマイズは色々なサイトの『これをコピペするだけでこれが再現できるよ！』みたいなのをコピペしているだけなので、用語というか意味が全然分かっていませんでした（現在進行形）。

＞カスタマイズを一度全部削除なさって、1つ1つがどういう意味があるのか、ご確認いただきながら、再度カスタマイズをなさった方が良いのかもしれないです。

おお、やはりそこですか、そこなのか・・・

沢山お時間を頂きまして本当にありがとうございます。

@chu-ya さま

これは多分コメント欄の話ですよね？コメント欄も以前カスタマイズに挑戦したのですが全く『こう変えたい』が実現できず諦めてすっかり放置していたところです。デザイン変やけどまあ動くしいいか・・・的に。

これは挙げて頂いた『以下のエラーが見つかりました』のところを削除すべきなのでしょうか？削除するとまた関係ないところが崩れたりするのでしょうか？

@chu-ya さま

＞★border-style:solid;で実線にし、border-width:1px;で線幅を定義したかった？

だと思います！つまり

border-style: solid; 1px;★

を

border-style:solid;　

border-width:1px;

と縦に並べて書き込むと正しい書き方になるということでしょうか。

いずれにせよご助言ありがとうございます。

kayo_ruheさん

すみませんが、時間がありません。

投稿者:: @kayo_ruhe

↑

自分で書いて自分で消しているのですね！？おお、なんと・・・（全然分からん）

はい、先に書いた通りです。（以下のことです）

投稿者:: @mk2_mk2

↑

リストマーカーに関しては、以下のようにお書きになっていて、ご自分で消去なさっています。

.toc-content ol li {
 line-height: 1.5;
 padding: 0.5em 0 0.5em 1.4em;
 border-bottom: dashed 1px silver;
 list-style-type: none!important;
}

「list-style-type: none!important;」の部分です。

先にリンクした解説サイトをご参考にするとお分かりいただけると思います。

投稿者:: @mk2_mk2

↑

【CSS】list-style-typeの使い方：箇条書きのマーカー種類を変える
https://saruwakakun.com/html-css/reference/list-style-type

上記の「1. 箇条書きのマーカーや数字を消す」をご覧いただくと解説されています。

番号やマーカーを消したいときはlist-style-type: noneを指定します。これはolでもulでも同じです。

「list-style-type: none!important;」を指定して消しているので、これを消せば復活するということなのですが・・・。

とはいえ、ここまではすでに昨日書いたりリンクしたことです。
それを丁寧に1つ1つご覧いただくしかないのですけれど。

投稿者:: @kayo_ruhe

↑

分からないのでこういうカスタマイズは色々なサイトの『これをコピペするだけでこれが再現できるよ！』みたいなのをコピペしているだけなので、

はい、ですので、本来必要なさそうなもの、意味のないものなども、どんどん貼り付けなさっているかと思います。

そのため、エラーになったり、エラーにはなっていないけれど、不整合になっていたり、何の効果のないものをお書きになっていたり。
かなりごちゃごちゃしていて、これを整理するだけで、手間がかかるかと思います。

そうであれば、いったん全部消去して、具体的にここをこうしたいとお問い合わせいただいた方が手っ取り早いのかなという気はします。
まずは、ご自分で1つ1つ試してみると良さそうには思いますけれど。
（お問い合わせいただく際は、曖昧に仰られても対応は難しいですので、具体的に図などで伝わるようなご指示が必要かとは思います）

「崩壊している」では、ではどうすれば良いのかいうところは伝わらないかと思います。
（ご本人の主観的には「崩壊している」のだと思いますが、第三者が客観的に見て、どこが崩壊しているのかは分からないです）

私は察しが悪いもので、申し訳ないです。
察しの良い方をお待ちいただくのが良いのかもしれないです。

投稿者:: @kayo_ruhe

↑

削除するとまた関係ないところが崩れたりするのでしょうか？

@mk2_mk2 さま

＞「list-style-type: none!important;」を指定して消しているので、これを消せば復活するということなのですが・・・。

なるほどと思い今やってみましたところ、直りました！たったこれだけで直るとは・・・パッとご覧になってすぐお分かりになるのが凄いです。

大変助かりました、お時間も頂き丁寧に説明して頂きましてどうもありがとうございます！

@chu-ya さま

そうです、CSSは外国語のように全く理解しておりません。

なので該当部分を削除すると今ある形から全然別の個所（例えばサイドバーとかコメント欄とか）まで影響が出て崩れたりするのかしら？と思っていました。

しかし当初の目的の目次レイアウト修正が出来ましたので感謝です！どうもありがとうございました。

kayo_ruheさん

ひとつだけ。

投稿者:: @kayo_ruhe

↑

これは挙げて頂いた『以下のエラーが見つかりました』のところを削除すべきなのでしょうか？削除するとまた関係ないところが崩れたりするのでしょうか？

投稿者:: @kayo_ruhe

↑

なので該当部分を削除すると今ある形から全然別の個所（例えばサイドバーとかコメント欄とか）まで影響が出て崩れたりするのかしら？と思っていました。

エラーを解消したから「崩壊」した訳ではないということはご理解ください。
（結果的にそう見えるのでしょうけれど）

そもそも、kayo_ruheさんが「崩壊」するようなCSSを、ご自身でお書きになっているということです。
（そういう状態でも、今回はエラーのおかげで、たまたま反映されていなかったということかと）

エラーは解消すべきです。
（文法的に誤っているのですから）