超簡単！ＣＳＳではてなブログの見出しをつくる（コピペＯＫ）

はてなブログをみていると…これどうやってやるんだろーって思うことありませんか？

今回は「見出し」をつくっていこうと思います。

※使っているテーマでうまく反映できないものもあります。ご了承ください。

これはｈ３見出し（大見出し）

 .entry-content h3 {
position: relative;
padding: 8px 12px;
color: #000;
line-height: 1.5;
background-color: #29cec5;
border-radius: 4px;
}
.entry-content h3::before{
content: '';
position: absolute;
top: 100%;
left: 28px;
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: #29cec5;
}

これはｈ４見出し（中見出し）

.entry-content h4 {
  padding: 6px 10px;
  border-left: 8px solid #29b6b7;
  border-bottom: 1px solid #29b6b7;
  color: #333;
  line-height: 1.5;
  background-color: #f5f5f5;
}

これはh5見出し