アゴ乗せ日記

適当なポジティブ日記

スポンサーリンク

【はてなブログ】俺のリストがタピオカだった件【CSS】

この記事めっちゃアクセスきてるな

....

なんやこのデザイン!!


イケてない部分

f:id:agonosetaro:20200324152545p:plain

タピオカやんけ!!



具体的には

  • 階層ごとにマークを変えないとわかりづらい
  • インデントの幅が微妙


直す前に

階層は無限に増えても困る。 私のブログでは1階層までしか深くしないことにしよう。

ある程度は自分でルールを決めたほうがいい。

修正

以前の修正と合わせるとこんな感じだ。

/*
 *  親階層
 */ 
.entry-content > ul {
    padding: 20px;
    border: 3px solid #808080;
    border-radius: 5px;
}
.entry-content > ul li {
    position: relative;
    display: block;
    margin-bottom: .7em;
    padding: 0 0 0 25px;
}
.entry-content > ul li::before {
    content: "";
    position: absolute;
    left: 0;
    height: 10px;
    width: 10px;
    border-radius: 10px;
    background: #555555;
    top: 10px;
}

/*
 *  子階層
 */ 
.entry-content > ul li > ul {
    margin: 0;
}
.entry-content > ul li > ul li {
    padding-left: 20px;
}
.entry-content > ul li > ul li::before {
    font-family: "Font Awesome 5 Free";
    content: "\f0da";
    font-weight: bold;
    border: initial;
    position: absolute;
    border-radius: 50%;
    left: 0.2em;
    width: 17px;
    height: 17px;
    background: #fff;
    font-size: 1rem;
    top: 0;
}

今回も Font Awesomeからアイコンを使用している。 使い方は過去記事を。

www.agonose-nikki.com

どうなるのか

Before → After

f:id:agonosetaro:20200324153530p:plain


拡大

f:id:agonosetaro:20200329125921p:plain

シュッとしてるわぁ。

ひとまずこれでいこう。
アイディアが沸き次第どんどん良くしていく。

おわり

タピオカはこちらから

以上!!

いつもスターやコメント、ブックマークありがとうございます!!

スポンサーリンク