はてなブログのcssをカスタマイズする

参考にさせて頂いたページ

【はてなブログ】 CSSカスタマイズ手法（自己流） - のんびり猫プログラマの日常

変更しようと思ったきっかけ

h2があんまり目立たなくて、本文の文字サイズも大きい感じがしたので、メリハリをつけたかった。 デザインするの面倒なので、メリハリがつけばダサくても良いか。という感じで実施。

手順

1. ダッシュボードで左カラムにある"デザイン"をクリック
2. パレットアイコンのタブ(デザインテーマ)が選択された状態なので、スパナアイコンのタブ(カスタマイズ)をクリック
3. {}デザインcssをクリックするとcssが編集できるエディタモードになる
4. 編集する

ソース

一応自分がコピペしたソースをここに残しておく。 そのうち気が向いたらcss書き直すかもしれないけどたぶん永遠にこのままだ。

body{
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size:12px;
  color:#666666;
}
h1,h2,h3,h4,h5,h6{
  font-weight:700;
  padding:6px 10px 6px 20px;
}
#main-inner .entry-content h2{
  background:#333333;
  border:none;
  margin-top:100px;
  font-size:42px;
  color:#eeeeee;
  padding:10px 20px 10px 20px;
}
h2#blog-description{
  border:none;
  background:none;
  color:#333333;
}
.entry-content h3{
  background:#666666;
  margin-top:70px;
  color:#eeeeee;
  padding:10px 20px 10px 20px;
  font-size:32px;
  line-height: 44px;
}
.entry-content h4{
  padding:10px 20px 10px 10px;
  margin-top:50px;
  font-size:24px;
  line-height: 36px;
  color:#666666;
  border-left:10px solid #666666;
  border-bottom:1px solid #666666;
}
h5{
  border-left:20px solid #eebbbb;
  border-bottom:5px solid #eebbbb;
  margin-top:34px;
  font-size:12px;
  color:#555555;
}
h6{
  border-left:20px solid #eecccc;
  border-bottom:5px solid #eecccc;
  margin-top:24px;
  font-size:12px;
  color:#555555;
}
.entry-content h2 a.keyword,
.entry-content h3 a.keyword{
  color:#eeeeee;
}
p{
  margin-top:30px;
  margin-bottom:10px;
}
.entry-content blockquote {
  border-left: 5px solid #dddddd;
  color: #bbbbbb;
  margin: 0;
  padding-left: 30px;
}
.entry-content code {
  padding: 0 3px;
  background:#dddddd;
  border:1px solid #d0d0d0;
}
.entry-content pre {
  padding: 12px 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height:18px;
  font-size:12px;
  background:#f7f7f7;
  border:1px solid #d0d0d0;
}
pre, code, kbd, samp {
  background-color: #F8F8F8;
  border: 1px solid #CCCCCC;
  border-radius: 3px;
  color: #666666;
  font-family: monospace;
  padding:0 0.5em;
}
pre code {
    border: 0 none !important;
    padding: 0;
}
kbd{
  padding:0px 0.5em;
}

ついでにはてなブログと関係なくmarkdown用css

ときどき更新していこうと思う

body{
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size:16px;
  color:#666666;
}
h1,h2,h3,h4,h5,h6{
  font-weight:700;
  padding:6px 10px 6px 20px;
}
h1{
  font-size:42px;
  color:#333333;
  padding:10px 0px 10px 0px;
}
h2{
  background:#333333;
  border:none;
  margin-top:100px;
  font-size:42px;
  color:#eeeeee;
  padding:10px 20px 10px 20px;
}
h3{
  background:#666666;
  margin-top:70px;
  color:#eeeeee;
  padding:10px 20px 10px 20px;
  font-size:32px;
  line-height: 44px;
}
h4{
  background:#bbbbbb;
  padding:10px 20px 10px 10px;
  margin-top:50px;
  font-size:24px;
  line-height: 36px;
  color:#666666;
  border-left:10px solid #666666;
  border-bottom:1px solid #666666;
}
h5{
  background:#dddddd;
  border-bottom:1px solid #999999;
  margin-top:34px;
  font-size:16px;
  color:#555555;
}
h6{
    background:#f5f5f5;
  border-bottom:1px solid #cccccc;
  margin-top:24px;
  font-size:16px;
  color:#555555;
}
p{
  margin-top:30px;
  margin-bottom:10px;
}
blockquote {
  border-left: 5px solid #dddddd;
  color: #bbbbbb;
  margin: 0;
  padding-left: 30px;
}
code {
  font-size: 12px;
  padding: 0 3px;
  background:#dddddd;
  border:1px solid #d0d0d0;
}
pre {
  padding: 12px 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height:18px;
  font-size:12px;
  background:#f7f7f7;
  border:1px solid #d0d0d0;
}
pre, code, kbd, samp {
  background-color: #F8F8F8;
  border: 1px solid #CCCCCC;
  border-radius: 3px;
  color: #666666;
  font-family: monospace;
  padding:0 0.5em;
}
pre code {
    border: 0 none !important;
    background:#f7f7f7;
    padding: 0;
}
kbd{
  padding:0px 0.5em;
}