inohilog

/var/log/inohiro.log

デザイン変えてみた

以前から、もっと横長のデザインにしたいと思っていたので変えてみた

さらにスタイルの上書き

エントリのヘッダなどで使われている色を変えたかったので、 公開されている CSS から適当に色指定しているところを抜き出してきて、カラーコード？を置き換えた。

これを、デザインの設定画面の「Stylesheet」に流し込むと上書きできる。

f:id:InoHiro:20170125181956p:plain

ヘッダの色

ちなみに私はグローバルヘッダのもとの色が落ち着いていて良い感じだったので、#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;
}

参考