【ライブドアブログ】見出し色のカスタマイズ方法を紹介｜コピペ・画像有り

この記事はこんな方に向けて書いています

ライブドアブログの見出し色を変えたい

こんにちは！ほんりょーです。

ブログを始めると、だんだんデザインのカスタマイズにも興味が湧いてきますよね。

とはいえ、どうやって見出し色を変えたらいいかわかりませんよね…。

本記事では「ライブドアブログの見出し色の変え方」を紹介します。

画像解説付き・コピペ有りです！！

【ライブドアブログ】見出し色カスタマイズ方法
【コピペ有り】色を変えてみよう
自分の好きな色にカスタマイズしよう
【応用編】青色の見出しにする場合
【注意】スマホでは表示されません
まとめ

【ライブドアブログ】見出し色カスタマイズ方法

「ライブドアブログの見出し色カスタマイズ方法」を紹介します。

簡単なので、慌てずに作業していきましょう。

デザイン/ブログパーツ設定のPCを開く

カスタマイズのCSSを開く

記事本文を探す

Macをお使いなら『command ＋ F』で検索できます。

【コピペ有り】色を変えてみよう

それではさっそく、見出し色を変えてみましょう。

▼こちらをコピーします。

『command ＋ C』でコピーです！

}
.article-body-inner h1,

.article-body-inner h2{
margin: 0 0 1.5em;
padding: 0.8em;

border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

.article-body-inner h3 {
margin: 0 0 1.5em;
padding: 0.8em;
border-left: 7px solid #000000;
border-bottom: 2px dashed #000000;
}

.article-body-inner h4 {
background: linear-gradient(transparent 70%, #87cefa 70%);
}

貼り付ける箇所は、

}

.article-body a:hover,

.article-body a:visited {

color: #999;

『ココ』

}

.article-body-inner blockquote {

background-color:#fafafa;

border: 1px solid #fff;

}

ポイント

赤矢印の上と下の間に、貼り付けます。

プレビューしてみよう

貼り付けたら、プレビューしてみましょう。

見出しの色が変わりましたね！！

自分の好きな色にカスタマイズしよう

今度は見出し色を変えてみましょう！

ポイント

＃の後の英数字（カラーコード）を直すと色が変えれます。

カラーコードは、原色大辞典を使うと簡単に調べることができます。

それぞれカラーコードを直す箇所は、以下の2つ。

見出し2の色を変える場合

見出し2の色を変える場合は、「.article-body-inner h2」

background（背景色）
color（文字色）

見出し色3を変える場合

見出し3の色を変える場合は、「.article-body-inner h3」

border-left: 7px solid （タテ線）
border-bottom: 2px dashed （ヨコ線）

【応用編】青色の見出しにする場合

これまで紹介した方法で、見出し2と見出し3のデザインを青色の見出し色にしてみましょう。

}
.article-body-inner h1,

.article-body-inner h2{
margin: 0 0 1.5em;
padding: 0.8em;
background: #0000ff;
color: #000000;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

.article-body-inner h3 {
margin: 0 0 1.5em;
padding: 0.8em;
border-left: 7px solid #0000ff;
border-bottom: 2px dashed #0000ff;
}