ul olリストスタイルがどうしても変更できません

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも ul olリストスタイルがどうしても変更できません

  • このトピックには14件の返信、2人の参加者があり、最後にHidekichiにより9年、 7ヶ月前に更新されました。
14件の返信スレッドを表示中
  • 投稿者
    投稿
    • #49588
      raopi
      ゲスト

      お世話になります。

      デフォルトの状態でCSSを触ったのですが

      リストスタイルがどうしても変更できません。

      触っているところが違うのかもしれないので、CSSのどこを変更すればよろしいでしょうか。

      もしくは子テーマに何を記述すれば変更できますでしょうか。

      ちなみに番号ではなく点のほうを画像にしようと考えています。

      番号リストはそのまま使用します。

      お手数ですがよろしくお願いいたします。

    • #49589
      Hidekichi
      ゲスト

      どの部分のulですか?
      またどのように変更したいですか?

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

      できれば変更したい部分のページのURLを掲載して、「この部分」と指定していただければと思います。

    • #49602
      raopi
      ゲスト

      お世話になります。

      下記URLになります。

      http://www.checkego.net/ploomtech/

      ・プルームテック(460円) 5カプセル×50パフ=250回
       ・ロングサイズ(440円) 20本×20パフ=400回

      ・を画像に変えたい場合です。よろしくお願いいたします

    • #49605
      みき
      ゲスト

      簡単にやればこんな感じです

      li {
      list-style:none;
      }
      li::before {
      content : url(画像のパス);
      }

      ただしこれだとSNSボタンなども変わってしまうので
      セレクタを入れてください

      記事全部

      #the-content li {
      list-style:none;
      }
      #the-content li::before {
      content : url(画像のパス);
      }

      ・プルームテック(460円) 5カプセル×50パフ=250回
      ・ロングサイズ(440円) 20本×20パフ=400回

      だけ行いたいのであれば
      適当なクラスをつけてやってみてください

      ※反映されない場合はキャッシュを削除するかシークレットモードで見てください

    • #49606
      みき
      ゲスト

      こんな感じになります
      https://1drv.ms/i/s!Am5FaiBsdNRKk0zULzB7biGXyfWi

    • #49607
      raopi
      ゲスト

      ありがとうございました

      ぷらグインのTOC+
      にも反映されるので、これを外す方法はありますでしょうか

    • #49608
      Hidekichi
      ゲスト

      ulやらでも良いですが僕ならdl, dt, ddを使います。

      サンプル: デザイン例 | codepen
      フルページビューでレスポンシブやらを確認してみてください。PCからなら、画面右上のchange viewより、ソースの位置を右が世などにして(なっていればそのまま)、ソースとリザルトの境界をマウスで動かせばレスポンシブで見られます。
      #body-in部分しかレスポンシブにしてないので、ヘッダーやらはそのままです。

      リストマークを画像にするのもよいんですけれども、リストマークを非表示にしてbeforeを使い画像をはめ込むと色々応用できます。マージンやらを色々駆使しないとアレなのでちょっと考えどころではありますが。

      リストマークを画像は「リストの先頭にフォントでマーク表示!画像を付けるのはもう古い!」やらにかいてあるような感じでいけます。
      比較的簡単です。

      今回のように、何かしらに対するデータを表示する場合、htmlではdl(definition lists:定義リスト)というのを使います。
      olはordered lists、ulはunordered listsの頭文字で、olは順序付きリスト、ulは順不同リスト(箇条書きリストとかとも言われます)と言うような具合です。これらはだいたい何かを定義とかしているわけではなく1文で書かれていて、インデントで文章の補足みたいな使われ方をします。

      なのでぶっちゃけどれを使ってもよいのですがolは違うかなと想像はできるかと思います。順序は関係ないんですから。定義していると言うわけでもないですが、ulの場合は、この子にliしか持てず、dlの場合は、dt(definition term)とdd(definition description)を持てるのに違いがあります。

      いずれを使ったとしても画像の使い方自体にそんなに変わりがあるわけではなく、ようは頭揃えをしたいかどうかみたいな使い方になったりもしますが、htmlタグの意味合いを正しく使うとちょっと良いことがあるかも知れません。大きな恩恵はないでしょうが(笑)

    • #49609
      Hidekichi
      ゲスト

      ☓ ソースの位置を右が世
      ○ ソースの位置を右側

    • #49610
      Hidekichi
      ゲスト
      <div class="test">
          <dl>
              <dt>プルームテック(460円)</dt>
              <dd>5カプセル×50パフ=250回</dd>
              <dt>ロングサイズ(440円)</dt>
              <dd>20本×20パフ=400回</dd>
          </dl>
      </div>

      htmlの構造はこうなっています。
      サンプルのhtml欄274行目あたり

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

      みきさんの方法でうまくいったのであれば、CSSセレクタを以下のように書いてもいいかもしれません。
      #the-content > li

    • #49615
      raopi
      ゲスト

      お世話になります。どちらも失敗でした。

      #the-content > li
      {
      list-style:none;
      }
      #the-content > li::before {
      content : url(http://www.checkego.net/wp-content/uploads/2017/01/arrow067_01.gif);
      }

      上記は画像が反映されません。

      #the-content li {
      list-style:none;
      }
      #the-content li::before {
      content : url(画像のパス);
      }

      上記は、Table of Contents Plusにも画像が反映されてしまいます。

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

      あ、間違ってた、こうかも#the-content > ul > li。これでもいいかも#the-content > ul li。※実際に動作確認はしてないです

    • #49620
      raopi
      ゲスト

      後者のほうでできました。

      ありがとうございました。

      前者は少しずれた個所がでできました。

    • #49623
      Hidekichi
      ゲスト

      Table of Contents Plusに反映されるのは#the-contentの中の ul li が対象だからで、該当部分にクラス付けるか囲めばそこ限定になるので、これまでのレスの合わせ技になるかと。

      現在

      <ul>
        <li>プルームテック(460円) <span style="color: #008000;">5カプセル×50パフ=250回</span></li>
        <li>&nbsp;ロングサイズ(440円) <span style="color: #008000;">20本×20パフ=400回</span></li>
      </ul>

      修正1

      <ul class="test">
        <li>プルームテック(460円)<span>5カプセル×50パフ=250回</span></li>
        <li>&nbsp;ロングサイズ(440円)<span>20本×20パフ=400回</span></li>
      </ul>

      修正2

      <div class="test">
        <ul>
          <li>プルームテック(460円)<span>5カプセル×50パフ=250回</span></li>
          <li>&nbsp;ロングサイズ(440円)<span>20本×20パフ=400回</span></li>
        </ul>
      </div>

      サンプル: ulと現状のスタイル修正 | jsFiddle

      これならhtmlタグに極力スタイルはしないということもできます。
      サンプル見てわかるように、これをするとspan部分を頭揃えすることはできません。僕がdlやらを薦めるのはここらが理由です。もしやるとすれば、

      <ul class="test">
        <li>
          <span>なんちゃらA</span>
          <span>なんちゃらB</span>
        <li>
      </ul>

      このような仕組みが必要です。span部分はdivでもpでもiでもなんでもスタイルできますが、結局それならdlやらと書く量は変わりません。

14件の返信スレッドを表示中
  • このトピックに返信するにはログインが必要です。
スポンサーリンク
アドセンス(大)
アドセンス(大)