アメブロ見出し｜おしゃれ可愛いくすみカラー全200種類

 

かわいいくすみカラーがおしゃれなアメブロで使える見出しタグ一式です。コピペOKで記事をカスタマイズできるデザインです。

 

アメブロ用見出しの使い方・入れ方の記事を参考にして記事に貼り付けてくださいね。

 

コードは自由にお使いいただけますが、転用・二次利用は禁止です。
ご紹介いただく場合はこの記事へのリンクをお願いします(^^)


 

 

 

 くすみピンク見出し

 

下線見出し

 

<h2 style="border-bottom: 2px solid #E1B8B6; font-size: 1.4em; font-weight: bold; padding:3px 15px;">下線見出し</h2>
<p>&nbsp;</p>

 

上下線見出し

 

<h2 style="border-bottom: 2px solid #E1B8B6; border-top: 2px solid #E1B8B6; padding: 15px; font-size:1.4em; font-weight: bold;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

上下ドット見出し

 

<h2 style="border-bottom: 3px dotted #E1B8B6; border-top: 3px dotted #E1B8B6; padding: 15px; font-size:1.4em; font-weight: bold;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左縦線＋シンプル見出し

 

<h2 style="border-left: 5px solid #D29592; background: #E1B8B6; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

シンプル見出し

 

<h2 style="background: #E1B8B6; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

シンプル角丸見出し

 

<h2 style="border-radius:5px; background: #E1B8B6; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

左縦線見出し

 

<h2 style="border-left: 5px solid #E1B8B6; font-size: 1.4em; font-weight: bold; padding: 8px;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左二重縦線見出し

 

<h2 style="border-left:5px double #E1B8B6; font-size: 1.4em; font-weight: bold; padding: 8px;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

 左二重縦線左太め見出し

 

<h2 style="display:flex;line-height:1.8;font-weight:bold;font-size:1.4em;margin:8px 0;text-align:left"><span style="display:block;box-sizing:border-box;width:10px;margin-right:6px;border-left:6px solid #E1B8B6;border-right:2px solid #E1B8B6">&nbsp;</span>ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左縦線と下線見出し

 

<h2 style="font-weight:bold;font-size:1.4em;line-height:1.2;line-break:anywhere;padding:12px 16px;margin:8px 0;border-bottom:1px solid #E1B8B6;border-left:4px solid #E1B8B6;text-align:left"><span style="display:block"><span style="display:block">ここに見出しを書いてください</span></span></h2>
<p>&nbsp;</p>



公式LINE登録でピンク系含む全20色の見出しを無料プレゼントします！

 

 くすみブルー見出し

 

下線見出し

 

<h2 style="border-bottom: 2px solid #9DC1D6; font-size: 1.4em; font-weight: bold; padding:3px 15px;">下線見出し</h2>
<p>&nbsp;</p>

 

上下線見出し

 

<h2 style="border-bottom: 2px solid #9DC1D6; border-top: 2px solid #9DC1D6; padding: 15px; font-size:1.4em; font-weight: bold;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

上下ドット見出し

 

<h2 style="border-bottom: 3px dotted #9DC1D6; border-top: 3px dotted #9DC1D6; padding: 15px; font-size:1.4em; font-weight: bold;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左縦線＋シンプル見出し

 

<h2 style="border-left: 5px solid #809CAD; background: #9DC1D6; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

シンプル見出し

 

<h2 style="background: #9DC1D6; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

シンプル角丸見出し

 

<h2 style="border-radius:5px; background: #9DC1D6; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

左縦線見出し

 

<h2 style="border-left: 5px solid #9DC1D6; font-size: 1.4em; font-weight: bold; padding: 8px;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左二重縦線見出し

 

<h2 style="border-left:5px double #9DC1D6; font-size: 1.4em; font-weight: bold; padding: 8px;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

 左二重縦線左太め見出し

 

<h2 style="display:flex;line-height:1.8;font-weight:bold;font-size:1.4em;margin:8px 0;text-align:left"><span style="display:block;box-sizing:border-box;width:10px;margin-right:6px;border-left:6px solid #9DC1D6;border-right:2px solid #9DC1D6">&nbsp;</span>ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左縦線と下線見出し

 

<h2 style="font-weight:bold;font-size:1.4em;line-height:1.2;line-break:anywhere;padding:12px 16px;margin:8px 0;border-bottom:1px solid #9DC1D6;border-left:4px solid #9DC1D6;text-align:left"><span style="display:block"><span style="display:block">ここに見出しを書いてください</span></span></h2>
<p>&nbsp;</p>


 

 

 くすみグリーン見出し

 

