ライブドアブログの見出しの色の変え方を紹介します。
ブログを始めると、だんだんデザインのカスタマイズにも興味が湧いてきますよね。
でも、どうやって見出しの色を変えたらいいかわかりませんよね…。
そんな方の為に、画像付き・コピペ有りで、見出しの色を変える方法を紹介します。
ライブドアブログからワードプレスに引越しました。
PV数やブログ収益も上がったので、少しでも収益を上げたい方は移行をおすすめします。
「ココナラ」にてブログ移行代行を頼めば、自分で作業することはありません。
詳しくは、下記の記事をご覧ください。
どの部分を変えるのか？
♩デザイン/ブログパーツ設定の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;
『ココ』
}
♩プレビューしてみよう
見出しの色が変わりましたね！！
自分の好きな色にカスタマイズしよう
色によって数字が変わるので、こちらのリンクを参考にしてください。
♩見出し２の色を変えたいとき
background（背景色）
♩見出し３の色を変えたいとき
border-left: 7px solid （タテ線）
【応用編】青色の見出しにする場合
これまで紹介した方法で、見出し２と見出し３のデザインをカスタマイズしてみます。
}.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＞です。
♩プレビューしてみよう
見出し２の背景色が青色、文字色が黒色。
見出し３のタテ線が青色、ヨコ線が青色。
デザインのカスタマイズ成功です。
簡単なのでやってみよう
デザインのカスタマイズって、
やる前は「出来るかな〜」と不安に思いますが
やってみると意外と簡単ですw
自分の好きな色に変更するだけで、ブログのモチベーションアップにも繋がると思います。
ライブドアブログの方はぜひデザインのカスタマイズをやってみてください。
スマホでは表示されないので注意
最後に注意書きです。
これまで紹介した方法は、パソコンでブログをみる場合のみ見出しの色が変わります。
ライブドアブログをスマホで見ると、見出しのデザインは変更されていないので注意です。
もしも、スマホでも自由にデザインをカスタマイズしたい方は、
ワードプレス移行も視野に入れておいたほうが良いですね…。
とは言え、
【無料】なのが、1番の強みだと思いますので
今後もライブドアブログでやっていきます〜！！
【関連記事】
ライブドアブログでグーグルアドセンスに合格するまでにしたこと
【ライブドアブログ】スマホ側での広告設定のやり方！忘れてませんか？
