頭文字Dグッズ・プレゼント情報

ほんりょー
頭文字DのクッションがAvailで発売中です!25周年記念プレゼントの応募もお忘れなく!

【頭文字D】25周年SHOP記念|プレゼントキャンペーン開催!!

2020年7月23日

【コラボ】頭文字Dのクッションがアベイルで発売|限定商品

2020年7月12日

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

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

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

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

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

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

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

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

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

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

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日

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

最後に注意です。

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

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

いつき
えぇぇぇー!!!

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

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

ポイント

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

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

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

会員登録は無料です。

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

2019年4月22日




 

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

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

なつき
Yahoo!ショッピングのアフィリエイトは、バリューコマースだけです。

バリューコマースで、誰でも簡単に始めることができます。

会員登録は無料です。

ブログで商品を紹介するなら、

Yahoo!のアフィリエイトは必ず登録しておきましょう。

\バリューコマースをみる/

まとめ

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

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

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

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

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

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

2019年4月22日
楽天トラベル
Amazonキャンペーン情報
ほんりょー
対象者のみキャンペーンプランが提示されます↓↓↓

※リンクをクリックするとAmazon公式ページへ画面が移ります

Amazon Music Unlimited 500ポイントプレゼント

Amazon Audible 最初の1冊無料

コメントを残す