年末も近づいてきたのでデザインをいろいろ変えてみました。
サイドバーのコンテンツはあまり見られないのではないかという仮説があって、1カラムのテーマに変えてみたいと思っていた所なので、公式のWideboardのテーマをベースに、白背景のシンプルなデザインにしてみました。また文字サイズは大きめのほうが読者にとって見やすいと思ったので、かなり大きめの文字サイズにしてみています。
以下、テーマのCSSです。
@import "/css/theme/wideboard/wideboard.css";
body{background:#fff;}
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 {
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;
border-top-right-radius: 2px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-radius-topright: 2px;
border-radius-bottomright: 0;
border-radius-bottomleft: 0;
border-radius-topleft: 0;
border-top-right-radius: 2px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
background-clip: padding;
background-clip: padding-box;
background-clip: padding-box;
border-radius: 2px;
border-radius: 2px;
border-radius: 2px;
background-clip: padding;
background-clip: padding-box;
background-clip: padding-box;
cursor: pointer;
font-size: 12px;
text-decoration: none;
font-weight: bold;
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: gradient(linear, left top, left bottom, from(#14afd6), to(#129fc2));
background: linear-gradient(top, #14afd6, #129fc2);
background: linear-gradient(top, #14afd6 0%, #129fc2 100%);
}
.btn-register {
color: #fff !important;
background: #1aba56;
border: 1px solid transparent;
}
.btn-register:hover {
background: #15a24a;
background: gradient(linear, left top, left bottom, from(#1aba56), to(#15a24a));
background: linear-gradient(top, #1aba56, #15a24a);
background: 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 {
opacity: 0.4;
opacity: 0.4;
-khtml-opacity: 0.4;
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);
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.4);
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.4);
}
.btn-group .btn {
position: relative;
float: left;
margin-left: -1px;
border-radius: 0;
border-radius: 0;
border-radius: 0;
}
.btn-group .btn:first-child {
margin-left: 0;
border-top-left-radius: 4px;
border-radius-topleft: 4px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
.btn-group .btn:last-child,
.btn-group .dropdown-toggle {
border-top-right-radius: 4px;
border-radius-topright: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-radius-bottomright: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .btn.large:first-child {
margin-left: 0;
border-top-left-radius: 6px;
border-radius-topleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
border-radius-bottomleft: 6px;
border-bottom-left-radius: 6px;
}
.btn-group .btn.large:last-child,
.btn-group .large.dropdown-toggle {
border-top-right-radius: 6px;
border-radius-topright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
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;
}