「投稿本文下」に「ul、ol」のマーカーを表示するには?

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など 「投稿本文下」に「ul、ol」のマーカーを表示するには?

9件の返信スレッドを表示中
  • 投稿者
    投稿
    • #47054
      たわば
      ゲスト

      お世話になっております。
      Simplicity2の最新版を利用している初心者ですm(__)m

      PHPは分かりませんが
      HTML、スタイルシート、プログミングの
      初歩的な知識は有ります。

      質問内容です。

      「外観 → ウィジェット」と選択し
      「投稿本文下」に「テキスト(任意のテキストやHTML)」を放り込み
      「ul、ol」タグを使って内容を記述すると
      「・」や「1、2、3・・・」といった先頭の文字(マーカー)が表示されません。

      「simplicity 投稿本文下 ul ol」などでグーグル検索したり
      「投稿本文下 ul ol」などで、このサイト内を検索したのですが
      解決方法が分かりませんでした。

      Chromeデベロッパーツールも使ってみたのですが
      いかんせん知識が乏しいので
      分かりませんでした。

      申し訳在りませんが
      よろしくお願いしますm(__)m

    • #47057
      アバター画像わいひら
      キーマスター

      デベロッパーツールなどでテキストウィジェットのIDを調べて以下のように書くとおそらく改善するのではないかと思います。

      #text-26 li {
          list-style-type: unset;
      }

      26の部分はテキストウィジェット固有のID番号が指定されているはずなので、投稿記事下に挿入したテキストウィジェットのIDを調べて修正してください。

    • #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;
      }

      と記述したのですが、マーカーは出ませんでした(>_<)

      ブラウザのキャッシュをクリアしたり
      他のブラウザで表示してみてもダメでした。

      私が、何か勘違いしているか、間違っているか
      何れかだと思います。

    • #47065
      Hidekichi
      ゲスト

      ブラウザがIEだとunsetは動作しませんが、どのブラウザで確認されましたか?

      unsetは親要素から継承された値がある場合には、親要素の値にリセットします。または、継承された値がない場合は初期値にリセットします。unset | MDN

      結局初期化ですから、IEを利用される場合があればinitialでも良いかと思います。

      unset(initial)でダメなら、list-style-typeを直で指定すればよいかと思うんですけれども、親のulでキャンセルされているということはないですかね?

    • #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;
      }

      スタイルシートについて
      あまり詳しく無いので文法が間違っている様です(>_<)

    • #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;
      }

      ならイケると思います。セレクタには優先度や強さがあって、要素で指定するのは優先度が高いので、できるだけ識別用のクラスを入れて上書きできるようにしておくか、表示・非表示をクラスを用いて仕分けるようにしておくのが便利です。

    • #47069
      たわば
      ゲスト

      Hidekichi様
      お世話になっておりますm(__)m

      マーカーを色々変化出来ると便利ですね。

      ただ、とりあえず今の所は
      マーカーを色々変化させる事は考えていないので
      とり急ぎ、こちらのスタイルにて対応致しました。

      .widget_text ul {
        list-style-type:  disc;
      }
      .widget_text ol {
        list-style-type:  decimal;
      }

      以下の環境で、正しく動作する事を確認致しました。
      windows10+IE10、FireFox、Chrome
      android+Chrome

      詳しい解説に加え
      サンプルソースまで記載して頂き
      有難うございました(´▽`)

    • #47072
      アバター画像わいひら
      キーマスター

      あら、短く書いて楽をしようとunsetを使ってみようっとunsetじゃダメでしたか。

      とりあえず僕もテキストウィジェット内のマーカーや数字が表示されなくなるのは、本懐ではないので、hidekichiさんの書かれた以下の方法を次のバージョンで適用しておこうと思います。

      .widget_text ul {
        list-style-type:  disc;
      }
      .widget_text ol {
        list-style-type:  decimal;
      }

      hidekichiさんありがとうございます。

    • #47078
      Hidekichi
      ゲスト

      サンプル: :notを利用して何かしら識別クラスがついてない場合は非表示にする | jsFiddle

      ちょっとあまり目にしない方法ですが、上記サンプルのように何かしらclassがついてない場合は非表示というのもできます。必要であれば付与したクラス内で非表示にすれば良いので案外アリかも知れません。

    • #47081
      アバター画像わいひら
      キーマスター

      そんな指定方法があるとは知りませんでした。
      1つ勉強になりました。機会があれば使ってみようと思います!

9件の返信スレッドを表示中
  • トピック「「投稿本文下」に「ul、ol」のマーカーを表示するには?」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)