実際のURLをご提示願えますか。

• ご自身のカスタマイズが影響してるんじゃないですかね？？？

https://gyazo.com/acb155b9ab126a3b307836f7ed19aebf

https://wp-cocoon.com/layout/#toc8

Cocoonではそんな風にならないので。

@kautakkuさま

https://sakurabashi.dental/test/2020/01/22/hello-world/

こんな感じになってしまいます。

ＰＣでもスマホでも不自然な余白になっています。

ボックスで囲まないと適度な余白（インデント）になっていますが、ボックスで囲んでしまうと余白が空きすぎております。

404で表示されません。

@yhira

https://sakurabashi.dental/test/2020/01/22/test/

大変申し訳ございません。こちらです。

このような感じの番号付きリストでCocoonのボックスで囲んでもスマホで見た場合にリストの左の余白が空きすぎず、ボックスで囲んでいないときは適度なインデントがついているものがあったらいいなと思っております。

ちょっと意味がわからないのですが。

画像でココが広いもしくは狭い。と指定していただけますか。

・ボックスで囲むとスマホで見た時にリストの左に大きな空白が出来てしまう

https://gyazo.com/c6a552e263fc4dfaabd824298838640f

であればボックスのpadding内側余白を調整したらいいとおもうんですが、・・・

・ボックスで囲まないと空白がほぼゼロになってしまい、これはこれで不格好

余白はぜろではないですよ。

https://gyazo.com/b68056cbe0f000915826f7531e4e2f31

これは記事の一番下にol番号付きリストを、デベロッパーツールで表示させただけです。

ゼロではないですが。本番環境の子テーマをテスト環境に導入してから書き込み願えたら・・・

質問のマナーがなってなかったです。大変申し訳ありません。

余白を調整する技術が私自身に無く、他にも困っている方ももしかしたらいらっしゃるかなと思って要望させていただきました。

※一部要望を訂正します。ボックスで囲んでいない場合は余白はちょうどいい感じです。

画像を添付しました。このような感じで前後左右（左だけかと思ったのですが、改めて見たら前後左右でした）に大きな余白ができてしまいます。

この画像の例はアイコンリストをボックスで囲んだものですが、2.pngのリストのようにほどよい余白で表示させたいのです。

そして、「1.」「2.」だと少し寂しいので3.pngのようなおしゃれリストがあればありがたいなあという大変わがままな要望です。

スマホもスクショしました。4.pngです

参照URL　 https://sakurabashi.dental/test/2020/01/23/test2/

2.pngです

3.png（おしゃれな番号付きリスト）です

4.png（スマホでのスクショ）です。折り返し位置もズレてしまいます。

質問のマナーが悪くご迷惑をおかけしたので、こちらの要望は取り下げいたします。

大変申し訳ございませんでした。

投稿者:: @misumi

質問のマナーが悪くご迷惑をおかけしたので、こちらの要望は取り下げいたします。

大変申し訳ございませんでした。

全然そんなことないですよ。説明はすごくわかりやすかったです。

おそらくこれは、「タブボックス」の中に「アイコンリスト」が入っているからだと思います。
こういう使い方は想定していませんでした ?
「タブボックス」を使用せず、「アイコンリスト」の枠線を表示するというのではダメでしょうか？

ありがとうございました。なんとお優しい方。。。

投稿者:: @yhira

「タブボックス」を使用せず、「アイコンリスト」の枠線を表示するというのではダメでしょうか？

はい！大丈夫です。もし採用いただけるのでしたらこちら↑のやり方でお願いいたします。（って会話ズレてますかね？）

質問のマナーが悪くご迷惑をおかけしたので、こちらの要望は取り下げいたします。

大変申し訳ございませんでした。

伝えようとされてる事、すごく伝わりましたよ＾＾

お疲れ様です！

投稿者:: @misumi

4.png（スマホでのスクショ）です。折り返し位置もズレてしまいます。

