アメブロ 見出しのシンプルカスタマイズ(新CSS編集デザイン)

midashi-1

アメブロの新エディタには見出し機能がありますが、そのまま使うと、文字が大きくて結構武骨な雰囲気です。
ということで、カスタマイズ方法をお伝えします。新CSS編集デザインの場合はこんな感じになります。

アメブロ 見出しのカンタンカスタマイズ(新CSS)

サンプルとして↓こんな感じで↓見出しを作ってみます。

midashi-1

サンプルとしてこんな感じで見出しを作ってみます。
色コードはこちらからお好きなものを選びましょう

 

大見出しの場合

[amb-component="entryBody"] h2 {
font-size:○○px;
margin: 0.83em 0;
border-bottom:3px double #000000;
}

font-size:○○pxのところは、大きな見出しなのでフォントサイズも大きめにしてみましょう。
border-bottom:3px double #000000; ですが、二重線の設定をしていますので、こちらは変更しても構いません。

 

中見出しの場合

[amb-component="entryBody"] h3 {
font-size: ○○px;
margin:10px 0 20px 0;
border-bottom:1px solid #000000;
}

中見出しはh3の指定になります。
中見出しの下に、細い直線が入る設定にしました。

 

小見出しの場合

[amb-component="entryBody"] h4 {
font-size:○○px;
margin: 1.33em 0;
}

小見出しは、h4の指定になります。
特に見出しの下に指定はしていません。

 

見出し設定のポイント

見出しの理論は以前書いたこちらを参照にしてください。

大中小とフォントサイズを小さくしていく。
装飾をちょっと豪華→簡素という感じにしていくとバランスがとれるかなと思います。

また、border-bottom:1px solid #000000;

線の種類はこんな感じです。お好みの線を入力してください。
dotted…ドット/solid…直線/dashed…破線/double…二重線