サポート » 使い方全般 » ウィジェットでのリスト表示

  • 解決済 zen73

    (@zen73)


    リストマークにアップロードした画像を使おうと思い,次のようにしてみました。

    .widget ul {
      /*
    list-style-type: none;
    list-style: none;
    */
      list-style-image: url(http://zensoft.main.jp/zen/wp-content/uploads/2016/05/listmark-1.png);
    margin: 0;
    padding: 0;
    }

    .widget ul li {
    padding: 0 0 9px 0;
    margin: 0 0 8px 0;

    }

    これでは,リストマークが表示されないようです。これの設定の仕方をお教え願います。

    あわせて,リストに破線の区切り線の入れ方もお教えください。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • 区切り線は,下のようにして解決しました。

    .widget ul li {
    padding: 0 0 9px 0;
    margin: 0 0 8px 0;
    border-bottom: 1px solid #E7E7E7;
    }

    リストマークの表示ができましたが,これではリストの文字とマークが重なってしまいます。

    .widget ul {
    list-style-type: none;
    list-style: none;
    margin: 0;
    padding: 0;  /* この数字を大きくするのかな */
    }

    .widget ul li {
    padding: 0 0 9px 0;
    margin: 0 0 8px 0;
    border-bottom: 1px solid #E7E7E7;
    background: url(http://zensoft.main.jp/zen/wp-content/uploads/2016/05/listmark-1.png) left 4px no-repeat;
    }

    解決しました。

    .widget ul li {
    padding: 0 0 9px 10px;
    margin: 0 0 8px 0;
    border-bottom: 1px solid #E7E7E7;
    background: url(http://zensoft.main.jp/zen/wp-content/uploads/2016/05/listmark-1.png) left 3px no-repeat;
    }

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「ウィジェットでのリスト表示」には新たに返信することはできません。