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

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

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

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

ほんりょー
CSS?html?何かの暗号ですかww

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

追記

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

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

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

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

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

2019年4月22日



 

どの部分を変えるのか?

 

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

 

スクリーンショット 2019-01-30 10.52.24

 

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

 

スクリーンショット 2019-01-30 10.53.38

 

♩記事本文を探す

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

スクリーンショット 2019-01-30 11.02.35

 

 

コピペして色を変えよう

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

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

}

スクリーンショット 2019-01-30 11.10.35

 

♩プレビューしてみよう

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

スクリーンショット 2019-01-30 11.14.48

 

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

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

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

 

 

スクリーンショット 2019-01-30 11.26.44

 

 

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

 

.article-body-inner h2の

background(背景色)

color(文字色)
この2つを変えればオッケーです。

 

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

 

.article-body-inner h3 の

border-left: 7px solid (タテ線)

border-bottom: 2px dashed (ヨコ線)

 

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

 

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

これまで紹介した方法で、見出し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;
}

黄色線で印をつけたカラーコードを

青色<#0000ff></ b>変更しました。

文字色だけ黒色<#000000>です。

 

♩プレビューしてみよう

 

スクリーンショット 2019-01-30 12.01.25

 

見出し2の背景色が青色、文字色が黒色。

見出し3のタテ線が青色ヨコ線が青色

デザインのカスタマイズ成功です。

簡単なのでやってみよう

desktop-1985856_1920

デザインのカスタマイズって、

やる前は「出来るかな〜」と不安に思いますが

やってみると意外と簡単ですw

自分の好きな色に変更するだけで、ブログのモチベーションアップにも繋がると思います。

ライブドアブログの方はぜひデザインのカスタマイズをやってみてください。

スマホでは表示されないので注意

puppy-3688871_1920

最後に注意書きです。

これまで紹介した方法は、パソコンでブログをみる場合のみ見出しの色が変わります。

ライブドアブログをスマホで見ると、見出しのデザインは変更されていないので注意です。

もしも、スマホでも自由にデザインをカスタマイズしたい方は、

ワードプレス移行も視野に入れておいたほうが良いですね…。

とは言え、

【無料】なのが、1番の強みだと思いますので

今後もライブドアブログでやっていきます〜!!

【関連記事】

ライブドアブログでグーグルアドセンスに合格するまでにしたこと

ライブドアブログで楽天アフィリエイトを設定しよう!

【ライブドアブログ】スマホ側での広告設定のやり方!忘れてませんか?

スポンサーリンク


日本最大級の動画配信サービス



コメントを残す