Q&A
ご提示のHTMLはコードエディタに入力したものですか？
それとも、実際のページのHTMLの抜粋ですか？
もし、前者であれば、後者をご提示いただけますか？
前提・実現したいこと
すみません、初心者です。
wordpressでulタグのリストの頭にくる黒丸を白丸にしようしています。
その際、CSSで指定すると白丸と黒丸が二重に表示されてしまうのですが、どうすれば正しく表示されるのでしょうか？
該当のソースコード
HTML
1<ul> 2 <li>あああ</li> 3 <li>いいい</li> 4 <li>ううう</li> 5 <li>かかか</li> 6 <li>ききき</li> 7 <li>くくく</li> 8</ul> 9```css 10ul { list-style-type: circle;} 11 12### 試したこと 13 14個別記事ごとにCSSを指定できるようfunction.phpをいじってますが、HTMLに直接styleを打ち込んでも同じ結果になりましたので何か根本的に間違っているんだと思いますが、ググっても全く出てこないので途方に暮れています…。
コードエディタです！
すみません、実際のページのHTMLとは、投稿編集画面で“HTMLとして編集”というところから見られるもののことでしょうか？そうだとしたら同じでした。
いえ、違います。
スクリーンショットは実際にサイトを表示した時のものだと思いますが、そのHTMLソースはどうなっていますか？コードエディタに入力したものと違うのではないですか？、という補足依頼です。
初心者で要領を得なくてすみません。
wordpressの投稿下書きのHTMLソースはどのように見れるのでしょうか？
ああ、下書きなんですか、なるほど……
開発者ツールなどで、HTMLと効いているCSSを確認した方が話が早そうですね。
https://qiita.com/d-dai/items/0b580b26bb1d1622eb46#elements%E3%82%BF%E3%83%96
chromeのデベロッパーツールで見ても、HTMLの記述はアップしたスクショと同じようになっているのではないかと思います。
CSSの指定の仕方がおかしいんだと思うんですが、違うんですかねぇ。。。
全然要領を得なくてすみません（ ; ; ）
「アップしたスクショと同じようになっているのではないかと思います」というのは、確認したという意味ですか？ それとも確認するまでもないという意味ですか？
確認したという意味です！
なるほど。
効いているスタイルも
ul { list-style-type: circle;}
だけだった、ということなんですね？
と、思うんですが、そこは個別の投稿ごとにCSSが指定できるようにhttps://naifix.com/article-css/←こちらのサイトを参考にfunction.phpに追記をしてCSSを記述しているので、効いているスタイルがul { list-style-type: circle;}だけかどうかはちょっと自信ありません…。
開発者ツールで見てもわからない、ということはないと思うのですが……？
たぶんCSSが間違っている（でないと黒丸と白丸が重複しないと思うので）とは思いますが、開発者ツールで見てもどこが間違っているのか、効いているCSSが何なのんか、が素人のためわからないの質問させていただきました…;
さきほど貼ったURLに開発者ツールでスタイルを見る方法が書いてあったのですが、難しかったですか？
なぜ繰り返ししつこく確認しているのかというと、ご提示のHTMLとCSSで問題が再現しないからです。
なので、ご提示いただいていない部分に原因があるのだろう、と推測しています。
ですから、他になにか情報が得られないと解決しないのではないかと思っています。
辛抱強くありがとうございます！
ulタグにカーソルを合わせて“検証”を押して出てくるCSSをそのままコピペすると↓このようになりましたが、何かおわかりになりますでしょうか。
element.style {
}
ul {
list-style-type: circle;
}
ol, ul {
padding: 0;
/* list-style-type: none; */
}
dl, menu, ol, ul {
margin: 1em 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheet
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
ol, ul {
padding: 0;
}
↑リセット系のCSSだと思います。
これが有効なら、そもそも circle も表示されてないはずです。
やはり、ご提示のHTMLの外側になにかあるような気がします。
ulタグの直前のHTMLも念の為コピーすると下記のようになっています！
<div class="add titleunder">
<div id="custom_html-11" class="widget_text widget widget_custom_html">
<div class="textwidget custom-html-widget"></div>
</div>
</div>
<ul>
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
<li>かかか</li>
<li>ききき</li>
<li>くくく</li>
</ul>
なにもおかしそうなところはないですね……
とりあえず、原因追求は諦めて、
<ul class="list-style-type-circle">
<li>あああ</li>
として、
ul.list-style-type-circle{
list-style-type: circle
}
みたいなアドホックな対応を取るのはダメですか？
今やってみました！
そうしたところ、添付した画像の“ここも何かおかしい”と表記した部分の白丸は消えましたが、本文は相変わらず白丸、黒丸が連なって表示されてしまいます…。
そうでしたか……
もしかして、li::before になにかスタイルがついている、とかはないですか？
.entry-content ul li:before {
background: #5C6B80;
↑これでしょうか…？
それかもです。
全文コピペできますか？
上記スタイルの下にこのように続いています↓
.entry-content ul li:before {
content: " ";
width: 7px;
height: 7px;
background: #5C6B80;
box-shadow: -1px -1px 1px rgba(97, 97, 97, 0.5) inset;
display: block;
position: absolute;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
left: 2px;
top: 9px;
}
下から5列目、6列目の-から始まっている部分は横線で打ち消されています！
それだ！
これをまるっと消すか、消せないのであれば、カスタムCSSで打ち消せばいいかと思います。
打ち消すCSSはこんな感じですかね。
ul.list-style-type-circle li::before{
width: 0px;
}
あ、黒丸だけ消えました！！
白丸とリストの最初の文字の隙間が不自然に空いていますが、それはCSSでなんとかなりそうです！！
圧倒的感謝です…ありがとうございます…（；＿；）
今プログラミング勉強しているんですが、今回のは何が原因だったのでしょうか？？（聞いてもわからないかもしれませんが…）
原因は、wordpress（のテーマ）のCSSで、黒丸を表示するようにスタイルをつけていた、ということです。
それが list-style-type を使わないけど、list-style-type を使っているように見える、ちょっと変わったやり方だったため、原因を特定するのに手間がかかりましたね。ご解決されて何よりです。
なるほど…。ググってもどこにも出てこなかったので、助かりました(^ ^)
ご丁寧にありがとうございました！！
回答1件
あなたの回答
tips
プレビュー