下線見出し

 

<h2 style="border-bottom: 2px solid #79A09E; font-size: 1.4em; font-weight: bold; padding:3px 15px;">下線見出し</h2>
<p>&nbsp;</p>

 

上下線見出し

 

<h2 style="border-bottom: 2px solid #79A09E; border-top: 2px solid #79A09E; padding: 15px; font-size:1.4em; font-weight: bold;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

上下ドット見出し

 

<h2 style="border-bottom: 3px dotted #79A09E; border-top: 3px dotted #79A09E; padding: 15px; font-size:1.4em; font-weight: bold;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左縦線＋シンプル見出し

 

<h2 style="border-left: 5px solid #5B7775; background: #79A09E; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

シンプル見出し

 

<h2 style="background: #79A09E; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

シンプル角丸見出し

 

<h2 style="border-radius:5px; background: #79A09E; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

左縦線見出し

 

<h2 style="border-left: 5px solid #79A09E; font-size: 1.4em; font-weight: bold; padding: 8px;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左二重縦線見出し

 

<h2 style="border-left:5px double #79A09E; font-size: 1.4em; font-weight: bold; padding: 8px;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

 左二重縦線左太め見出し

 

<h2 style="display:flex;line-height:1.8;font-weight:bold;font-size:1.4em;margin:8px 0;text-align:left"><span style="display:block;box-sizing:border-box;width:10px;margin-right:6px;border-left:6px solid #79A09E;border-right:2px solid #79A09E">&nbsp;</span>ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左縦線と下線見出し

 

<h2 style="font-weight:bold;font-size:1.4em;line-height:1.2;line-break:anywhere;padding:12px 16px;margin:8px 0;border-bottom:1px solid #79A09E;border-left:4px solid #79A09E;text-align:left"><span style="display:block"><span style="display:block">ここに見出しを書いてください</span></span></h2>
<p>&nbsp;</p>


 

 

 グレー見出し

 

下線見出し

 

<h2 style="border-bottom: 2px solid #B2BABA; font-size: 1.4em; font-weight: bold; padding:3px 15px;">下線見出し</h2>
<p>&nbsp;</p>

 

上下線見出し

 

<h2 style="border-bottom: 2px solid #B2BABA; border-top: 2px solid #B2BABA; padding: 15px; font-size:1.4em; font-weight: bold;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

上下ドット見出し

 

<h2 style="border-bottom: 3px dotted #B2BABA; border-top: 3px dotted #B2BABA; padding: 15px; font-size:1.4em; font-weight: bold;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左縦線＋シンプル見出し

 

<h2 style="border-left: 5px solid #8B9191; background: #B2BABA; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

シンプル見出し

 

<h2 style="background: #B2BABA; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

シンプル角丸見出し

 

<h2 style="border-radius:5px; background: #B2BABA; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

左縦線見出し

 

<h2 style="border-left: 5px solid #B2BABA; font-size: 1.4em; font-weight: bold; padding: 8px;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左二重縦線見出し

 

<h2 style="border-left:5px double #B2BABA; font-size: 1.4em; font-weight: bold; padding: 8px;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

 左二重縦線左太め見出し

 

<h2 style="display:flex;line-height:1.8;font-weight:bold;font-size:1.4em;margin:8px 0;text-align:left"><span style="display:block;box-sizing:border-box;width:10px;margin-right:6px;border-left:6px solid #B2BABA;border-right:2px solid #B2BABA">&nbsp;</span>ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左縦線と下線見出し

 

<h2 style="font-weight:bold;font-size:1.4em;line-height:1.2;line-break:anywhere;padding:12px 16px;margin:8px 0;border-bottom:1px solid #B2BABA;border-left:4px solid #B2BABA;text-align:left"><span style="display:block"><span style="display:block">ここに見出しを書いてください</span></span></h2>
<p>&nbsp;</p>


公式LINE登録でグレージュなど全20色の見出しを無料プレゼントします！

 

 ベージュ見出し

 

下線見出し

 

<h2 style="border-bottom: 2px solid #CAB6A5; font-size: 1.4em; font-weight: bold; padding:3px 15px;">下線見出し</h2>
<p>&nbsp;</p>

 

上下線見出し

 

