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

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

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

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

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

いつき
ブログ初心者には難しそう。。。

結論から言うと、「ライブドアブログの見出し色カスタマイズは簡単」です。

今回は、「ライブドアブログの見出し色の変え方」を紹介します。

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

【ライブドアブログ】初心者が最初に見るべき記事まとめ|アフィリエイト設定あり

2020年3月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
ほんりょー
見出しの色が変わりましたね!!

【ライブドアブログ】初心者が最初に見るべき記事まとめ|アフィリエイト設定あり

2020年3月22日

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

見出し色は、自分の好きな色に変えれます。

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

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

それぞれカラーコードを直す箇所は、以下の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

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

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

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

【ライブドアブログ】初心者が最初に見るべき記事まとめ|アフィリエイト設定あり

2020年3月22日

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

最後に注意です。

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

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

いつき
えぇぇぇー!!!

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

ワードプレスへのブログ移行がオススメです!

ポイント

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

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

会員登録は無料です。

ライブドアブログからWordPressへの移行代行は『ココナラ』がおすすめ|サービス内容や流れを紹介

2019年4月22日

アフィリエイト始めてみませんか?

アフィリエイトのいいところは、あなたのサイトに広告やリンクを貼りさえすれば、クリック後に商品のお申込みやご購入をしていただくと報酬がもらえます。

なかなか外に出られない専業主婦や子育て中の方でも、気軽に始められます。

もちろん「おこづかい以上の収入を得たい!」という方も、どんどん稼げるチャンスがあるんです!

ほんりょー
当サイトで使っているオススメASPランキングトップ3はこちら↓

稼げるASPランキングNO.1「もしもアフィリエイト」

ポイント
W報酬(通常報酬に加え、ボーナス報酬がもらえる)
成果の出やすい広告が多数、高額案件もあり
初心者から上級者までおすすめ

まとめ

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

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

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

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

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


今なら頭文字Dが無料で読める!

群馬県の県立高校に通う拓海(たくみ)は車についての知識なんてほとんどない普通のとうふ屋の息子。ある日、拓海は親友の樹(イツキ)と共に、バイト先の先輩である池谷(いけたに)の走り屋チーム・秋名スピードスターズの走りを見に行くことに……。するとそこに赤城最速といわれる高橋兄弟が率いるチーム・赤城レッドサンズが現れ、秋名スピードスターズに挑戦を申し込んできた!! 地元で負けるわけにはいかないと燃える池谷だったが……!?


コメントを残す