以前から、もっと横長のデザインにしたいと思っていたので変えてみた
さらにスタイルの上書き
エントリのヘッダなどで使われている色を変えたかったので、
公開されている CSS から適当に色指定しているところを抜き出してきて、カラーコード?を置き換えた。
これを、デザインの設定画面の「Stylesheet」に流し込むと上書きできる。
ヘッダの色
ちなみに私はグローバルヘッダのもとの色が落ち着いていて良い感じだったので、#5e7cb4
にした。
セレクタをもうちょっと短くかけそうだけどめんどい….
body div#container div#container-inner div#content div#content-inner div#wrapper div#main div#main-inner article.hentry div.entry-inner header.entry-header {
border-top: #5e7cb4 1px solid;
border-left: #5e7cb4 1px solid;
border-right: #5e7cb4 1px solid;
}
body div#container div#container-inner div#content div#content-inner div#wrapper div#main div#main-inner article.hentry div.entry-inner header.entry-header div.date {
background-color: #5e7cb4;
}
body div#container div#container-inner div#content div#content-inner div#wrapper div#main div#main-inner article.hentry div.entry-inner header.entry-header h1.entry-title {
border-left: 9px solid #5e7cb4;
}
body div#container div#container-inner div#content div#content-inner div#wrapper div#main div#main-inner article.hentry div.entry-inner div.entry-content {
border-left: #5e7cb4 1px solid;
border-right: #5e7cb4 1px solid;
border-bottom: #5e7cb4 1px solid;
}
div.entry-content h2 {
background-color: #5e7cb4;
color: #ffffff;
}
div.entry-content h4 {
border-left: 5px solid #5e7cb4;
border-bottom: 1px solid #5e7cb4;
}
div.entry-content blockquote {
border: #5e7cb4 1px solid;
}
body.page-archive div#main div#main-inner {
border-top: #5e7cb4 24px solid;
border-right: #5e7cb4 1px solid;
border-bottom: #5e7cb4 1px solid;
border-left: #5e7cb4 1px solid;
}
コードの色
主に背景色(フォントは Monaco とか Consolas が最初から設定されていたので、そのままでいいや)
div.entry-content pre {
background-color: #262626;
color: #eee;
}
参考