アゴ乗せ日記

適当なポジティブ日記

スポンサーリンク

【はてなブログ】順序ありリストと順序なしリストのスタイル変更(後編)

前回PC版を修正したので、

今回はスマートフォン版の修正です。

現状

順序ありリストbefore

熱くなれよ

もっと熱くなれよ!

修正

今回もまだレスポンシブ対応できていないので、 デザイン > スマートフォン > 記事 > 記事上<span></span>の中にCSSを追記していきます。

.entry-content > ol {
    counter-reset: li;
    margin: 0 0 10px 0;
    padding: 10px;
    border: 3px solid #808080;
    border-radius: 5px;
}
.entry-content > ol li {
    position: relative;
    display: block;
    padding: 0 0 0 25px;
    margin-bottom: .7em;
}
.entry-content > ol li:before {
    position: absolute;
    content: "";
    left: 0;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background: #d7c6b8;
    top: 2px;
}
.entry-content > ol li:after {
    counter-increment: li;
    content: counter(li);
    position: absolute;
    width: 20px;
    height: 20px;
    left: 0;
    padding: 0;
    line-height: 0;
    color: #fff;
    text-align: center;
    font-size: .65em;
    letter-spacing: 0;
    top: 12px;
}

こんなパワープレーは全然スマートじゃないけど、大丈夫!俺たちは最初からスマートなんかじゃないから!

結果

before

順序ありリストbefore

after

順序ありリストafter

OK。順序なしリストも直していこう

現状(順序なしリスト)

直しがいがあるわ。

順序なしリストbefore

修正

これも同じ要領でデザイン > スマートフォン > 記事 > 記事上<span></span>の中にCSSを追記していきます。

.entry-content > ul {
    margin: 0 0 10px 0;
    padding: 10px;
    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 {
    position: absolute;
    content: "";
    left: 0;
    height: 10px;
    width: 10px;
    border-radius: 10px;
    background: #d7c6b8;
    top: 10px;
}

結果(順序なしリスト)

before

順序なしリストbefore

after

順序なしリストafter

ええやん。

おわり

もう少し気になるところあるので、もうしばらくはその修正を進めていきます。 それが終わったらレスポンシブ対応してテーマを完成させていきたいな。

以上!

スポンサーリンク