aykuuさん

実際に目次のあるページのURLをご提示いただくと、詳しい方がご覧になってくださるかと思います。

aykuuさん

4～5記事を開いて、確認したつもりですが、目次を発見できませんでした。
この状態では何とも言えないと思います。

申し訳ございません。

色々と試しているうちに、目次の表示自体を消してしまっていました。

再度ご確認願えますでしょうか。

よろしくお願いいたします。

aykuuさん

ご提示いただいたwidth:100%を追記した箇所の、更に14～5行下に、以下のものがあります。

/**目次**/
.toc {
  display: block;
  padding: 0px;
  margin: 1% 18%;
  border: 1.2px #6ec4db solid !important;
  font-family: 'Noto Sans JP', sans-serif;
}

上記のmarginの「18%」で、左右に余白を設定していることから、結果的に目次が右に寄ってしまうのだと思います。

aykuu さん

ｍｋ２ さん

横から失礼します。

横幅を広げようとして、失敗しているだけだと思われます。

以下のコードだけを削除すれば、自然な体裁になるかと思われます。

その他のコードはそのままで良いような気もしますけども。

.toc {
    width: 100%;
}

aykuu さん

リフィトリーさん

aykuu さんは、おそらく目次内の折り返しを嫌ったのかなと推測しました。

でも、その場合でも100%は広い気がします。
fit-contentとかではどうかなと思いますが。

その場合でも、marginの左右は調整しておかないとという気はします。
中央揃えであれば、左右にmarginはなくても良い気がするのですが。

@mk2_mk2  さん

この目次のデザイン、どなたがデザインされたのかは知りませんが、上手くできているように思います。

最近このデザインをコピーしてお使いの方が多いみたいですね。

折り返ししてしまうような長いタイトルのページを、私が見ていないだけかもしれませんが・・

よくできているデザインなので、壊さない方が無難のように感じました。

リフィトリーさん

となると、元々は

margin: 1em auto;

ですから、それに戻すってことですかね。
（つまり、marginのアレンジを削除する）

@mk2_mk2 さん

aykuuさん

レイアウトが崩れてしまったため、フォーラムに書きこまれたのだと思われますので、aykuuさんが、お好きなように、なさるとよろしいかと思います。

aykuuさん

リフィトリーさん

ご本人がどういう意図で、そもそもwidthの件も、その他の件もアレンジを加えたのかですね。

お試しになっていただければと。

@mk2_mk2 さん

aykuuさん

ご自身で、なぜレイアウトが崩れてしまったのか、いろいろ試してみられるのも良いのではないかと思います。

また、レイアウトが崩れた場合の対処法も、わかっていた方が良いのかもしれません。

aykuuさん

参考になりそうなトピックのリンクを貼っておきます。

【初心者向け】WordPressやCSS初心者向けの記事を紹介するトピック

https://wp-cocoon.com/community/postid/31048/

WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方

https://nelog.jp/how-to-use-developer-tools-for-wp-beginner

ｍｋ２さん

リフィトリーさん

ありがとうございます。

ｍｋ２さんのおっしゃる通り、目次内の折り返しがきになって質問させていただきました。

結果的に、「fit-content」にして解決しました。（添付35行目）

なぜか赤字ですが、きちんと反映したのでよしとします・・・。

いつも的確なアドバイスありがとうございます。

今後ともよろしくお願いいたします。

aykuuさん

「fit-content」の後ろに、セミコロン(;)がないため、赤字になっていると思います。

ああ、すみません、そもそもwidthがないです。
「width: fit-content;」になるはずです。
（ってことは、効いていないけど、OKってことのようにも思います。）

その上の、「display: none」もセミコロンがないです。

ちなみに、.tocのセレクタが2ヶ所に分散していますので、まとめてしまっても良いかも知れません。
（そこは、aykuuさんの管理しやすいように。）

aykuu さん

fit-contentは、IE11がサポートしていないようですので、コンテンツの中身に応じて目次の横幅を伸縮させるには、以下のようにします。

.toc {
    display: table;
    padding: 0px;
    margin: 1.5em auto;
    border: 1.2px #6ec4db solid !important;
    font-family: 'Noto Sans JP', sans-serif;
}

aykuu さん

上記だと、文字数が少ないときに横幅が小さくなりすぎる、というときは、以下のようにすると良いかもしれません。

.toc {
    display: table;
    padding: 0px;
    margin: 1.5em auto;
    border: 1.2px #6ec4db solid !important;
    font-family: 'Noto Sans JP', sans-serif;
    min-width: 60%;
}

aykuu さん

リフィトリーさんの仰るとおり、fit-contentはIE11はサポートしていないようです。

日本ではIE11を無視できない気もしますので、リフィトリーさんの仰る方法が良いかも知れません。

混乱させてしまい、申し訳ありません。

ありがとうございます！

教えていただいた通りに記載して、反映させました。

aykuuさん

目次の上の「display: none」には、セミコロン(;)を追加しておいた方が、良いと思います。
（今は問題ないかも知れませんが、後々…もしかすると。）

@aykuu さん

コードが効いていません。

CSSのコードは、下の行に書いたものが優先されてしまいます。

新しいコードは、一番下にまとめて記述してみてください。

@mk2_mk2 さん

プロパティが一つだけの場合は、セミコロンが無くてもOKです。

でも、つけておく習慣はつけておいた方が良いかもしれません。（ダジャレになってしまっていますが）

ああ、ご存知ですよね。すみません。

リフィトリーさん

はい、デリミッターでしょうから、1つの場合は…なんですけど。

display:noneですから、プロパティが2つ以上になることもあまり考えられないですが。

aykuuさん

今回追加していただいた、15～20行下に、もう1つ「.toc」があるんです。

その下に、今回リフィトリーさんがご提示いただいたコードを移動していただければ、効くはずです。

@mk2_mk2 さん

もしかしたら、aykuuさんは、メインカラムの横幅いっぱいに広がるぶんには、別に気にしていないのかもしれませんね。

リフィトリーさん

はい、そんな気がしてきました。

@mk2_mk2 さん

ということで、晩御飯にしようと思います。

リフィトリーさん

私もそうしようかなと思います。

お腹すきましたし、寒いですし、少し温まらなくては。