日々のこと

読者です 読者をやめる 読者になる 読者になる

日々のこと

HTMLやCSSのことも書いています。

見出しデザインの変更方法

スポンサーリンク

見出しのデザインの変更方法

はてなブログの見出しのデザインの変更方法や、
前に使っていた見出しデザインについて書いてみました。

見出しのデザインを変更するには

↓のような記述を行うことで見出しのデザインの変更をすることができる。
(はてなブログの場合、デザインCSSに記載する)

.entry-content 「h3などを書く部分」←どの見出しタグのデザインを変更するか
color: #「色の指定をする部分」←文字の色を指定
font-size:150% ←文字の大きさを指定
font-weight:bold ←太字にする
line-height: 1.5em ←行間
margin: 50px 0 10px 0 ←上下の余白
padding:10px 10px 10px 10px ←テキストとボーダーの間の余白
background:#009250 ←背景の色

左や下に線をつけるデザインの場合

見出しの左や下側に線をつけるデザイン場合、↓のような記述を行う。

border-left: 8px solid #「色を指定」 ←左線をつける
border-bottom: 1px solid #「色を指定」 ←下線をつける

実際に使っていた見出しデザイン

h3:フォントなどを変えた白色の文字に背景が緑色系の見出し
h4:左と下に緑色系の線が入った見出し
h5:フォントや上下の余白などを変えた太字の見出し

h3で使っていた見出しのデザイン

.entry-content h3{ color: #ffffff;
font-size:130%;
font-weight:bold;
line-height: 1.5em;  
margin: 50px 0 10px 0;  
padding:10px 10px 10px 10px;  
background:#009250; } 

h4で使っていた見出しのデザイン

.entry-content h4 { padding: 4px 10px; color: #444444; 
background-color: #f3f3f3;
border-left: 8px solid #009250;
border-bottom: 1px solid #009250; } 

h5で使っていた見出しのデザイン

.entry-content h5{ color: #141414; 
font-size:125%; 
font-weight:bold; 
line-height: 1.5em; 
border-bottom:1px solid 009250;
margin: 50px 0 10px 0;
padding:10px 10px 1px 10px; }

まとめ

今回書いたこと
・はてなブログなどの見出しのデザインの変更方法について
・左線と下線のある見出しデザインについて
・前に使っていた見出しデザインについて

読まれている記事
www.hibinokoto01.com
www.hibinokoto01.com

[rakuten:rakutenkobo-ebooks:13436580:detail]