アメブロの見出しカスタマイズ方法

2017 8/04

2017.08.04 2019.10.08

ブログで長い文章を書く時は見出しを使うと読みやすくなりますね。

しかし、アメブロでは標準装備で見出しのデザインはされておらず、大きな文字が出てくるだけです。

なので、見出しを使っていない人も実際多いと思いますが、読む人の事を考えて見出しは付ける事をおススメします！

使用するならば、何の装飾もないただの大きな文字より、色が付いていたり、線やワンポイントが付いている様な、お洒落な見出しの方が良いですよね。

その方が読む側も、見出しと認識してくれるでしょう。

[voicel icon="https://nobukostyle.com/wp-content/uploads/2019/10/teacher1.png" name="Ｎ子"]というわけで今回は、見出しのカスタマイズ方法をお伝えします。[/voicel]

↓因みに完成形はこんな感じです↓

※新CSS（プロフィール写真が丸いタイプ）の「カスタム可能デザイン」にされている方に適用の方法です。

では順を追って説明していきます。

アメブロの見出しカスタマイズ

１.「管理トップ」から「デザインの設定」をクリック

ブログ管理画面（ＰＣ）の左側バナーの下の方にあります。

２.「ＣＳＳの編集」をクリック

３.下の方にある四角の枠の右側をスクロールして一番下まで移動する

↓

４.一番下の行より下の空白部分に下記のコードをコピペする

.skin-entryBody h2 { /* 大見出しh2 */
  font-size: 23px;　/* 文字サイズ */
  margin-left: -18px;
  padding-left: 10px;
  background: #ffffff; /* 背景色 */
  border: 0px solid #ffffff; /* 上線の種類・色 */
  border-left: 8px solid #1E497D; /* 左線の種類・色 */
  border-bottom: 2px solid #1E497D; /* 下線の種類・色 */
}

.skin-entryBody h3 { /* 中見出しh3 */
  font-size: 21px;  /* 文字サイズ */
  margin-left: -10px;
  padding-left: 10px;
  background-color: #F4FFFF;  /* 背景色 */
  border-left: 5px solid #1E497D; /* 左線の種類・色 */
  border-bottom: 0px dashed #ffffff; /* 下線の種類・色 */
}

.skin-entryBody h4 { /* 小見出しh4 */
  border-bottom: 1px dotted #808080; /* 下線の種類・色 */
}<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>