エディタ（HTML表示）にコピペするだけで簡単に使える✨
ちょっと変わった見出しデザインを5つご紹介いたします💚
鏡面風
見出しデザイン
<h3 style="color: #3CB371; -webkit-box-reflect: below -10px -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0) 10%, rgba(0, 0, 0, 0.5));">見出しデザイン</h3>
背景 + 影
見出しデザイン
<h3 style="padding: 8px 16px; color: white; background: #3CB371; box-shadow: 5px 5px 0 #2E8B57;">見出しデザイン</h3>
ストライプ + 線
見出しデザイン
<div style="position: relative;"><span style="position: absolute; left: 0; bottom: 0; width: 100%; height: 8px; background: repeating-linear-gradient(-45deg, #3CB371, #3CB371 2px, white 2px, white 4px);"> </span><h3 style="padding: 8px 0; color: #3CB371;">見出しデザイン</h3></div>
色変 + 線
見出しデザイン
<div style="position: relative;"><span style="position: absolute; bottom: 0; display: block; border-bottom: 4px solid #3CB371; width: 20%; height: 0;"> </span><h3 style="padding: 8px 0; color: #3CB371; border-bottom: 4px solid #BEE0CE;">見出しデザイン</h3></div>
吹き出し
見出しデザイン
<div style="position: relative;"><span style="position: absolute; top: 100%; left: 30px; border: 10px solid transparent; border-top: 10px solid #3CB371; width: 0; height: 0;"> </span><h3 style="padding: 8px 16px; color: white; background-color: #3CB371; border-radius: 8px;">見出しデザイン</h3></div>
以上です！いかがでしたでしょうか？💚
ワンポイントアドバイス✨
今回は緑色（カラーコード：#2E8B57, #3CB371, #BEE0CE）の見出しデザインを紹介させていただきましたが、カラーコードをお好きな色に変更することで自分好みの色味にカスタマイズできます💡
いいね、リブログ、フォロー全て拝見させていただいております💚
その他、「こういうデザイン紹介してほしい」「このカスタマイズの方法教えてほしい」などご意見・ご要望等ございましたら、お気軽にコメントお待ちしております✨
