PC画面ではこうなります。

該当ページのurlを置いてくださいね

@kautakku

サイトはまだ作成中で公開しておりません。と書かれていますよ。

公開しておらず、すみません。

https://ponhiro.com/cocoon-list-design/

の記事を参考に、ボックスのCSSを追加しました。

.list-box-2{ 　　　background: #fef8f9;/* 背景色 */ 　　　border-radius: 4px; 　　　max-width: 600px; 　padding: 2em; 　　　margin:0 auto; 　　　border:1px solid; 　　　border-color:#f27398; /* 線の色 */ } @media screen and (max-width: 768px){ .article ul, .article ol { padding-left: 0px; /* スマホ閲覧時の余白リセット(cocoon) */ } }

どうもこの「スマホ閲覧時の余白リセット」と記載されているものが左よせになっている原因かと思いました。

そこで、こちらの記事を参考に以下コードを子テーマのcssに追加しました。

https://wp-cocoon.com/community/demands/%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%81%AE%E5%B7%A6%E5%8F%B3%E4%BD%99%E7%99%BD%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/

@media screen and (max-width: 768px) { .content .main, .content .sidebar { padding: 13px; } }

こちらのコードのpaddigの後にある13pxの数字を大きくすることで右側にずらすことができましたが、正しい方法でしょうか？

申し訳ないですが、公開ページのソースコードを見ないと、何とも言えません。
基本的に、独自カスタマイズはサポート対象外となっているうえに、実物のソースコードも見れないのでは、ちょっと対応は難しいです。

こちらのコードのpaddigの後にある13pxの数字を大きくすることで右側にずらすことができましたが、正しい方法でしょうか？

通常の文章や画像などにも影響していいのであれば、正しいと思います。

ところで、【Cocoon】全40通り！おしゃれなリスト(箇条書き)を作る！コピペOK！で紹介されているカスタマイズは、2 つの CSS をコピペする必要があります。好きなリストを選ぶの CSS は、コピペされていますか？

Akiraさん

コメントありがとうございます。

リストとボックスの２つのcssをコピーしていましたが、そちらはうまく表示されるものの、

通常のリストを記載したときに、左端にみきれてしまうほどぴったりついてしまいます。

• テスト
• テスト
• テスト

1. テスト
2. テスト
3. テスト

これらのリストが上記カイスタマイズ時には左側に酔ってしまって困っていました。

>>通常の文章や画像などにも影響していいのであれば、正しいと思います。

リストの頭出しのところ調整したかったのですが、確かに他のところも影響をうけてずれてしまっていました。

通常のリストを記載したときに、左端にみきれてしまうほどぴったりついてしまいます。

であれば、左側の余白を 0 にするのは、カスタマイズ紹介記事のリストのみにすれば解決する気がします。

この部分を…

@media screen and (max-width: 768px){
  .article ul, .article ol {
      padding-left: 0px; /* スマホ閲覧時の余白リセット(cocoon) */
  }
}

例えば、このようにするのはどうでしょうか？

@media screen and (max-width: 768px) {
  /* カスタマイズ紹介記事の 6 番目のリストのみ左余白を 0 にする */
  .article .list-6 {
    padding-left: 0;
  }
}

※ カスタマイズ紹介記事の「数字を使ったリスト(区切り線あり)」の場合の CSS です。

Akiraさん

ありがとうございます。

上記サイトのコードをはりつけるカスタマイズではそのままではどうもだめだったようで、教えていただいたコードに置き換えることで無事思い通りの表示になりました！

本当に助かりました。