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

この記事はこんな方に向けて書いています
ライブドアブログの見出し色を変えたい

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

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

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

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

ほんりょー
画像解説付き・コピペ有りです!!

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

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

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

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

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

カスタマイズのCSSを開く

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

記事本文を探す

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

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

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

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

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

ほんりょー
『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;

}

スクリーンショット 2019-01-30 11.10.35
ポイント
赤矢印の上と下の間に、貼り付けます。

プレビューしてみよう

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

スクリーンショット 2019-01-30 11.14.48
ほんりょー
見出しの色が変わりましたね!!

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

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

ポイント
#の後の英数字(カラーコード)を直すと色が変えれます。

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

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

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

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

  1. background(背景色)
  2. color(文字色)

見出し色3を変える場合

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

  1. border-left: 7px solid (タテ線)
  2. 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;
}

青文字の箇所を青色のコード<#0000ff>に変更しました。

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

プレビューしてみよう

 

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

この様に見出しの背景が青色、文字色が黒色になります。

ほんりょー
この設定を覚えてしまえば簡単です!!

【注意】スマホでは表示されません

最後に注意です。

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

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

スマホでも自由にデザインをカスタマイズしたい方は、ワードプレスへのブログ移行がおすすめ!

私はココナラでワードプレス移行を頼みました。

依頼したサービス名やオプションなど下の記事にまとめています。

まとめ

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

カラーコードを変えるだけで、自分の好きな色にカスタマイズできます。

見出し色を変更するだけで、ブログのモチベーションアップにも繋がります。

とはいえ、見出し色を変えてもスマホ側でみると表示はされません。

ブログのデザインをこだわりたい人は、ワードプレスへの移行をおすすめします。

Yahoo!ショッピングのアフィリエイト始めませんか?

Yahoo!ショッピングのアフィリエイトは「バリューコマース」だけ!

バリューコマースでは、Yahoo!ショッピングでの報酬料率が1.0%〜50%です。

さらに、Yahoo!ショッピングアプリ経由の注文でも報酬がもらえます。

\TRY NOW/

\初めて登録の方限定!/
コミックシーモア読み放題
7日間無料!!

コメントを残す