2017年05月13日

(5)ブログタイトルに装飾を施す/ブログタイトルの上下に余白を空ける


 f-f_object_173-s512_f_object_173_0nbg.png   
使用デザイン
 Seesaaブログのライトグレー(両サイドバー)


ブログタイトルに装飾を施す

サルワカさんの
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選」を参考にして、ブログタイトルを装飾してみました。

スタイルシートの一番下に、以下の記述(10行)を追加しただけで、簡単に出来てしまいました!
無料ブログの場合「h1」がブログの大見出しになっていることが多いようです。

h1{
position: relative;
padding: 0.2em 0.5em;
background: -moz-linear-gradient(to right, rgb(255, 124, 111), #ffc994);
background: -webkit-linear-gradient(to right, rgb(255, 124, 111), #ffc994);
background: linear-gradient(to right, rgb(255, 124, 111), #ffc994);
color: white;
font-weight: lighter;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);
}


ブログタイトルの上下に余白を空ける

ブログタイトルの上下に隙間がなく窮屈なので、上下に20ピクセルずつ余白(マージン)を追加♪

上の記述に、
margin-top:20px;
margin-bottom:20px;

を追加。

結果、12行の記述。

h1{
position: relative;
padding: 0.2em 0.5em;
background: -moz-linear-gradient(to right, rgb(255, 124, 111), #ffc994);
background: -webkit-linear-gradient(to right, rgb(255, 124, 111), #ffc994);
background: linear-gradient(to right, rgb(255, 124, 111), #ffc994);
color: white;
font-weight: lighter;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);
margin-top:20px;
margin-bottom:20px;

}


完成
カスタマイズ大見出し03.jpg


スポンサーリンク


 
posted by スピカ at 21:54| シーサーブログのカスタマイズ | 更新情報をチェックする