こんにちは！ほんりょーです。
ブログを始めると、だんだんデザインのカスタマイズにも興味が湧いてきますよね。
とはいえ、どうやって見出し色を変えたらいいかわかりませんよね…。
結論から言うと、「ライブドアブログの見出し色カスタマイズは簡単」です。
今回は、「ライブドアブログの見出し色の変え方」を紹介します。
【ライブドアブログ】見出し色カスタマイズ方法
「ライブドアブログの見出し色カスタマイズ方法」を紹介します。
簡単なので、慌てずに作業していきましょう。
デザイン/ブログパーツ設定の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%);}
貼り付ける箇所は、
color: #999;
『ココ』
}
プレビューしてみよう
貼り付けたら、プレビューしてみましょう。
自分の好きな色にカスタマイズしよう
見出し色は、自分の好きな色に変えれます。
カラーコードは、原色大辞典を使うと簡単に調べることができます。
それぞれカラーコードを直す箇所は、以下の2つです。
見出し2の色を変える場合
見出し2の色を変える場合は、「.article-body-inner h2」
- background（背景色）
- color（文字色）
見出し色3を変える場合
見出し3の色を変える場合は、「.article-body-inner h3」
- border-left: 7px solid （タテ線）
- 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＞です。
プレビューしてみよう
この様に見出しの背景が青色、文字色が黒色になります。
デザインのカスタマイズ成功です。
【注意】スマホでは表示されません
最後に注意です。
これまで紹介した方法は、パソコンでブログをみる場合のみ見出しの色が変わります。
ライブドアブログをスマホで見ると、見出しのデザインは変更されていないので注意です。
スマホでも自由にデザインをカスタマイズしたい方は、
ワードプレスへのブログ移行がオススメです！
アフィリエイト始めてみませんか？
アフィリエイトのいいところは、あなたのサイトに広告やリンクを貼りさえすれば、クリック後に商品のお申込みやご購入をしていただくと報酬がもらえます。
なかなか外に出られない専業主婦や子育て中の方でも、気軽に始められます。
もちろん「おこづかい以上の収入を得たい！」という方も、どんどん稼げるチャンスがあるんです！
稼げるASPランキングNO.1「もしもアフィリエイト」
成果の出やすい広告が多数、高額案件もあり
初心者から上級者までおすすめ
まとめ
「ライブドアブログの見出し色の変え方」を紹介しました。
カラーコードを変えるだけで、自分の好きな色にカスタマイズできます。
見出し色を変更するだけで、ブログのモチベーションアップにも繋がります。
しかし、見出し色を変えてもスマホ側でみると表示はされません。
ブログのデザインをこだわりたい人は、ワードプレスへの移行をオススメします。
