在宅ワーク・副業 Webにまつわるお役立ちTipsを公開中

Bloomin!

アメブロカスタマイズ

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

更新日:




アメブロの新エディタには見出し機能があります。

しかし、そのまま使うと、文字が大きくて結構武骨な雰囲気です。 新CSS編集デザインでのカスタマイズ方法をお伝えします。

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

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

 

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

大見出しの場合

[data-uranus-layout="entryBody"]

h2 {
font-size:○○px;
margin: 0.83em 0;
border-bottom:3px double #000000;
}

font-size:○○pxのところは、大きな見出しなのでフォントサイズも大きめにしてみましょう。

border-bottom:3px double #000000; ですが、二重線の設定をしていますので、こちらは変更しても構いません。

中見出しの場合

[data-uranus-layout="entryBody"]

h3 {
font-size: ○○px;
margin:10px 0 20px 0;
border-bottom:1px solid #000000;
}

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

小見出しの場合

[data-uranus-layout="entryBody"]
h4 {
font-size:○○px;
margin: 1.33em 0;
}

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

見出し設定のポイント

見出しの理論は以前書いたこちらを参照にしてください。 大中小とフォントサイズを小さくしていく。 装飾をちょっと豪華→簡素という感じにしていくとバランスがとれるかなと思います。

 

border-bottom:1px solid #000000; 線の種類はこんな感じです。
お好みの線を入力してください。

dotted…ドット/solid…直線/dashed…破線/double…二重線

 



-アメブロカスタマイズ
-,

Copyright© Bloomin! , 2018 All Rights Reserved.