見出し(h3タグ)のデザインをCSSで変更する

どーも、ダンゴです(￣▽￣)ノ

ある程度長い文章には、「見出し」をつけると、
書く方は整理しやすいし、
読むほうもわかりやすいですよね☆

ですが、見出しはデフォルトではだいたいシンプルなものが多いので、
今回はCSS(スタイルシート)を使って、自分好みにカスタマイズしてみたいと思います(*^^)b

見出しデザインを変えて読みやすく

まずダッシュボードから
「外観」⇒「エディター」と進み、
「design.css」をクリック。

/*●H3タグ*/
#main-contents h3{
margin: 0 0 1.5em;
padding: 0.4em;←文字と線の間隔
border-left: 20px solid #0000ff;←左部分の幅と色
border-bottom: 2px solid #0000ff;←下線の幅と色
font-size: 1.143em;
font-weight: bold;
}

上のようなところを探して、
編集するとh3タグのデザインを変えることができます☆

ちなみに日本語は自分が説明のために付け加えたものなので、
コピーするときは消してください(￣▽￣)ノ笑

上のように変更すると、こんな感じになります(*^^)b

h2やh4タグもこの要領で変更できるので、
自分好みにカスタマイズして、
より良いサイトを作りましょーヾ(´▽｀*)ノ