【アメブロカスタマイズ】おしゃれなグラデーションカラーの見出し

グラデーションアメブロ見出し


アメブロでコピペで使える
『見出し』をご紹介します星

 

 

世界観をカタチにするジュジュちゃん

ジュジュ
 

アメブロ・インスタの世界観づくりについて発信しています♬ はじめましての方はこちら♡

 

 

見出しの使い方や色の変更方法などは

こちらの記事で説明しています看板持ち

 

▶︎見出しの使い方はこちら

▶︎困った時やうまくいかない時はこちら

▶︎他のおしゃれな囲み枠や見出しはこちら

 

ご利用にあたって

※ 無断転載・パクリ・二次利用などは禁止です

※ ご自分のブログでコピペしての使用はOKです

※ この記事のコードをコピペして一部を変更して似たような記事を作成することも禁止です！！

※ 記事をご紹介いただく際は、出典元として当ブログのリンクをお願いします

 

 

 

● パープル＆レッドピンクのグラデーション

見出し

<h2 style="background:linear-gradient(120deg, #a6c0fe 0%, #f68084 100%); padding:10px 15px ;color:#fff;font-size:25px; box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(120deg, #a6c0fe 0%, #f68084 100%); padding:10px 15px;color:#fff;font-size:25px; border-radius: 5px ;box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(120deg, #a6c0fe 0%, #f68084 100%); padding:10px 25px;color:#fff; font-size:25px; border-radius: 100vh ;box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(120deg, #a6c0fe 0%, #f68084 100%); padding:10px;color:#fff; font-size:25px;  padding: 10px 15px;  -webkit-transform: skew(-15deg);  transform: skew(-15deg);  color: #fff; box-shadow:2px 3px 5px #9d9d9d">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

 

● パープル＆ブルーのグラデーション

見出し

<h2 style="background:linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%); padding:10px 15px ;color:#fff;font-size:25px; box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%); padding:10px 15px;color:#fff;font-size:25px; border-radius: 5px ;box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%); padding:10px 25px;color:#fff; font-size:25px; border-radius: 100vh ;box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%); padding:10px;color:#fff; font-size:25px;  padding: 10px 15px;  -webkit-transform: skew(-15deg);  transform: skew(-15deg);  color: #fff; box-shadow:2px 3px 5px #9d9d9d">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

 

● グリーン＆ブルーのグラデーション

見出し

<h2 style="background:linear-gradient(120deg, #68e0cf  0%, #64b3f4 100%); padding:10px 15px ;color:#fff;font-size:25px; box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(120deg, #68e0cf  0%, #64b3f4 100%); padding:10px 15px;color:#fff;font-size:25px; border-radius: 5px ;box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(120deg, #68e0cf  0%, #64b3f4 100%); padding:10px 25px;color:#fff; font-size:25px; border-radius: 100vh ;box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(120deg, #68e0cf  0%, #64b3f4 100%); padding:10px;color:#fff; font-size:25px;  padding: 10px 15px;  -webkit-transform: skew(-15deg);  transform: skew(-15deg);  color: #fff; box-shadow:2px 3px 5px #9d9d9d">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

 

● ピーチカラーのグラデーション

見出し

<h2 style="background:linear-gradient(120deg, #ffc3a0 0%, #ffafbd 100%); padding:10px 15px ;color:#fff;font-size:25px; box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(120deg, #ffc3a0 0%, #ffafbd 100%); padding:10px 15px;color:#fff;font-size:25px; border-radius: 5px ;box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(120deg, #ffc3a0 0%, #ffafbd 100%); padding:10px 25px;color:#fff; font-size:25px; border-radius: 100vh ;box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(120deg, #ffc3a0 0%, #ffafbd 100%); padding:10px;color:#fff; font-size:25px;  padding: 10px 15px;  -webkit-transform: skew(-15deg);  transform: skew(-15deg);  color: #fff; box-shadow:2px 3px 5px #9d9d9d">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

 

● パステルカラーのグラデーション①

見出し

<h2 style="background:linear-gradient(120deg, #fff1eb 0%, #ace0f9 100%); padding:10px 15px ;font-size:25px; box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(120deg, #fff1eb 0%, #ace0f9 100%); padding:10px 15px; font-size:25px;border-radius: 5px ;box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(120deg, #fff1eb 0%, #ace0f9 100%); padding:10px 25px;font-size:25px; border-radius: 100vh ;box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(120deg, #fff1eb 0%, #ace0f9 100%); padding:10px; padding: 10px 15px;font-size:25px;  -webkit-transform: skew(-15deg);  transform: skew(-15deg); box-shadow:2px 3px 5px #9d9d9d">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

 

● パステルカラーのグラデーション②

見出し

