アメブロで使える見出しタグが入る見出し飾り

 

アメブロを見出しを使って書いていますか？

よく見ると見出しではなく、見出し風な飾りを付けているアメブロを見かけます。

文字サイズを大きくして太字にして、囲み枠と同じような飾りをつけているだけ。

 

見出し風に見えても、ソースを見ると見出しになっていないのがわかります。

見出しになっていたら、h2、h3、h4のタグが入りますので。

 

以前書いたのですが「検索されるにはアメブロエディタの見出しを使った方がいいよー」なのです。

 

 

ただ、アメブロエディタで見出しを使っても、見た目は文字サイズを大きくして太字にしただけに見えるんですよね。

HTMLには見出しタグが入るのですが、地味で嫌だから見出し風な飾りをつけてしまうんだと思う(笑)

 

 

見出しの大切さについては増田恵美ドットコムにも書いています。

「見出し初心者でもわかる！見出しの効果と正しいブログの見出しの付け方」

 

 

そこで、アメブロで使えて、ちゃんとHタグが入る見出しを作りました。

 

↓こんなのをご紹介しますので、最後までご覧くださいね！

 

先日のアメブロで使える囲み枠と同じ色番号で作りましたので、合わせてお使いください！

 

 

アメブロで使えるHタグが入る見出し飾り

大見出しピンク

<h2 style="padding: 0.5em; border-left: 10px solid #ff9ece; border-bottom: 3px solid #ff9ece;">大見出しピンク</h2>

 

中見出しピンク

<h3 style="padding: 0.5em; border-left: 7px solid #ff9ece;">中見出しピンク</h3>

 

小見出しピンク

<h4 style= "padding: 0.5em; border-left: 5px solid #ff9ece; ">小見出しピンク</h4>

 

大見出し水色

<h2 style="padding: 0.5em; border-left: 10px solid #87ceeb; border-bottom: 3px solid #87ceeb;">大見出し水色</h2>

 

中見出し水色

<h3 style="padding: 0.5em; border-left: 7px solid #87ceeb;">中見出し水色</h3>

 

小見出し水色

<h4 style="padding: 0.5em; border-left: 5px solid #87ceeb; ">小見出し水色</h4>
 

大見出しラベンダー

<h2 style="padding: 0.5em; border-left: 10px solid #a8a8ff; border-bottom: 3px solid #a8a8ff;">大見出しラベンダー</h2>

 

中見出しラベンダー

<h3 style="padding: 0.5em; border-left: 7px solid #a8a8ff;">中見出しラベンダー</h3>

 

小見出しピンク

<h4 style="padding: 0.5em; border-left: 5px solid #a8a8ff; ">小見出しラベンダー</h4>

 

大見出しゴールド

<h2 style="padding: 0.5em; border-left: 10px solid #ff9ece; border-bottom: 3px solid #d7c447;">大見出しゴールド</h2>

 

中見出しゴールド

<h3 style="padding: 0.5em; border-left: 7px solid #d7c447;">中見出しゴールド</h3>

 

小見出しゴールド

<h4 style="padding: 0.5em; border-left: 5px solid #d7c447; ">小見出しゴールド</h4>

 

大見出しネイビー

<h2 style="padding: 0.5em; border-left: 10px solid #000080; border-bottom: 3px solid #000080;">大見出しネイビー</h2>

 

中見出しピンク

<h3 style="padding: 0.5em; border-left: 7px solid #000080;">中見出しネイビー</h3>

 

小見出しピンク

<h4 style="padding: 0.5em; border-left: 5px solid #000080; ">小見出しネイビー</h4>

 

 

 

 
アメブロで使える囲み枠と囲み枠の使い方、カスタマイズの仕方はこちら！

アメブロ囲み枠や見出し飾りをブログの色に合わせる方法はこちら！