サポート » 使い方全般 » デフォルトテンプレートでリストマークが出てきません…

  • デフォルトテンプレートをカスタマイズしております。

    ページのウィジェットを使っているんですが、下層のページリンクにリストマークを出したいのですが、なぜか出てくれません。

    <div id=”sidebar”>

    <ul>
    <li>

    <h2 class=”widgettitle”>ページ</h2>

    <ul>
    <li>ホーム</li>
    <li>ページ
    <ul>
    <li><a>下層ページタイトル</a></li>
     //←このlistにスタイルを当てても出てこない。
    
    <li><a>下層ページタイトル</a></li>
    </ul>
    </li>
    <li><a>ページタイトル</a>
    <ul>
    <li><a>ページタイトル</a></li>
    </ul>
    </li>
    <li>ブログ</li>
    </ul>
    </li>
    </ul>

    </div>

    ためしにheader.phpからスタイルシートのリンクを削除してブラウズしてみたら、普通に出てきました。ということはスタイルシートになんらかのlist-style:none;がかかっているか、または別の理由があるのかだとは思うんですが…

    デフォルトのテンプレートカスタマイズ経験をお持ちの方でわかる方いましたら是非よろしくお願いいたします。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • dafault テーマのstyle.cssで以下のように設定されています。

    444 #sidebar ul li {
    445     list-style-type: none;
    446     list-style-image: none;
    447     margin-bottom: 15px;
    448     }

    なのでここを編集すれば良いでしょう。

    モデレーター IKEDA Yuriko

    (@lilyfan)

    sidebar.php 自体が ul-li 構造になっているので、その中で ul-li を使ってもリストマークが出ません。php-web さんの解決方法もいいですが、表示の不具合が出そうなので、ul ul li というセレクタに対して、list-style を設定した方がいいでしょう。

    モデレーター jim912

    (@jim912)

    Firefoxでは、違う方式で表示されていたりするので、それへの対策も忘れずに~

    トピック投稿者 chinichiro

    (@chinichiro)

    php-webさん、lilyfanさん、の投稿の通りすでに試してみたのですが、ダメでした。

    ただ、全てのセレクタにあるlist-style-type: none;をはずしてみたら
    ul li ul liのところにはFIREFOXでは○が表示されました。
    IEでは出てきません。
    なにが違うのでしょうか。
    marginの問題だと思ったりinsideだと思ってやってみましたが、ダメでした。
    このような症状の場合、他に考えられる可能性はありますでしょうか?

    jim912さんの言われるとおり、FIREFOXでのリストマークに関する対処はしていました。ありがとうございます。

    トピック投稿者 chinichiro

    (@chinichiro)

    自己解決しました。

    ulに対するIDとclassをどこまでも追っていき、きつく当てるといいようです。

    #page #content #entry #xxx .class ul li{
    list-style:square;
    }

    みたいな感じです。
    ご意見お力添えありがとうございました。

    一番内側のIDに対してかけるだけでもIE、Firefox共に有効ですよ。

    <div id="sidebar">
      <ul>
        <li id="recent-posts">
          <h2 class="widgettitle">最近の投稿</h2>
            <ul>
              <li><a href="http://example.jp/blog/2869" id="post-2869">タイトル</a></li>
    省略

    このようなソースの場合で、

    li#recent-posts ul li {
      list-style-type: square;
      list-style-position: inside;
    }

    このように指定すればきちんと表示されます。(この例でいえば最初のdivのIDは指定していませんね)
    IE7、8、Firefox、Cromeで表示の確認済みです。

    トピック投稿者 chinichiro

    (@chinichiro)

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

    多分ぼくがやったときにはうまくセレクタを当てていなかったんだと思います。
    参考にしてみます。

    あとわかったことは、リストマークをつけるよりも、背景にマークを画像で入れてあげてpadding-leftするのが、微調整も効いていい感触でした。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「デフォルトテンプレートでリストマークが出てきません…」には新たに返信することはできません。