参考にさせて頂いたページ
【はてなブログ】 CSSカスタマイズ手法(自己流) - のんびり猫プログラマの日常
変更しようと思ったきっかけ
h2があんまり目立たなくて、本文の文字サイズも大きい感じがしたので、メリハリをつけたかった。 デザインするの面倒なので、メリハリがつけばダサくても良いか。という感じで実施。
手順
- ダッシュボードで左カラムにある"デザイン"をクリック
- パレットアイコンのタブ(デザインテーマ)が選択された状態なので、スパナアイコンのタブ(カスタマイズ)をクリック
- {}デザインcssをクリックするとcssが編集できるエディタモードになる
- 編集する
ソース
一応自分がコピペしたソースをここに残しておく。 そのうち気が向いたらcss書き直すかもしれないけどたぶん永遠にこのままだ。
body{
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "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 Pゴシック", "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;
}