<h2 style="border-bottom: 2px solid #CAB6A5; border-top: 2px solid #CAB6A5; padding: 15px; font-size:1.4em; font-weight: bold;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

上下ドット見出し

 

<h2 style="border-bottom: 3px dotted #CAB6A5; border-top: 3px dotted #CAB6A5; padding: 15px; font-size:1.4em; font-weight: bold;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左縦線＋シンプル見出し

 

<h2 style="border-left: 5px solid #AD8F74; background: #CAB6A5; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

シンプル見出し

 

<h2 style="background: #CAB6A5; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

シンプル角丸見出し

 

<h2 style="border-radius:5px; background: #CAB6A5; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

左縦線見出し

 

<h2 style="border-left: 5px solid #CAB6A5; font-size: 1.4em; font-weight: bold; padding: 8px;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左二重縦線見出し

 

<h2 style="border-left:5px double #CAB6A5; font-size: 1.4em; font-weight: bold; padding: 8px;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

 左二重縦線左太め見出し

 

<h2 style="display:flex;line-height:1.8;font-weight:bold;font-size:1.4em;margin:8px 0;text-align:left"><span style="display:block;box-sizing:border-box;width:10px;margin-right:6px;border-left:6px solid #CAB6A5;border-right:2px solid #CAB6A5">&nbsp;</span>ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左縦線と下線見出し

 

<h2 style="font-weight:bold;font-size:1.4em;line-height:1.2;line-break:anywhere;padding:12px 16px;margin:8px 0;border-bottom:1px solid #CAB6A5;border-left:4px solid #CAB6A5;text-align:left"><span style="display:block"><span style="display:block">ここに見出しを書いてください</span></span></h2>
<p>&nbsp;</p>


 

 

 くすみパープル見出し

 

下線見出し

 

<h2 style="border-bottom: 2px solid #BCB8D3; font-size: 1.4em; font-weight: bold; padding:3px 15px;">下線見出し</h2>
<p>&nbsp;</p>

 

上下線見出し

 

<h2 style="border-bottom: 2px solid #BCB8D3; border-top: 2px solid #BCB8D3; padding: 15px; font-size:1.4em; font-weight: bold;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

上下ドット見出し

 

<h2 style="border-bottom: 3px dotted #BCB8D3; border-top: 3px dotted #BCB8D3; padding: 15px; font-size:1.4em; font-weight: bold;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左縦線＋シンプル見出し

 

<h2 style="border-left: 5px solid #8E87B4; background: #BCB8D3; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

シンプル見出し

 

<h2 style="background: #BCB8D3; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

シンプル角丸見出し

 

<h2 style="border-radius:5px; background: #BCB8D3; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

左縦線見出し

 

<h2 style="border-left: 5px solid #BCB8D3; font-size: 1.4em; font-weight: bold; padding: 8px;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左二重縦線見出し

 

<h2 style="border-left:5px double #BCB8D3; font-size: 1.4em; font-weight: bold; padding: 8px;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

 左二重縦線左太め見出し

 

<h2 style="display:flex;line-height:1.8;font-weight:bold;font-size:1.4em;margin:8px 0;text-align:left"><span style="display:block;box-sizing:border-box;width:10px;margin-right:6px;border-left:6px solid #BCB8D3;border-right:2px solid #BCB8D3">&nbsp;</span>ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左縦線と下線見出し

 

<h2 style="font-weight:bold;font-size:1.4em;line-height:1.2;line-break:anywhere;padding:12px 16px;margin:8px 0;border-bottom:1px solid #BCB8D3;border-left:4px solid #BCB8D3;text-align:left"><span style="display:block"><span style="display:block">ここに見出しを書いてください</span></span></h2>
<p>&nbsp;</p>


公式LINE登録でパープル系含む全20色の見出しを無料プレゼントします！

 

 くすみオレンジ見出し

 

下線見出し

 

<h2 style="border-bottom: 2px solid #F0AD6F; font-size: 1.4em; font-weight: bold; padding:3px 15px;">下線見出し</h2>
<p>&nbsp;</p>

 

上下線見出し

 

<h2 style="border-bottom: 2px solid #F0AD6F; border-top: 2px solid #F0AD6F; padding: 15px; font-size:1.4em; font-weight: bold;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

上下ドット見出し

 

<h2 style="border-bottom: 3px dotted #F0AD6F; border-top: 3px dotted #F0AD6F; padding: 15px; font-size:1.4em; font-weight: bold;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左縦線＋シンプル見出し

 

