- このトピックには7件の返信、2人の参加者があり、最後に
により11年、 1ヶ月前に更新されました。
-
投稿
-
-
いつもお世話になっております。
番号なしリストの表示をチェックマークなどの記号ものに変更したいのですが、スタイルシートへの記述がよくわかりません…。
子テーマに記述する際はどうきじゅつしたらいいのでしょうか？
よろしくお願いします！ -
出来合いのスタイルに変更するなら、以下のスタイルシートで、
list-style-type－スタイルシートリファレンスチェックマークの画像を利用するなら以下の方法でできるかと思います。
list-style-image－スタイルシートリファレンス画像で設定する場合は、Imagesフォルダに画像を行ってstyle.cssに以下のように書けば設定できるかと思います。
#the-content ul{ list-style-image: url('images/filename.png'); } -
おそらく、質問の内容の、「番号なしリストの表示」←これがどの部分を表しているかがわからないので、わいひらさん的には、その方法しかかけなかったと思います。
もし仮に子テーマstyle.cssにわいひらさんが書いた内容を書くと、すべてのulのliにその設定が適用されます。
例えば、記事を書いている時、リストで何かしら表示したいと思ったら、
div class=”test”
ul
li
/ul
/divという構成で書きます。子テーマstyle.cssに、
.test ul li{
list-style-image: url(‘../images/filename.png’);
/* 黒丸
list-style-type: disc;
*/
/*黒四角
list-style-type: square;
*/
}
このように書けば、記事中の.textがある部分の中のリストは画層リストマークで表示されるようになります。
コメントアウトしている部分はリストマークを「・」などで書き出す設定です。list-style-type cssでぐぐればサンプルは色々出てくるでしょう。つまりは、どの部分のリストをどのように表示させるかがポイントです。どのように表示させるかはわいひらさんのレスにもあった通り。「どの部分」ここが不明なので、もし手を加えたい箇所があれば、そこを指定してもらえれば詳しいレスが期待できるかと思います。
全体に指定しても良いのですが、その場合は:not()セレクタ等を利用して、適用外のセレクタを指定すると幸せになるかも知れません。
-
☓ 画層リストマーク
◯ 画像リストマーク -
わいひらさん、Hidekichiさん返信ありがとうございます。無事に画像を使ったリストが使えるようになりました。言葉足らずで申し訳ありませんでした。分かりづらかったですよね。
重ねてのリストの質問になるのですが、無事にリストをチェックマークで作れたのですが。
1.このリストの行間をもう少し広くしたい。
2.チェックマークと文章の始まりの感覚をもう少し広くしたい。
この二点はCSSで変更可能でしょうか？よろしくお願いします。
/Users/shige/Desktop/スクリーンショット 2015-08-26 17.00.15.png -
-
#31278
あらら。投稿がかぶってしまいました。1.このリストの行間をもう少し広くしたい。
2.チェックマークと文章の始まりの感覚をもう少し広くしたい。それでしたらこんな感じでいけるのではないかと思います。
#the-content ul li { margin-bottom: 10px; padding-left: 10px; }数字は適当ですので調整してください。
-
バッチリでした( ^ω^ )助かりました。ありがとうございます！
-
- トピック「番号なしリストの表示を変更したい」には新しい返信をつけることはできません。