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

 

WEB構築アドバイザー今井信子です。

 

先日こちらの記事「ブログ記事を書くときは〇〇〇を使うと読みやすい法則」で、ブログで長い文章を書く時は見出しを使うと読みやすくなるという事をお伝えしてました。

 

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

 

それでも、全く使わないよりはましかもしれませんが、やっぱりカッコイイ見出しの方がより！見やすいですし、使いたい気にもなりますよね。

 

というわけで今回は、見出しのカスタマイズ方法をお伝えします。

新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とかタグとか初めて聞くって方にはちょっと難しく感じるかもしれませんが、参考にしてみて下さい。

 

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