こっちは装飾が影響してそうかも。

例えば。チェックマークリスト前にあるの余白っぽいです。

https://gyazo.com/8d1ab2eab68ed955481b658c6adbb5e3

.iconlist-box li::before {
	margin-right: 0;
}

これで人によってはチェックマークとリストの項目：文字列の余白がほしい。って人もいるかもしれないですが、シンプルにこれで調整できるかと思います。※子テーマCSSに追記

アフター

https://gyazo.com/e7d5e1cc51c6354f95367c5862522029

ただ文字サイズを一部変更したり、小文字など使えば引用の指摘通り
右側はそろわない気もします。

追記

ついでにチェックマークの余白が気になるなら、CSSをたくさん書けばそれなりに余白を作ることは可能だと思います。たぶんですけど。

七転八倒しているうちに、なぜかこんなのが完成してしまい力尽きました。

スマホでもいい感じなのでせっかく自分で作ったしこれでいいかなと思い始めています。

デフォルトスキンです。

スマホ

七転八倒しているうちに、なぜかこんなのが完成してしまい力尽きました。

スマホでもいい感じなのでせっかく自分で作ったしこれでいいかなと思い始めています。

デフォルトスキンです。

自分で作ったし。とありますのでそのstyleを書き込みしていただけますか。

もしくは記事を書いてリンクを貼ってください。

漢字ばかりですけど
消化不良感満載。

かもですね？検索ユーザーさんも回答側も。

わいひらさんに、要望の内容さえ伝われば良いですが。個人的に

@kautakkuさん

子テーマのCSSの記述した内容はこちらになります。4色作りました。

個人的にはずーーーっと前に似たページを作成してるのでCSSを知りたいわけではない感じです。申し訳ないです。

そのページをずっと置いてるのであればそれも良いかもしれないですね。ただCSSをチェックしきれない人は気の毒カモ。

～追記　　　上に書き込みましたが　　ここまで～

トピックとは関係ない、別途書き込みの件にてトピック主さんにご連絡。

わいひらさんが対応してくださったようです。書き込みをたくさんしたんでお忘れかと思いまして。

※私も書き込みをチェックし忘れてたみたい。

念のため

書き込みチェックしてください。トピック主さん用リンク

（私的）最終形はこうなりました

htmlの記述

ここにテキストを入力ここにテキストを入力ここにテキストを入力ここにテキストを入力ここにテキストを入力ここにテキストを入力ここにテキストを入力
<ul class="list-blue m10-l">
<li>ここにテキストを入力ここにテキストを入力ここにテキストを入力ここにテキストを入力ここにテキストを入力ここにテキストを入力ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>

</ul>

<ol class="list-orange2 m10-l">
<li>ここにテキストを入力ここにテキストを入力ここにテキストを入力ここにテキストを入力ここにテキストを入力ここにテキストを入力ここにテキストを入力ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ol>

<div class="box-gray">
<span class="box-title">ここにタイトル</span>
<ul class="list-gray small1">
<li>ここにテキストを入力ここにテキストを入力ここにテキストを入力ここにテキストを入力ここにテキストを入力ここにテキストを入力ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
</div>

<div class="box-red">
<ol class="list-red2 small1">
<li>ここにテキストを入力ここにテキストを入力ここにテキストを入力ここにテキストを入力ここにテキストを入力ここにテキストを入力ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ol>
</div>

投稿者:: @misumi

ありがとうございました。なんとお優しい方。。。

投稿者:: @yhira

「タブボックス」を使用せず、「アイコンリスト」の枠線を表示するというのではダメでしょうか？

はい！大丈夫です。もし採用いただけるのでしたらこちら↑のやり方でお願いいたします。（って会話ズレてますかね？）

これは、「アイコンリスト」のタイトルをあたりにカーソルを乗せて、出てくる「色設定」の「ボーダー色」を変更するとできるかと思います。

@yhiraさん

ありがとうございます。さっそく試してみます。