コピー&ペーストで簡単！はてなブログの見出し、吹き出しの書き方

ブログの見出しを変えたい！

吹き出しを使ってみたい！

そう思ったことはありませんか？

ワーママはるさん（ @wa_mamaharu）さんに教えていただきました！

とても簡単に変更できたので、紹介しますね。

吹き出しをつくるには？

紹介いただいたのは、こちらの記事。

mulife.hatenablog.com

手順に従って、cssを修正すると・・・

吹き出しできた！ 

見出しを変えるには？

紹介いただいたのは、こちらの記事です。

www.notitle-weblog.com

私は、白い吹き出しを見出しに使ってみたいな～と思いました。

いろいろ探して、こちらの記事が参考になりました。

www.nxworld.net

タイトルを吹き出しにするようになっているので、中見出しを吹き出しにするには「h1」を「h3」に変更すればOKです！

ソースはこちら↓

/* 見出しのCSS　*/
h3 {
position: relative;
padding: .5em .75em;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 6px;
}
h3::before,
h3::after {
position: absolute;
top: 100%;
left: 30px;
content: '';
height: 0;
width: 0;
border: 10px solid transparent;
}
h3::before {
border-top: 15px solid #ccc;
}
h3::after {
margin-top: -2px;
border-top: 15px solid #fff;
}

まとめ

　　吹き出しも見出しも、CSSのコピペでできる！

デザインがこんなに簡単にできるとは！

はるさん、ありがとうございます！！

いろんなデザインをチェックして、自分が作りたいブログにしていきたいですね。