エディタ(HTML表示)にコピペするだけで簡単に使える✨

ストライプを用いた見出しデザインを3つご紹介いたします💜

 

ストライプ

見出しデザイン

<h3 style="color: #BA55D3; text-shadow: 0 0 4px white; padding: 8px 16px; background: repeating-linear-gradient(-45deg, #EFE0FF, #EFE0FF 4px, #F7EFFF 4px, #F7EFFF 8px);">見出しデザイン</h3>

 

ストライプ + 上下線

見出しデザイン

<h3 style="color: #BA55D3; text-shadow: 0 0 4px white; padding: 8px 16px; background: repeating-linear-gradient(-45deg, #EFE0FF, #EFE0FF 4px, #F7EFFF 4px, #F7EFFF 8px); border-top: 2px solid #BA55D3; border-bottom: 2px solid #BA55D3;">見出しデザイン</h3>

 

 

ミケンディープパッチ

 

ストライプ + 左線

見出しデザイン

<h3 style="color: #BA55D3; text-shadow: 0 0 4px white; padding: 8px 16px; background: repeating-linear-gradient(-45deg, #EFE0FF, #EFE0FF 4px, #F7EFFF 4px, #F7EFFF 8px); border-left: 4px solid #BA55D3;">見出しデザイン</h3>

 

 

以上です!いかがでしたでしょうか?💜

 

ワンポイントアドバイス✨

今回は紫色(カラーコード:#BA55D3, #EFE0FF#F7EFFF)の見出しデザインを紹介させていただきましたが、カラーコードをお好きな色に変更することで自分好みの色味にカスタマイズできます💡

 

 

いいね、リブログ、フォロー全て拝見させていただいております💜

その他、「こういうデザイン紹介してほしい」「このカスタマイズの方法教えてほしい」などご意見・ご要望等ございましたら、お気軽にコメントお待ちしております✨

 

 

 

A7 Japanshitsuji(シツジ) サブスクコンシェルジュ