リストデザインが変更できない件について。

[KATU]

SANGOからJINへ先日テーマ変更した者です。

記事内の箇条書きリストのデザインを変更したいです。

記事内の箇条書きリストを枠で囲ったデザインい変更したいと思い、「https://code.nomad.inc/wordpress/jin/list/」などを参考にしましたがうまくできません。

また、他にも箇条書きリストのデザインは調べれば多いので、追加CSSへ追記したりしましたが無理でした。

出来たとしても、サイドバー や目次にもそれが反映してしまいデザインがおかしくなります。

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

「https://saruwakakun.com/html-css/reference/ul-ol-li-design」を参考にして箇条書きリストを変更しましたが、アップロード画像のようになります。

HTML、CSSの知識がないので分かりやすくどのように進めれば良いのか教えて頂けると幸いです。

---

マニュアル確認済み
キャッシュクリア済み
WordPressのバージョン :
ご利用のサーバー名 : エックスサーバー
PHPのバージョン :
OS : Mac
ご利用のブラウザ :
該当サイトのURL : https://katulog.net/

[Ryota]

@KATU さん

こんにちは！JIN運営チームのりょうたです。
この度はJINご利用いただき誠にありがとうございます。

記事内の箇条書きリストを枠で囲ったデザインい変更したいと思い、「https://code.nomad.inc/wordpress/jin/list/」などを参考にしましたがうまくできません。

僕の方でリスト作ってみましたが、

<div class="nomadList2">
  <ul>
    <li>リスト１</li>
    <li>リスト２</li>
    <li>リスト３</li>
  </ul>
</div>

上記をテキストエディターに、

.nomadList2 {
  padding: .7em 1.5em;
  margin: 15px 0;
  color: #272727;
  border: solid 1px #272727;
  border-radius: 10px;/*角の丸み*/
  max-width: 100% !important;
  width: 100% !important;
}
.nomadList2 ul {
  margin: 0;
  padding: 10px 0;
}

上記を追加CSSに貼り付けただけでできたので@KATU さんでもできると思います。

他のコードは一切追加していないので変にCSSを足したりせずに、

https://code.nomad.inc/wordpress/jin/list/

上記記事を参考にそのままコピペだけで行けると思いますよ。