<h2 style="background:linear-gradient(120deg, #a8edea 0%, #fed6e3 100%); padding:10px 15px ;font-size:25px; box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(120deg, #a8edea 0%, #fed6e3 100%); padding:10px 15px; font-size:25px;border-radius: 5px ;box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(120deg, #a8edea 0%, #fed6e3 100%); padding:10px 25px;font-size:25px; border-radius: 100vh ;box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(120deg, #a8edea 0%, #fed6e3 100%); padding:10px; padding: 10px 15px;font-size:25px;  -webkit-transform: skew(-15deg);  transform: skew(-15deg); box-shadow:2px 3px 5px #9d9d9d">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

 

● パステルカラーのグラデーション③

見出し

<h2 style="background:linear-gradient(160deg, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%); padding:10px 15px ;font-size:25px; box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(160deg, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%); padding:10px 15px; font-size:25px;border-radius: 5px ;box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(160deg, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%); padding:10px 25px;font-size:25px; border-radius: 100vh ;box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(160deg, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%); padding:10px; padding: 10px 15px;font-size:25px;  -webkit-transform: skew(-15deg);  transform: skew(-15deg); box-shadow:2px 3px 5px #9d9d9d">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

 

● パステルカラーのグラデーション④

見出し

<h2 style="background:linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%); padding:10px 15px ;font-size:25px; box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%); padding:10px 15px; font-size:25px;border-radius: 5px ;box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%); padding:10px 25px;font-size:25px; border-radius: 100vh ;box-shadow:2px 3px 5px #9d9d9d;">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

見出し

<h2 style="background:linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%); padding:10px; padding: 10px 15px;font-size:25px;  -webkit-transform: skew(-15deg);  transform: skew(-15deg); box-shadow:2px 3px 5px #9d9d9d">見出しのテキスト</h2>
<p>&nbsp;</p>

 

 

世界観をカタチにするジュジュちゃん

ジュジュ
 

見出しを変更するときはタイトル下のここから変更してね！

 

 

 

 

見出しの使い方

 

 

1. デザインを選んでコードをコピーする

 

使いたい囲み枠のデザインを一覧から選んで
HTMLコードをコピーします。

 

 

2. 記事作成でHTML画面にする

 

いつもブログを書く手順で
[ブログを書く]画面下の[HTML表示]に切替えます。

 

 

 

3. コードを貼付けて画面を戻す

 

①でコピーしたHTMLコードを貼付けます。

貼付けたら[通常表示]に戻します。

 

 

 

 設置の方法や困ったときにはこちらをCheck気づき

 

▶︎囲み枠を設置するやり方
▶︎改行したら枠が増えた！という時の対処法と元に戻す方法
▶︎囲み枠の色を変える方法

 

 

 他にもおしゃれな囲み枠や見出しがたくさん飛び出すハート

 

▶︎アメブロ見出し素材500選
▶︎\大人気♡/ 大人かわいい大理石と水玉の囲み枠
▶︎ダマスク柄の囲み枠
▶︎シンプルな囲み枠＆枠線
▶︎タイトル付き囲み枠
▶︎ニュアンスカラーの囲み枠
 

 

 

 

＼LINE公式登録で無料プレゼント♡／
SNSで世界観をつくる8大特典

↓　　↓　　↓　　↓　　↓

 

LINE公式

 

LINE公式登録でSNSの世界観をつくる8大プレゼント

 

画像をクリックして登録♡
LINE画面が表示されない方は
@joujounetでID検索
(@も含めて検索してください)

 

あなたの想いと魅力を届ける
世界観づくりをサポートしています。

SNSで集客できない方
世界観づくりでお悩みの方
必要な人に価値を届けたい方
SNSで選ばれ売上をあげたい方

ぜひLINE登録してくださいね♡

 

 

 

Service

 

アメブロカスタマイズ／ライティング添削
ヘッダー／バナー／HP制作／インスタテンプレ作成
Instagramコンサル／Canva／LINEリッチメニュー
デュプロマ・テキスト・講座資料の作成
Lステップ代行構築／LINE運用アドバイス

 

SNSマーケティングをもとに幅広く
女性に響くデザインで
あなたらしさを叶えます♡

 

ハンドメイドやエステサロン
カフェ&レストラン・英語教室
アロマ・ネイル・婚活塾など

全国各地からご依頼・コンサルで一人一人
寄り添ったサポートを心がけています♡

 

 

 

 

 

 

＼３人のママでも理想の働き方を手に入れた方法✨／

ただの主婦がWebデザイナーになった理由

 

＼インスタはこちら♡Follow Me✨／

思わず二度見され心を奪うデザインで世界観をつくるInstagramはこちら

 

LINE公式マーケティングやデザイン作りのヒントを発信♡

視線を集め心を奪う世界観のつくりかたホームページ/ジュジュネット

 

心ときめく食器とお花が作れるポーセラーツ＆フラワーインテリア
JouJouetteの教室ブログはこちら♡

ポーセラーツ・フラワーインテリア教室ジュジュエッテのブログはこちら


Thank you for Reading

JOUJOUNET ダイヤモンドジュジュネット

▶︎お問合せ（LINE@ID → @joujounet ）
▶︎Instagram  ▶︎Facebook  ▶︎HP