ブログのデザインを変えました

年末も近づいてきたのでデザインをいろいろ変えてみました。

サイドバーのコンテンツはあまり見られないのではないかという仮説があって、1カラムのテーマに変えてみたいと思っていた所なので、公式のWideboardのテーマをベースに、白背景のシンプルなデザインにしてみました。また文字サイズは大きめのほうが読者にとって見やすいと思ったので、かなり大きめの文字サイズにしてみています。

以下、テーマのCSSです。

/* <system section="theme" selected="wideboard"> */
@import "/css/theme/wideboard/wideboard.css";
/* </system> */

/* <system section="background" selected="fff"> */
body{background:#fff;}
/* </system> */

body {
    font-size: 18px;
}

#blog-title-inner {
    padding: 15px 20px 20px;
    background: url(/css/theme/wideboard/header.png) no-repeat center top;
    border-top: 1px solid #fff;
}

#top-editarea {
    padding: 0 80px;
}

/* バナーを中央揃えに */
#top-editarea-header-banner {
    width: 728px;
    margin: 0 auto;
}

#content-inner {
    margin: 40px 80px 0;
}

/* 文字サイズは大きめで */
.entry-content p {
    line-height: 1.8;
    margin: 10px 0 0 0;
    font-size: 18px;
}

/* タイトル */
.entry .entry-title a {
    font-size: 28px;
    margin: 0 0 10px 0;
    display: inline-block;
    font-weight: bold;
    line-height: 23px;
    line-height: 30px;
}

/* 見出しスタイル */
.entry-content h3 {
    font-weight: bold;
    font-size: 25px;
    padding: 0 0 5px 34px;
    position: relative;
}

.entry-content h3:before {
    content: '';
    display: block;
    width: 25px;
    height: 25px;
    background: #666666;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
}

.entry-content h4 {
    font-weight: bold;
    font-size: 22px;
    border-bottom: 1px solid #aaaaaa;
    padding: 0 0 10px 0;
}

.entry-content h5 {
    font-weight: bold;
    font-size: 20px;
}
/* 見出しスタイル */

/* 引用のスタイル */
.entry-content blockquote {
    padding: 20px 80px;
    background: rgba(245,245,245,0.8);
    color: #222;
    position: relative;
    border: solid 1px #fff;
    margin: 0.8em 0;
}
.entry-content blockquote p {
    font-size: 90%;
}

.entry-content blockquote:before {
    content: "“";
    font-family: serif;
    position: absolute;
    top:0;
    left:0;
    font-size: 600%;
    color: rgba(200,200,200,1);
    line-height: 1em;
}

.entry-content blockquote:after {
    content: "”";
    font-family: serif;
    position: absolute;
    bottom: 0;
    right: 30px;
    font-size: 600%;
    color: rgba(200,200,200,1);
    line-height: 0;
}

.entry-content blockquote img {
    max-width: 100%;
}

.entry-content blockquote cite {
    display: block;
    text-align: right;
    font-size: 80%;
}

.entry-content blockquote p {
    margin: 0;
}
/* 引用のスタイル */

/* ソースコードのスタイル */
.entry-content pre.code {
    background-color: #073642;
    color: #93a1a1;
}
.synSpecial { color: #dc322f }
.synType { color: #b58900 }
.synComment { color: #657b83}
.synPreProc { color: #cb4b16 }
.synIdentifier { color: #268bd2 }
.synConstant { color: #2aa198 }
.synStatement { color: #859900 }
/* ソースコードのスタイル */

/* btn系のスタイル */
.btn {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  line-height: 18px;
  color: #444 !important;
  background-color: #f5f5f5;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #dddddd;
  -webkit-border-top-right-radius: 2px;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 2px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  cursor: pointer;
  font-size: 12px;
  text-decoration: none;
  font-weight: bold;
  -webkit-appearance: none;
}
.btn:hover {
  border-color: #ccc;
  background-color: #eeeeee;
  text-decoration: none !important;
}
.btn-blue,
.btn-primary {
  color: #fff !important;
  background: #14afd6;
  border: 1px solid transparent;
}
.btn-blue:hover,
.btn-primary:hover {
  border-color: #129fc2;
  background: #129fc2;
  background: -webkit-gradient(linear, left top, left bottom, from(#14afd6), to(#129fc2));
  background: -ms-linear-gradient(top, #14afd6, #129fc2);
  background: -moz-linear-gradient(top, #14afd6 0%, #129fc2 100%);
}
.btn-register {
  color: #fff !important;
  background: #1aba56;
  border: 1px solid transparent;
}
.btn-register:hover {
  background: #15a24a;
  background: -webkit-gradient(linear, left top, left bottom, from(#1aba56), to(#15a24a));
  background: -ms-linear-gradient(top, #1aba56, #15a24a);
  background: -moz-linear-gradient(top, #1aba56 0%, #15a24a 100%);
  border-color: #15a24a;
}
.btn-small {
  padding: 2px 10px !important;
  font-size: 11px !important;
}
.btn-large {
  padding: 13px 19px;
  font-size: 17px;
  line-height: normal;
  font-weight: bold;
}
.btn[disabled="disabled"],
.btn[disabled="disabled"]:hover,
input#submit[disabled="disabled"],
input#submit[disabled="disabled"]:hover {
  -moz-opacity: 0.4;
  opacity: 0.4;
  -khtml-opacity: 0.4;
  -webkit-opacity: 0.4;
  cursor: default;
  white-space: nowrap;
}
.btn.disabled,
.btn.disabled:hover {
  cursor: default;
  background: #f5f5f5;
  border-color: #ccc;
  text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.4);
  -moz-text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.4);
  -webkit-text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.4);
}
.btn-group .btn {
  position: relative;
  float: left;
  margin-left: -1px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.btn-group .btn:first-child {
  margin-left: 0;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  border-top-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  border-bottom-left-radius: 4px;
}
.btn-group .btn:last-child,
.btn-group .dropdown-toggle {
  -webkit-border-top-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  border-bottom-right-radius: 4px;
}
.btn-group .btn.large:first-child {
  margin-left: 0;
  -webkit-border-top-left-radius: 6px;
  -moz-border-radius-topleft: 6px;
  border-top-left-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-bottomleft: 6px;
  border-bottom-left-radius: 6px;
}
.btn-group .btn.large:last-child,
.btn-group .large.dropdown-toggle {
  -webkit-border-top-right-radius: 6px;
  -moz-border-radius-topright: 6px;
  border-top-right-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  -moz-border-radius-bottomright: 6px;
  border-bottom-right-radius: 6px;
}
.btn-group .btn:hover,
.btn-group .btn:focus,
.btn-group .btn:active,
.btn-group .btn.active {
  z-index: 2;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}