<h2 style="border-left: 5px solid #E8862A; background: #F0AD6F; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

シンプル見出し

 

<h2 style="background: #F0AD6F; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

シンプル角丸見出し

 

<h2 style="border-radius:5px; background: #F0AD6F; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

左縦線見出し

 

<h2 style="border-left: 5px solid #F0AD6F; font-size: 1.4em; font-weight: bold; padding: 8px;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左二重縦線見出し

 

<h2 style="border-left:5px double #F0AD6F; font-size: 1.4em; font-weight: bold; padding: 8px;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

 左二重縦線左太め見出し

 

<h2 style="display:flex;line-height:1.8;font-weight:bold;font-size:1.4em;margin:8px 0;text-align:left"><span style="display:block;box-sizing:border-box;width:10px;margin-right:6px;border-left:6px solid #F0AD6F;border-right:2px solid #F0AD6F">&nbsp;</span>ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左縦線と下線見出し

 

<h2 style="font-weight:bold;font-size:1.4em;line-height:1.2;line-break:anywhere;padding:12px 16px;margin:8px 0;border-bottom:1px solid #F0AD6F;border-left:4px solid #F0AD6F;text-align:left"><span style="display:block"><span style="display:block">ここに見出しを書いてください</span></span></h2>
<p>&nbsp;</p>


 

 

 くすみイエロー見出し

 

下線見出し

 

<h2 style="border-bottom: 2px solid #EFC062; font-size: 1.4em; font-weight: bold; padding:3px 15px;">下線見出し</h2>
<p>&nbsp;</p>

 

上下線見出し

 

<h2 style="border-bottom: 2px solid #EFC062; border-top: 2px solid #EFC062; padding: 15px; font-size:1.4em; font-weight: bold;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

上下ドット見出し

 

<h2 style="border-bottom: 3px dotted #EFC062; border-top: 3px dotted #EFC062; padding: 15px; font-size:1.4em; font-weight: bold;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左縦線＋シンプル見出し

 

<h2 style="border-left: 5px solid #EDAC34; background: #EFC062; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

シンプル見出し

 

<h2 style="background: #EFC062; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

シンプル角丸見出し

 

<h2 style="border-radius:5px; background: #EFC062; margin-bottom: 0px; font-size: 1.4em; font-weight: bold; padding: 15px;"><span style="color:#ffffff;">ここに見出しを書いてください</span></h2>
<p>&nbsp;</p>

 

左縦線見出し

 

<h2 style="border-left: 5px solid #EFC062; font-size: 1.4em; font-weight: bold; padding: 8px;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左二重縦線見出し

 

<h2 style="border-left:5px double #EFC062; font-size: 1.4em; font-weight: bold; padding: 8px;">ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

 左二重縦線左太め見出し

 

<h2 style="display:flex;line-height:1.8;font-weight:bold;font-size:1.4em;margin:8px 0;text-align:left"><span style="display:block;box-sizing:border-box;width:10px;margin-right:6px;border-left:6px solid #EFC062;border-right:2px solid #EFC062">&nbsp;</span>ここに見出しを書いてください</h2>
<p>&nbsp;</p>

 

左縦線と下線見出し

 

<h2 style="font-weight:bold;font-size:1.4em;line-height:1.2;line-break:anywhere;padding:12px 16px;margin:8px 0;border-bottom:1px solid #EFC062;border-left:4px solid #EFC062;text-align:left"><span style="display:block"><span style="display:block">ここに見出しを書いてください</span></span></h2>
<p>&nbsp;</p>


 

 

 全20色は公式LINE登録者全員にプレゼント


公式ラインの登録で、グレージュ・ラベンダー・オリーブなど、全20色200種類の見出しを無料でプレゼントしています！

Webディレクター歴20年以上の私がおしゃれな色ばかりを選びましたよ～。


公式LINEではSNSで使えるプロ撮影の写真素材もプレゼント！


また、私のアメブロカスタマイズプランは、世界に1つだけのオリジナル見出し付きなのですが、これがすごく好評で、

 

『記事を書くのが楽しくなった』
『読み易く、分かりやすい記事ができるのでお問い合わせも増えた』

と大変喜ばれています。

 

見出しを使うとブログも格段に読まれるようになりますよ～

公式ラインで全200種類の見出しを配布していますので、お気に入りの色を見つけてくださいね。