ウィジェットでのリスト表示

  • 解決済 zen73

    (@zen73)


    8年、 5ヶ月前

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

    .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件中)
  • トピック投稿者 zen73

    (@zen73)

    8年、 5ヶ月前

    区切り線は，下のようにして解決しました。

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

    トピック投稿者 zen73

    (@zen73)

    8年、 5ヶ月前

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

    .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;
    }

    トピック投稿者 zen73

    (@zen73)

    8年、 5ヶ月前

    解決しました。

    .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件中)
  • トピック「ウィジェットでのリスト表示」には新たに返信することはできません。