そとでよ - モトコ・モリの暮らし

元ひきこもりの気ままな生活。10年ひきこもり→リハビリ→就職(イマココ)

【CSS】画像の周りに影や枠線をつけて記事を見やすくしてみた

sotodeyo.hateblo.jp

この記事でいっぱいスクリーンショットを張ったんですが、Chromeの背景も白なら、ブログも白背景なのでスクリーンショットと画像の境目がわかりづらく、むちゃくちゃ見づらい事態になってしまったので、画像ファイルの表示デザインをCSSで変更しました。ついでに余白も付けました。デザインCSSのところに貼り付ければ動くんじゃないかなーと思います。

改善前(見辛い) f:id:bi_mini:20170528215136p:plain

画像に影をつけたバージョン

f:id:bi_mini:20170528182442p:plain

img.hatena-fotolife{
    box-shadow:5px 5px 5px #999;
    margin:10px auto;
}

うっすら枠線をつけたバージョン

f:id:bi_mini:20170528214424p:plain

img.hatena-fotolife{
    border:1px solid #cccccc;
    margin:10px auto;
}

最近のはやり的にはうっすら枠線の方が今どきっぽいかなあと思います。

ついでに前々から変えたいなあと思っていた目次回りのデザインも変更しました。

f:id:bi_mini:20170528182854p:plain

.table-of-contents{
    background:#eef7fc;
    padding:12px;
}
.table-of-contents li{
    list-style:none;
    margin-left:15px;
}
.table-of-contents li:before{
    content:"";
    width:7px;
    height:7px;
    display:inline-block;
    border-radius:50%;
    position:relative;
    background:#338899;
    left:-10px;
    bottom:4px;
}
.table-of-contents li li{
    font-size:90%;
}
.table-of-contents li li:before{
    content:"";
    width:5px;
    height:5px;
    border-radius:50%;
    background:none;
    border:1px solid #338899;
}