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

高級感のある見出しデザインを3つご紹介いたします💛

 

グラデーション + 背景

見出しデザイン

<h3 style="color: white; font-family: 'ヒラギノ明朝 Pro W3', serif; padding: 8px 16px; background: linear-gradient(135deg, #704308 0, #FFCE08 40%, #E1CE08 60%, #704308 100%);">見出しデザイン</h3>

 

グラデーション + 上下線

 

見出しデザイン

 

<div style="position: relative; font-family: 'ヒラギノ明朝 Pro W3', serif; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);"><span style="position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(135deg, #704308 0, #FFCE08 40%, #E1CE08 60%, #704308 100%);">&nbsp;</span>
<h3 style="padding: 8px 16px; color: black; background-color: white;">見出しデザイン</h3><span style="position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(135deg, #704308 0, #FFCE08 40%, #E1CE08 60%, #704308 100%);">&nbsp;</span></div>

 

 

novice

 

文字グラデーション

見出しデザイン

<h3 style="font-family: 'ヒラギノ明朝 Pro W3', serif; padding: 8px 16px; color: white; background: black;"><span style="background: linear-gradient(135deg, #704308 0, #FFCE08 40%, #E1CE08 60%, #704308 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">見出しデザイン</span></h3>

 

 

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

 

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

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

 

 

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

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

 

 

プログレスファーム【ゼンブヌードル】8食モニターセット