はてなブログの「見出し」をほぼコピペだけでカスタマイズ

　はてなブログで記事を書く時、編集モードというのが選べるようになっている。今回は、見たままモードで記事を書く際に「大見出し」「中見出し」「小見出し」を使用した時に表示されるデザインをカスタマイズすることにした。

「見出しデザイン」のカスタマイズ方法

　見出しデザインの設定は下記のコードをデザインのカスタマイズにある『デザインCSS』にコピペするだけでこのようなデザインに変わります。

f:id:Yukinekoasp:20191005231411j:plain

大見出し

h3 {
position: relative;
background: #f4f4f4;
padding: 2px 5px 2px 15px;
font-size: 20px;
color: #b7282e;
border-radius: 0 100px 10px 0;
}

h3:before {
font-family: "FontAwesome";
content: "\f041";
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #b7282e;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.35em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}

中見出し

h4 {
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
}

h4:before {
font-family: "FontAwesome";
content: "\f00c";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #b7282e; /*アイコン色*/
}