ブログの見出しを変えたい!
吹き出しを使ってみたい!
そう思ったことはありませんか?
ワーママはるさん( @wa_mamaharu)さんに教えていただきました!
とても簡単に変更できたので、紹介しますね。
吹き出しをつくるには?
紹介いただいたのは、こちらの記事。
手順に従って、cssを修正すると・・・
吹き出しできた!
見出しを変えるには?
紹介いただいたのは、こちらの記事です。
私は、白い吹き出しを見出しに使ってみたいな~と思いました。
いろいろ探して、こちらの記事が参考になりました。
タイトルを吹き出しにするようになっているので、中見出しを吹き出しにするには「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のコピペでできる!
デザインがこんなに簡単にできるとは!
はるさん、ありがとうございます!!
いろんなデザインをチェックして、自分が作りたいブログにしていきたいですね。