chocoberry Life

3児育児中のワーママです。ライフハック、子育てなど暮らしを豊かにするヒントや気づきを綴っています。

MENU

 

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

f:id:chocoflowerheart:20190108213737j:plainはてなブログ見出し吹き出し

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

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

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

 

ワーママはるさん( @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のコピペでできる!

 

 

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

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

 

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