アメブロで使える「おしゃれ・かっこいい見出し」を紹介します。
完成イメージは下記の通り。
見出しの見本①
見出しの見本②
見出しの見本③
デザインを選んでコードをコピペするだけ！
見出しで記事が分かりやすく、読みやすくできますね。
なお、見出しの使い方・注意点は👇の記事で解説しています。
注意
記事中のコードは無料で使えます。リブログやリンクのご紹介も歓迎です。ただし許可なくコード自体をブログ内で掲載したり、二次利用するのは禁止です。無許可掲載はプライバシーポリシーに準じて対応します。
この記事を書いた人
ストライプのかっこいい見出し
基本のストライプ見出し
ストライプの見出し
<h2 class="entry-text-lightblue" style="background: repeating-linear-gradient(-45deg, #e0e7fa, #e0e7fa 3px, #e9eefb 3px, #e9eefb 7px); padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>
<p> </p>
ストライプの見出し
<h2 class="entry-text-green" style="background: repeating-linear-gradient(-45deg, #d6efbe, #d6efbe 3px, #e0f3ce 3px, #e0f3ce 7px); padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>
<p> </p>
ストライプの見出し
<h2 class="entry-text-pink" style="background: repeating-linear-gradient(-45deg, #fbe4ee, #fbe4ee 3px, #fcedf4 3px, #fcedf4 7px); padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>
<p> </p>
ストライプの見出し
<h2 class="entry-text-orange" style="background: repeating-linear-gradient(-45deg, #fee8c2, #fee8c2 3px, #fef0d7 3px, #fef0d7 7px); padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>
<p> </p>
ストライプ＋各丸の見出し
ストライプの角丸見出し
<h2 class="entry-text-lightblue" style="background: repeating-linear-gradient(-45deg, #e0e7fa, #e0e7fa 3px, #e9eefb 3px, #e9eefb 7px); border-radius: 10px; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>
<p> </p>
ストライプの角丸見出し
<h2 class="entry-text-green" style="background: repeating-linear-gradient(-45deg, #d6efbe, #d6efbe 3px, #e0f3ce 3px, #e0f3ce 7px); border-radius: 10px; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>
<p> </p>
ストライプの角丸見出し
<h2 class="entry-text-pink" style="background: repeating-linear-gradient(-45deg, #fbe4ee, #fbe4ee 3px, #fcedf4 3px, #fcedf4 7px); border-radius: 10px; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>
<p> </p>
ストライプの角丸見出し
<h2 class="entry-text-orange" style="background: repeating-linear-gradient(-45deg, #fee8c2, #fee8c2 3px, #fef0d7 3px, #fef0d7 7px); border-radius: 10px; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>
<p> </p>
ストライプ＋上下線の見出し
ストライプ上下線見出し
<h2 class="entry-text-lightblue" style="border-top: 3px solid #4169e1; border-bottom: 3px solid #4169e1; background: repeating-linear-gradient(-45deg, #e0e7fa, #e0e7fa 3px, #e9eefb 3px, #e9eefb 7px); padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>
<p> </p>
ストライプ上下線見出し
<h2 class="entry-text-green" style="border-top: 3px solid #59a136; border-bottom: 3px solid #59a136; background: repeating-linear-gradient(-45deg, #d6efbe, #d6efbe 3px, #e0f3ce 3px, #e0f3ce 7px); padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>
<p> </p>
ストライプ上下線見出し
<h2 class="entry-text-pink" style="border-top: 3px solid #eb6ea5; border-bottom: 3px solid #eb6ea5; background: repeating-linear-gradient(-45deg, #fbe4ee, #fbe4ee 3px, #fcedf4 3px, #fcedf4 7px); padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>
<p> </p>
ストライプ上下線見出し
<h2 class="entry-text-orange" style="border-top: 3px solid #fca60d; border-bottom: 3px solid #fca60d; background: repeating-linear-gradient(-45deg, #fee8c2, #fee8c2 3px, #fef0d7 3px, #fef0d7 7px); padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>
<p> </p>
ストライプ下線の見出し
背景が白色のブログ専用です。（背景色があると白くなります）
下線がストライプの見出し
<h2 class="entry-text-lightblue" style="background-size: 5px 5px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #4169e1 25%, #4169e1 50%, #ffffff 50%, #ffffff 75%, #4169e1 75%, #4169e1); padding: 0 0 7px 0;"><span style="display: block; background: #ffffff;">見出しのテキスト</span></h2>
<p> </p>
<p> </p>
下線がストライプの見出し
<h2 class="entry-text-green" style="background-size: 5px 5px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #59a136 25%, #59a136 50%, #ffffff 50%, #ffffff 75%, #59a136 75%, #59a136); padding: 0 0 7px 0;"><span style="display: block; background: #ffffff;">見出しのテキスト</span></h2>
<p> </p>
<p> </p>
下線がストライプの見出し
<h2 class="entry-text-pink" style="background-size: 5px 5px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #eb6ea5 25%, #eb6ea5 50%, #ffffff 50%, #ffffff 75%, #eb6ea5 75%, #eb6ea5); padding: 0 0 7px 0;"><span style="display: block; background: #ffffff;">見出しのテキスト</span></h2>
<p> </p>
<p> </p>
下線がストライプの見出し
<h2 class="entry-text-orange" style="background-size: 5px 5px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #fca60d 25%, #fca60d 50%, #ffffff 50%, #ffffff 75%, #fca60d 75%, #fca60d); padding: 0 0 7px 0;"><span style="display: block; background: #ffffff;">見出しのテキスト</span></h2>
<p> </p>
<p> </p>
ストライプ上下線の見出し
背景が白色のブログ専用です。（背景色があると白くなります）
上下線ストライプ見出し
<h2 class="entry-text-lightblue" style="background-size: 5px 5px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #4169e1 25%, #4169e1 50%, #ffffff 50%, #ffffff 75%, #4169e1 75%, #4169e1); padding: 7px 0;"><span style="display: block; background: #ffffff; padding: 0.1em 0.3em;">見出しのテキスト</span></h2>
<p> </p>
<p> </p>
上下線ストライプ見出し
<h2 class="entry-text-green" style="background-size: 5px 5px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #59a136 25%, #59a136 50%, #ffffff 50%, #ffffff 75%, #59a136 75%, #59a136); padding: 7px 0;"><span style="display: block; background: #ffffff; padding: 0.1em 0.3em;">見出しのテキスト</span></h2>
<p> </p>
<p> </p>
上下線ストライプ見出し
<h2 class="entry-text-pink" style="background-size: 5px 5px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #eb6ea5 25%, #eb6ea5 50%, #ffffff 50%, #ffffff 75%, #eb6ea5 75%, #eb6ea5); padding: 7px 0;"><span style="display: block; background: #ffffff; padding: 0.1em 0.3em;">見出しのテキスト</span></h2>
<p> </p>
<p> </p>
上下線ストライプ見出し
<h2 class="entry-text-orange" style="background-size: 5px 5px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #fca60d 25%, #fca60d 50%, #ffffff 50%, #ffffff 75%, #fca60d 75%, #fca60d); padding: 7px 0;"><span style="display: block; background: #ffffff; padding: 0.1em 0.3em;">見出しのテキスト</span></h2>
<p> </p>
<p> </p>
グラデーションのおしゃれな見出し
グラデーションの見出し
グラデーションの見出し
<h2 class="entry-text-lightblue" style="background-image: linear-gradient(to right, #4169e1 0%, #7fffd4 100%); background-image: -webkit-linear-gradient(left, #4169e1 0%, #7fffd4 100%); color: #ffffff; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>
<p> </p>
グラデーションの見出し
<h2 class="entry-text-green" style="background-image: linear-gradient(to right, #59a136 0%, #adff2f 100%); background-image: -webkit-linear-gradient(left, #59a136 0%, #adff2f 100%); color: #ffffff; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>
<p> </p>
グラデーションの見出し
<h2 class="entry-text-red" style="background-image: linear-gradient(to right, #d9333f 0%, #ffcc00 100%); background-image: -webkit-linear-gradient(left, #d9333f 0%, #ffcc00 100%); color: #ffffff; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>
<p> </p>
グラデーションの見出し
<h2 class="entry-text-pink" style="background-image: linear-gradient(to right, #eb6ea5 0%, #fca60d 100%); background-image: -webkit-linear-gradient(left, #eb6ea5 0%, #fca60d 100%); color: #ffffff; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>
<p> </p>
グラデーション＋各丸の見出し
グラデーション＋角丸
<h2 class="entry-text-lightblue" style="background-image: linear-gradient(to right, #4169e1 0%, #7fffd4 100%); background-image: -webkit-linear-gradient(left, #4169e1 0%, #7fffd4 100%); color: #ffffff; border-radius: 10px; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>
<p> </p>
グラデーション＋角丸
<h2 class="entry-text-green" style="background-image: linear-gradient(to right, #59a136 0%, #adff2f 100%); background-image: -webkit-linear-gradient(left, #59a136 0%, #adff2f 100%); color: #ffffff; border-radius: 10px; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>
<p> </p>
グラデーション＋角丸
<h2 class="entry-text-red" style="background-image: linear-gradient(to right, #d9333f 0%, #ffcc00 100%); background-image: -webkit-linear-gradient(left, #d9333f 0%, #ffcc00 100%); color: #ffffff; border-radius: 10px; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>
<p> </p>
グラデーション＋角丸
<h2 class="entry-text-pink" style="background-image: linear-gradient(to right, #eb6ea5 0%, #fca60d 100%); background-image: -webkit-linear-gradient(left, #eb6ea5 0%, #fca60d 100%); color: #ffffff; border-radius: 10px; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>
<p> </p>
グラデーション下線の見出し
背景が白色のブログ専用です。（背景色があると白くなります）
下線グラデーション見出し
<h2 class="entry-text-lightblue" style="background-image: linear-gradient(to right, #4169e1 0%, #7fffd4 100%); background-image: -webkit-linear-gradient(left, #4169e1 0%, #7fffd4 100%); padding: 0 0 5px 0;"><span style="display: block; background: #ffffff;">見出しのテキスト</span></h2>
<p> </p>
<p> </p>
下線グラデーション見出し
<h2 class="entry-text-lightblue" style="background-image: linear-gradient(to right, #87cefa 0%, #adff2f 100%); background-image: -webkit-linear-gradient(left, #87cefa 0%, #adff2f 100%); padding: 0 0 5px 0;"><span style="display: block; background: #ffffff;">見出しのテキスト</span></h2>
<p> </p>
<p> </p>
下線グラデーション見出し
<h2 class="entry-text-red" style="background-image: linear-gradient(to right, #d9333f 0%, #ffcc00 100%); background-image: -webkit-linear-gradient(left, #d9333f 0%, #ffcc00 100%); padding: 0 0 5px 0;"><span style="display: block; background: #ffffff;">見出しのテキスト</span></h2>
<p> </p>
<p> </p>
グラデーション上下線の見出し
背景が白色のブログ専用です。（背景色があると白くなります）
上下線グラデーション
<h2 class="entry-text-lightblue" style="background-image: linear-gradient(to right, #4169e1 0%, #7fffd4 100%); background-image: -webkit-linear-gradient(left, #4169e1 0%, #7fffd4 100%); padding: 5px 0;"><span style="display: block; background: #ffffff; padding: 0.1em 0.3em;">見出しのテキスト</span></h2>
<p> </p>
<p> </p>
上下線グラデーション
<h2 class="entry-text-lightblue" style="background-image: linear-gradient(to right, #87cefa 0%, #adff2f 100%); background-image: -webkit-linear-gradient(left, #87cefa 0%, #adff2f 100%); padding: 5px 0;"><span style="display: block; background: #ffffff; padding: 0.1em 0.3em;">見出しのテキスト</span></h2>
<p> </p>
<p> </p>
上下線グラデーション
<h2 class="entry-text-red" style="background-image: linear-gradient(to right, #d9333f 0%, #ffcc00 100%); background-image: -webkit-linear-gradient(left, #d9333f 0%, #ffcc00 100%); padding: 5px 0;"><span style="display: block; background: #ffffff; padding: 0.1em 0.3em;">見出しのテキスト</span></h2>
<p> </p>
<p> </p>
その他のおしゃれな見出し
メインサイトの「アメブロメーカー」では、下記の見出しも用意しています。
見出しの見本
見出しの見本
見出しの見本
詳しくは下記の記事でどうぞ。
あめっくま
うまくできない場合は、遠慮なく質問して下さい。
＼ フォローバックしてます ／
関連記事
メインサイトの「アメブロメーカー」では、350種類以上の見出し素材を用意しています。
メインサイト素材
このアメブロ版ブログでも一部紹介しています。
関連記事
見出し素材
・おしゃれ・かっこいい見出し今ココ
見出しの知識
おすすめコンテンツ
✅コンサルティングメニュー
✔ 高単価メニュー販売実践講座
⇒高単価メニューを売りたい人向けに、長期間完全マンツーマンサポート！
✔ ビジネスブログ収益UPサポート
⇒ビジネスブログの改善アドバイスをチャットで受け放題！
✅実施中のWebセミナー
✔ アクセス・集客UP実践セミナー
⇒アクセス・集客UP方法を実際の画面で紹介！
✔ 売れる告知記事作成セミナー
⇒読者が申し込みたくなる告知記事作成テクニックを紹介！
✔ Canva活用・収益UPレッスン
⇒Canvaの使い方～収益UPノウハウまで紹介！
✅公式note
✅お問い合わせ・お仕事依頼
