初心者がはてなブログの見出しをカスタマイズするときに参考にした方がいい記事

当ブログは開設してから30日目まで、デザインのカスタマイズをほぼしていませんでした。

記事を書くときに、

大見出し
中見出し
太字
箇条書き

などは使っていましたが、デザインをまったく考えていなかったので見た目はこんな感じ。

f:id:erixoutput:20161223060723j:plain

無機質です・・・

なぜデザインのカスタマイズをしなかったかというと、はてなPROでないとスマホ版のカスタマイズができないから。無料のままでもパソコン版のカスタマイズはできますが、私はパソコン版もスマホ版も一気にカスタマイズしたかった！

なので、はてなPROにするまではカスタマイズはお預けでした。

先日PROにしたので、早速ぞくぞくとカスタマイズしております。

大見出しをオシャレにする
さいごに

大見出しをオシャレにする

私ははてなブログの見たまま編集モードで、見出しを「大見出し」に設定しています。

f:id:erixoutput:20161223060748j:plain

大見出しで設定した部分は、HTMLで見ると<h3>で指定されています。

f:id:erixoutput:20161223060828j:plain

今回のカスタマイズをすることで、ブログの全記事の<h3>で指定されたところが一気におしゃれにカスタマイズできます。

参考にした記事

「はてなブログ　見出し　カスタマイズ」で検索すると、とにかくたくさんでてきます。

手の込んだデザインもたくさんありますが、初心者はカスタマイズの仕組みを理解する必要があるのでシンプルなデザインから挑戦したほうがいいと思います。

私が見た中では、こちらの記事が分かりやすかったです。

shiromatakumi.hatenablog.com

私は見出しタイプ6にすることにしました。

早速失敗？

背景を桃色、文字色を黒にしたかったので、早速リンク先から色コードを引っ張てきて貼り付け！

見て見ると・・・

f:id:erixoutput:20161223062044j:plain

あらら。なんか変。

この背景色だと文字色は白が読みやすそうだし、吹き出しの下の部分の色も変えないと変です。

この見出しで決定！

何度か修正して、満足の見出しになりました^^

f:id:erixoutput:20161223061021j:plain

私が張り付けたコードはコレ。

.entry-content h3 {
position: relative;
color: #FCEEEB;
padding: 8px 12px;
background-color: #E8868F;
border-radius: 6px;
}
.entry-content h3::before{
position: absolute;
top: 100%;
left: 32px;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-top-color: #E8868F;
content: '';
}