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

 

 

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

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

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

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

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

 

 

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

※新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>

 

５.「保存」ボタンをクリック

 

これで完成ですが、色を変えたり、出来る方は線の種類、太さを変えたりして、更に自分好みにカスタマイズしてみて下さい。

 

それぞれのコードの右側に、どこの部分の何か？というのを書いていますので、変更する場合はそれを参考にして変えて下さい。

 

コードを変更して色を変える

「#ffffff」・・・　シャープ「＃」プラス、６桁の英数字が色コードとなっています。

それぞれの色コードについてはこちらのサイト⇒原色大辞典を参考にして好きな色に変えてみて下さい。

 

線の種類を変更する

線の種類については、下記の通りです。

実線・・・「solid」

点線・・・「dashed」

二重線・・・「double」

 

線の太さを変える

線を太くしたい場合は、例えば１pxを２pxにするなど、「ｐｘ」の直前の数字を大きくして下さい。

 

 

 

最後に

 

どうですか？

自分でカスタマイズ出来そうでしょうか？

CSSとかタグとか初めて聞くって方にはちょっと難しく感じるかもしれませんが、参考にしてみて下さい。

 

＊カスタマイズは自己責任で行って下さいね。