Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › 「投稿本文下」に「ul、ol」のマーカーを表示するには?
-
投稿者投稿
-
-
2016年11月3日 10:06 PM #47054
たわば
ゲストお世話になっております。
Simplicity2の最新版を利用している初心者ですm(__)mPHPは分かりませんが
HTML、スタイルシート、プログミングの
初歩的な知識は有ります。質問内容です。
「外観 → ウィジェット」と選択し
「投稿本文下」に「テキスト(任意のテキストやHTML)」を放り込み
「ul、ol」タグを使って内容を記述すると
「・」や「1、2、3・・・」といった先頭の文字(マーカー)が表示されません。「simplicity 投稿本文下 ul ol」などでグーグル検索したり
「投稿本文下 ul ol」などで、このサイト内を検索したのですが
解決方法が分かりませんでした。Chromeデベロッパーツールも使ってみたのですが
いかんせん知識が乏しいので
分かりませんでした。申し訳在りませんが
よろしくお願いしますm(__)m -
2016年11月3日 10:23 PM #47057
わいひらキーマスターデベロッパーツールなどでテキストウィジェットのIDを調べて以下のように書くとおそらく改善するのではないかと思います。
#text-26 li { list-style-type: unset; }26の部分はテキストウィジェット固有のID番号が指定されているはずなので、投稿記事下に挿入したテキストウィジェットのIDを調べて修正してください。
-
2016年11月3日 11:16 PM #47059
たわば
ゲストわいひら様
返信、有難うございますm(__)m。<!-- ページリンク --> <div id="text-3" class="widget-under-article widget_text"><div class="widget-under-article-title main-widget-label">投稿本文下</div>↑それっぽい記述を見つけたので
「Simplicity2 child: スタイルシート (style.css)」に#text-3 li { list-style-type: unset; }と記述したのですが、マーカーは出ませんでした(>_<)
ブラウザのキャッシュをクリアしたり
他のブラウザで表示してみてもダメでした。私が、何か勘違いしているか、間違っているか
何れかだと思います。 -
2016年11月4日 3:04 AM #47065
Hidekichi
ゲストブラウザがIEだとunsetは動作しませんが、どのブラウザで確認されましたか?
unsetは親要素から継承された値がある場合には、親要素の値にリセットします。または、継承された値がない場合は初期値にリセットします。unset | MDN
結局初期化ですから、IEを利用される場合があればinitialでも良いかと思います。
unset(initial)でダメなら、list-style-typeを直で指定すればよいかと思うんですけれども、親のulでキャンセルされているということはないですかね?
-
2016年11月4日 9:45 AM #47067
たわば
ゲストHidekichi様
返信、有難うございますm(__)m>ブラウザがIEだとunsetは動作しませんが、どのブラウザで確認されましたか?
windows10+FireFox、Chrome
android+Chromeの環境で確認しました。
F5を押したり、キャッシュをクリアしてもダメでした。投稿本文下に張り付けた「ol」や「ul」タグの一文をコピペして普通に投稿すると、マーカーは表示されるので、HTMLタグの文法に間違いは無いと思います。
「ol」や「ul」タグのスタイルを、過去に指定した記憶は無いので、Simplicityの元々の仕様かと思っています(違っていたら御免なさい)
>unset(initial)でダメなら、list-style-typeを直で指定すればよいかと思うんですけれども、親のulでキャンセルされているということはないですかね?
直でこう指定した所、マーカが表示されました。
#text-3 li { list-style-type:disc; }これでもとりあえず良いのですが
これだと「ul、ol」いずれの場合も
「・」になってしまうので
こう指定した所、マーカーが表示されなくなりました。#text-3 li { ul.list-style-type:disc; ol.list-style-type:decimal; }スタイルシートについて
あまり詳しく無いので文法が間違っている様です(>_<) -
2016年11月4日 11:28 AM #47068
Hidekichi
ゲスト#text-3 li { ul.list-style-type:disc; ol.list-style-type:decimal; }は書き方としては、
#text-3 ul li { list-style-type: disc; } #text-3 ol li { list-style-type: decimal; }こう書きます。が面倒くさいので、
.li--disc { list-style-type: disc; } .li--decimal { list-style-type: decimal; }このようなクラスを作っておくか、ul,olに指定します。
テキストウィジェットは、.widget_textというクラスが必ず入りますので、.widget_text ul { list-style-type: disc; } .widget_text ol { list-style-type: decimal; }こんな感じにします。
サンプル: !important付きでキャンセルさせない | jsFiddle
サンプル: classを利用して部分的に!important | jsFiddle
サンプル: list-styleがキャンセルされていても::beforeでなんとかする | jsFiddleいすれのサンプルも#sidebar内のul,olはリストスタイルをキャンセルしてます。リストスタイルは一度noneすると簡単には戻らないので、使いどころが難しいのですが、「限定的にキャンセルさせる」か、あるいは「キャンセルされたul,olを別途クラスを指定して!important付きで新たに設置する※」か、複雑なリストでないのであれば「beforeなど疑似要素を利用する」などの手があります。
※
ul,olでキャンセルすると、クラスの指定だけでは戻らないので#sidebar ul { list-style:none;} .widget_text ul { list-style-type: disc; }これはダメで、
#sidebar ul { list-style:none;} .#sidebar .widget_text ul { list-style-type: disc; }ならイケると思います。セレクタには優先度や強さがあって、要素で指定するのは優先度が高いので、できるだけ識別用のクラスを入れて上書きできるようにしておくか、表示・非表示をクラスを用いて仕分けるようにしておくのが便利です。
-
2016年11月4日 3:46 PM #47069
たわば
ゲストHidekichi様
お世話になっておりますm(__)mマーカーを色々変化出来ると便利ですね。
ただ、とりあえず今の所は
マーカーを色々変化させる事は考えていないので
とり急ぎ、こちらのスタイルにて対応致しました。.widget_text ul { list-style-type: disc; } .widget_text ol { list-style-type: decimal; }以下の環境で、正しく動作する事を確認致しました。
windows10+IE10、FireFox、Chrome
android+Chrome詳しい解説に加え
サンプルソースまで記載して頂き
有難うございました(´▽`) -
2016年11月4日 6:04 PM #47072
わいひらキーマスターあら、短く書いて楽をしようとunsetを使ってみようっとunsetじゃダメでしたか。
とりあえず僕もテキストウィジェット内のマーカーや数字が表示されなくなるのは、本懐ではないので、hidekichiさんの書かれた以下の方法を次のバージョンで適用しておこうと思います。
.widget_text ul { list-style-type: disc; } .widget_text ol { list-style-type: decimal; }hidekichiさんありがとうございます。
-
2016年11月4日 9:07 PM #47078
Hidekichi
ゲストサンプル: :notを利用して何かしら識別クラスがついてない場合は非表示にする | jsFiddle
ちょっとあまり目にしない方法ですが、上記サンプルのように何かしらclassがついてない場合は非表示というのもできます。必要であれば付与したクラス内で非表示にすれば良いので案外アリかも知れません。
-
2016年11月4日 10:15 PM #47081
わいひらキーマスターそんな指定方法があるとは知りませんでした。
1つ勉強になりました。機会があれば使ってみようと思います!
-
-
投稿者投稿
- トピック「「投稿本文下」に「ul、ol」のマーカーを表示するには?」には新しい返信をつけることはできません。