ライブドアブログの見出し色の変え方！簡単なのでやってみよう！

ライブドアブログの見出しの色の変え方を紹介します。

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

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

CSS？html？何かの暗号ですかww

そんな方の為に、画像付き・コピペ有りで、見出しの色を変える方法を紹介します。

追記

ライブドアブログからワードプレスに引越しました。

PV数やブログ収益も上がったので、少しでも収益を上げたい方は移行をおすすめします。

「ココナラ」にてブログ移行代行を頼めば、自分で作業することはありません。

詳しくは、下記の記事をご覧ください。

ライブドアブログからワードプレスへの移行代行はココナラがおすすめ！

2019年4月22日

どの部分を変えるのか？
コピペして色を変えよう
自分の好きな色にカスタマイズしよう
【応用編】青色の見出しにする場合
簡単なのでやってみよう
スマホでは表示されないので注意

どの部分を変えるのか？

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

♩カスタマイズのCSSを開く

♩記事本文を探す

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

コピペして色を変えよう

まずは、こちらをコピペして、貼り付けましょう。

}

.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;

}

♩プレビューしてみよう

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

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

＃の後の数字（カラーコード）を直すだけで簡単に色が変えれます。

色によって数字が変わるので、こちらのリンクを参考にしてください。

原色大辞典

♩見出し２の色を変えたいとき

.article-body-inner h2の

background（背景色）

color（文字色）

この２つを変えればオッケーです。

♩見出し３の色を変えたいとき

.article-body-inner h3 の

border-left: 7px solid （タテ線）

border-bottom: 2px dashed （ヨコ線）

この２つの色を変えればオッケーです。

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

これまで紹介した方法で、見出し２と見出し３のデザインをカスタマイズしてみます。

}

.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;

}