【アメブロ用おしゃれな見出し】かっこいいストライプ・グラデーション
アメブロで使える「おしゃれ・かっこいい見出し」を紹介します。完成イメージは下記の通り。見出しの見本①見出しの見本②見出しの見本③ デザインを選んでコードをコピペするだけ！見出しで記事が分かりやすく、読みやすくできますね。あめっくまSEOにも強くなり、アメブロのアクセス数UPにも役立ちます。自己紹介はこちら⇒なお、見出しの使い方・注意点は👇の記事で解説しています。アメブロ用の見出しの作り方・使い方・注意点この記事ではアメブロでの見出しの作り方・注意点を解説します。ameblo.jp注意記事中のコードは無料で使えます。リブログやリンクのご紹介も歓迎です。ただし許可なくコード自体をブログ内で掲載したり、二次利用するのは禁止です。無許可掲載はプライバシーポリシーに準じて対応します。この記事を書いた人あめっくま Amebaオンラインレッスン認定講師 アメブロ収益UP講座を運営 コンサル生300名以上が収益UPに成功>> 提供サービスはこちら>> あめっくまをフォロー＼アメブロ20記事で5万PVの手法／アメブロで資産記事を作る方法はこちら ⇒＼ついに登場！アメトピ攻略法／アメトピ攻略法はこちら ⇒ストライプのかっこいい見出し基本のストライプ見出しストライプの見出し<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>ストライプの見出し<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>ストライプの見出し<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>ストライプの見出し<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>ストライプ＋各丸の見出しストライプの角丸見出し<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>ストライプの角丸見出し<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>ストライプの角丸見出し<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>ストライプの角丸見出し<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>ストライプ＋上下線の見出しストライプ上下線見出し<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>ストライプ上下線見出し<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>ストライプ上下線見出し<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>ストライプ上下線見出し<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>ストライプ下線の見出し背景が白色のブログ専用です。（背景色があると白くなります）下線がストライプの見出し<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>下線がストライプの見出し<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>下線がストライプの見出し<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>下線がストライプの見出し<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>ストライプ上下線の見出し背景が白色のブログ専用です。（背景色があると白くなります）上下線ストライプ見出し<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>上下線ストライプ見出し<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>上下線ストライプ見出し<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>上下線ストライプ見出し<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>グラデーションのおしゃれな見出しグラデーションの見出しグラデーションの見出し<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>グラデーションの見出し<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>グラデーションの見出し<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>グラデーションの見出し<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>グラデーション＋各丸の見出しグラデーション＋角丸<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>グラデーション＋角丸<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>グラデーション＋角丸<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>グラデーション＋角丸<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>グラデーション下線の見出し背景が白色のブログ専用です。（背景色があると白くなります）下線グラデーション見出し<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>下線グラデーション見出し<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>下線グラデーション見出し<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>グラデーション上下線の見出し背景が白色のブログ専用です。（背景色があると白くなります）上下線グラデーション<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>上下線グラデーション<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>上下線グラデーション<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>その他のおしゃれな見出しメインサイトの「アメブロメーカー」では、下記の見出しも用意しています。見出しの見本 見出しの見本 見出しの見本 詳しくは下記の記事でどうぞ。関連記事【素材数No.1】アメブロ用の見出し素材・デザインあめっくまうまくできない場合は、遠慮なく質問して下さい。関連記事メインサイトの「アメブロメーカー」では、350種類以上の見出し素材を用意しています。メインサイト素材【厳選350種】アメブロ用の見出し素材・デザイン！人気このアメブロ版ブログでも一部紹介しています。関連記事見出し素材・シンプルな見出し・目立つ見出し・かわいい見出し・おしゃれ・かっこいい見出し今ココ見出しの知識・見出しの作り方・使い方・注意点・アメブロの見出しはSEO・集客UPに大事・見出しを好みにカスタマイズする方法・アメブロの見出しをスマホで入れる方法a{text-decoration:underline;}a,a:visited{color:#3970B5;}.toc li{margin-bottom:1em;}.toc li a{text-decoration:underline dotted;}.toc{background:linear-gradient(-45deg,transparent 25%,rgba(200,200,200,.2) 25%,rgba(200,200,200,.2) 50%,transparent 50%,transparent 75%,rgba(200,200,200,.2) 75%,rgba(200,200,200,.2)) !important;background-size:4px 4px !important;border-top:4px double rgba(200,200,200,.5);border-bottom: 4px double rgba(200,200,200,.5);padding:1em 0 0.5em 0;}.h2-midashi{color:#2e3c56;border-radius:5px;position:relative;background:#f4f0e6;padding:0.5em 0.7em;margin-bottom:1.5em;}.h2-midashi span{position:absolute;top:100%;left:30px;border:15px solid transparent;border-top:15px solid #f4f0e6;width:0;height:0;}.h3-midashi{display:inline-block;color:#2e3c56;border-left:5px solid #fca60d;border-bottom:solid 3px #d7d7d7;background:#f4f4f4;padding:0.5em 1em 0.4em 0.5em;margin-bottom:1.5em;}.speech{display:flex;}.speech-img{width:20%;margin-right:3px;}.speech-img p{text-align:center;margin:0;}.speech-name{font-size:12px;text-align:center;margin:0}.speech-r{display:inline-block;}.speech-content{min-height:50px;background:#f4f0e6;border-radius:12px;padding:15px;margin:0;}.speech-content p{margin:0;}.speeech-t{width:0;height:0;border-style:solid;border-width:20px 20px 20px 0;border-color:transparent #f4f0e6; transparent transparent;margin-top:20px;}.link-box{position:relative;border:2px solid #d2b48c;padding: 20px 15px 15px 15px;}.link-box div{position:absolute;top:-0.8em;left:8px;background:#fff;color:#b4886c;padding: 0 0.5em;}.link-box div p{margin:0;}.link-box p:not(:last-child){margin-bottom:1em}.link-box p(:last-child){margin-bottom:0em}.link-box2{position:relative;border:2px solid #9dd3a8;padding: 20px 15px 15px 15px;}.link-box2 div{position:absolute;top:-0.8em;left:8px;background:#fff;color:#59a136;padding: 0 0.5em;}.link-box2 div p{margin:0;}.link-box2 p:not(:last-child){margin-bottom:1em}.link-box2 p(:last-child){margin-bottom:0em}.profile{font-size:1.1em;color:#5c5c5c;text-align:center;background:#9dd3a8;padding:5px;}.profile-wrap{display:flex;flex-wrap:wrap;padding:15px;text-align:center;background:#fff;border-left:2px solid #9dd3a8;border-right:2px solid #9dd3a8;border-bottom:2px solid #9dd3a8;}.profile-left{min-width:30%;margin:0 auto;}.profile-right{min-width:70%;}.profile-right ul{margin-top:0.5em;margin-bottom:0;margin-left:0;display:inline-block;text-align:left;}.profile-right li{margin-bottom:0.5em;}.profile-right p:not(:last-child){margin-bottom:0.5em;}@media screen and (max-width:480px){.profile-wrap{padding-top:0;}.profile-right{margin:0 auto;}.profile-right ul{padding-left:15px;}}.img-double{display:flex;flex-wrap:wrap;}.img-double-inner{margin:0 auto 11px auto;text-align:center;}.img-double-copy{font-size:0.9em;}.img-double-img{margin-bottom:8px}.img-double-link{margin-bottom:24px;}.teikei>div>p{margin-bottom:0.5em}.teikei hr{border-top:2px dotted #d2b48c;width:98%;border-bottom:none;margin:1em 0;}.teikei span{color:orange}.h4-midashi{display:inline-block;background:#e6f3f4;border-radius:5px;padding:5px 10px}.maru{border:3px double #d2b48c;padding:15px;}.ng{border:3px double lightgray;padding:15px}.maru li,pt li{margin-bottom:0.5em}.em1 p:not(:last-child){margin-bottom:1em}.em1 p(:last-child){margin:0}.pt{background:#e7f5fe;padding:15px}
