Blogger デザイン CSS カスタマイズ方法

BloggerのCSSを自分でカスタマイズする方法

  1. ダッシュボードを開く
  2. テンプレートを開く
  3. カスタマイズを選択
  4. アドバンスの『CSSを追加』を選択
  5. 変更したいCSSを追加

追加するCSSの例

投稿の本文のスタイルを変更
.post-body
{
font-size:120%;
font-family:;/*フォントの種類*/
font-weight:400;/*文字の太さ*/
color:;/*文字の色*/
line-height: 190%;/*hタグの高さ*/
padding:20px;/*上下のスペース*/
padding-left:30px; /*文字の左にスペース*/
padding-right:0px;/*文字の右にスペース*/
background-color:#f5f5f0; /*文字の背景の色*/
border: solid px #666666;/*枠線*/
}

投稿タイトルのスタイルを変更
.post-title
{
color:red;
border:0px solid #a1a1a1;
padding:7px;
padding-left:30px;
background:#f5f5f0; /*文字の背景の色*/
width:810px;
border-radius:8px;
}

見出しのスタイルを変更
h4 {
font-size:120%;
font-family:;/*フォントの種類*/
font-weight:600;/*文字の太さ*/
color:black;/*文字の色*/
line-height: 100%;/*hタグの高さ*/
padding:0px;/*上下のスペース*/
padding-left:0px; /*文字の左にスペース*/
padding-right:0px;/*文字の右にスペース*/
background-color:; /*文字の背景の色*/
border: solid px #666666;/*枠線*/
margin-top:20px;/*上の余白*/
margin-bottom:8px;/*下の余白*/
margin-left:-10px;/*左の余白*/
margin-right:px;/*右の余白*/
}

それぞれ変更したい項目の『:』の後に値を記入する。

コメント