【はてなブログ】気になる変な余白を調整完了。


ブログデザインをEvergreenにして以来、気になっていたことがあります。それは、記事と記事の間のへーんな余白です。
demacassette2.hateblo.jp

f:id:demacassette:20160521004346p:plain
f:id:demacassette:20160521004402p:plain

これを解決すべく、参考にさせていただいたのはこちら。
www.turetiru.com

このサイト、はてなブログをいじり倒すには最高です。ありがたやありがたやー。今回解決したい、へーんな余白解消のためのコードは以下のものです。これを「デザイン→css」に貼り付けたらOK。

/* ----- 記事間のスペース -----*/
.entry, .page-archive .archive-entry {
    margin-bottom: 24px;
    padding-bottom: 12px;
}

marginとpaddingは調整しながら決めました。これ、ずっと未解決だったので、やっと解消して嬉しいです。


そして、ついでに見出しもちょっと変えてみました。なんかかっこいい。

見出し3

コードはこちら

/*見出し3*/
.entry-content h5 {
  position: relative;
  color: #111;
  border-bottom: 4px solid #ccc;
  padding: 8px 10px;
}
.entry-content h5::before {
  position: absolute;
  top: 100%;
  left: 0;
  width: 20%;
  height: 4px;
  background-color: darkcyan;
  z-index: 2;
  content: '';
}


以上

その他の参考

www.miyachiman.com