bloggerのデザインを変えてみる #1

初心者でもカッコいいブログを作りたい！

google提供のbloggerというサービスで本ブログが書かれている訳ですが，シンプルで扱いやすい判明色々機能が足りなかったりします．

その一つにデザインが微妙ってのがあります．以下がデフォルトのデザイン．

見出しがフォントサイズが変わるのみで，見にくいなって感じたので変更してやろうと思ったわけです．

という事で変更後がこちら

デザイン自体はツッコミ所満載ですが，前よりかは見やすくなったしやりたいことは出来たのかなと．

見出しのデザイン変更

左のタブの[テーマ]から適当にテーマを選択．[カスタマイズ]ボタンの右にある[▽]をクリック

[HTMLを編集]をクリック

次に表示されたHTMLファイル内の見出しタグのレイアウトを変更してやります．

ｈ１　➔　サイトのタイトル
ｈ２　➔　見出し・日付欄
ｈ３　➔　少見出し・記事名
ｈ４　➔　準見出し
ｈ５　➔　無設定
ｈ６　➔　無設定

です．変更には

/* Posts

----------------------------------------------- */

の欄に

.post-body h1 {
  変更内容
}

.post-body h2 {
  変更内容
}

.post-body h3 {
  変更内容
} 

を追加します．

".post-body" を付けておかないと，記事名や日付欄のレイアウトも変更されてしまいます．

見出しのテンプレートは "CSS 見出し" 等で検索すればたくさん出てくるので，それらを変更内容の部分に張り付ければOKです．ちなみに自分のブログではこんな感じです．

.post-body h1 {
  padding: 0.25em 0.5em;/*文字周りの余白*/
  color: #FFFFFF;/*文字色*/
  background: #344955;/*背景色*/
  border-top: 4px solid #000000; /*上線*/
  border-bottom: 4px solid #000000; /*下線*/
  margin: 0px -15px 1px; /*オブジェクト周りの余白変更*/
}
/* 先頭の文字を大きく，色を変更する*/
.post-body h1:first-letter {
  font-size: 150%; /*文字サイズ変更*/
  color: #F9AA33; /*文字色変更*/
}

.post-body h2 {
  padding: 0.5em;/*文字周りの余白*/
  color: #000000;/*文字色*/
  background: #CFD8DC;/*背景色*/
  border-left: solid 5px #F9AA33;/*左線（実線 太さ 色）*/
  font-size: 1.5em; /*文字サイズ変更*/
}

.post-body h3 {
  padding: 0.5em 0.75em 0em;/*文字周りの余白*/
  margin-bottom: 0.5em;  /*オブジェクト周りの余白*/
  border-bottom: solid 3px #000000;  /*下線*/
} 

表示例

見出し<h2>

小見出し<h3>

こんな感じで表示されます．

締め

CSSには触ったことが無かったので，以上のやり方が正しいかは分からないです．有識者の方は是非コメントで教えて頂けると嬉しいです．