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

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

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

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

段落h3 デフォルト

 

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

まずダッシュボードから
「外観」⇒「エディター」と進み、
「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タグのデザインを変えることができます☆

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

 

段落h3 カスタマイズ後

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

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

    管理人プロフィール
    ▼名前:ダンゴ
    ダンゴ プロフィール
    どーも、ダンゴです。

    お酒と漫画とお笑いが大好きな大学生で、現在はネットビジネスとスロットで学費と生活費を稼ぎながら、細々と暮らしてます。

    数年前ブラック企業に内定し、「雇われるリスク」を肌で感じた結果、就職を放棄。

    とはいえ食わねばいけないので、藁にもすがる思いでネットビジネスを始めたところ、毎月10万円以上の収入を生み出すことに成功!

    知識ゼロから月収10万円を稼ぐまでの道のりをメールで紹介していますので、興味があれば登録してみてください☆

    ⇒10万を稼ぐ第1歩


    コメントを残す

    サブコンテンツ

    このページの先頭へ