1. カスタムするテンプレート

カスタムしていくテンプレートは

ワイドブラック　白 　3カラム右 ／記事：標準 ／サイドバー：標準

を使っていきます

以下デフォルトのスタイルシート

@charset "UTF-8";

/* Common */

a:link {
color: #2279a6;
text-decoration: none;
}

a:visited {
color: #2279a6;
text-decoration: none;
}

a:active {
color: #2279a6;
text-decoration: none;
}

a:hover {
color: #f0a900;
text-decoration: underline;
}

body {
background: #ffffff;
}

blockquote {
padding: 10px 12px 10px 28px;
margin: 0;
background: #f3f3f3 url(/_common/skins/21/images/blockquote_bg.gif) no-repeat 4px 8px;
}

#container {
margin-bottom: 20px;
color: #333333;
line-height: 1.5;
}

#banner {
height: 100px;
padding: 20px 0 0 0;
margin-bottom: 0px;
text-align: left;
background: url(/_common/skins/21/images/header_bg.jpg) repeat-x;
}

#banner h1{
width: 900px;
margin: 0 auto;
font-size: 28px;
}

#banner h1 a{
color: #ffffff;
}

#lead{
width: 900px;
margin: 0 auto;
color: #cccccc;
}

/* Content */

#content{
width: 900px;
margin: 0 auto;
text-align: left;
}

/* Links */
.archive-title{
padding-bottom: 10px;
margin-bottom: 20px;
background: url(/_common/skins/21/images/dotline.gif) repeat-x left bottom;
}

.archive-bottom{
margin-top: 20px;
}

.archive-name{
float: left;
}

.previousLink{
padding-left: 12px;
background: url(/_common/skins/21/images/arrowL_small.gif) no-repeat left center;
}

.nextLink{
padding-right: 12px;
background: url(/_common/skins/21/images/arrowR_small.gif) no-repeat right center;
}

.archive-links{
float: right;
padding-left: 10px;
white-space: nowrap;
background: url(/_common/skins/21/images/arrowT_small.gif) no-repeat left center;
}

.archive-title a:link {
color: #333333;
text-decoration: none;
}

.archive-title a:visited {
color: #333333;
text-decoration: none;
}

.archive-title a:active {
color: #333333;
text-decoration: none;
}

.archive-title a:hover {
color: #f0a900;
text-decoration: underline;
}

.archive-bottom a:link {
color: #333333;
text-decoration: none;
}

.archive-bottom a:visited {
color: #333333;
text-decoration: none;
}

.archive-bottom a:active {
color: #333333;
text-decoration: none;
}

.archive-bottom a:hover {
color: #f0a900;
text-decoration: underline;
}

/* Articles */
#main {
float: left;
width: 480px;
overflow: hidden;
}

.articles {
width: 480px;
margin-bottom: 20px;
overflow: hidden;
background: url(/_common/skins/21/images/dotline.gif) repeat-x left bottom;
}

.articles-title {
margin: 0 0 20px 0;
font-size: 130%;
}

.articles-title a:link {
color: #333333;
text-decoration: none;
}

.articles-title a:visited {
color: #333333;
text-decoration: none;
}

.articles-title a:active {
color: #333333;
text-decoration: none;
}

.articles-title a:hover {
color: #ffa900;
text-decoration: underline;
}

.articles-body {
margin-bottom: 20px;
line-height: 1.6;
}

.articles-body img {
margin-right: 6px;
margin-bottom: 6px;
}

a.readMoreLink {
padding: 2px 15px 2px 5px;
background: #484848 url(/_common/skins/21/images/arrow_white.gif) no-repeat right center;
}
a.readMoreLink:link,
a.readMoreLink:visited,
a.readMoreLink:hover,
a.readMoreLink:active {
color:#ffffff;
text-decoration:none;
}

a.readMoreLink:hover {
background: #ffa900 url(/_common/skins/21/images/arrow_white.gif) no-repeat right center;
}

.posted{
margin-bottom: 20px;
font-size: 90%;
line-height:1.6;
}

/* Entry */
.entry {
margin-bottom: 20px;
padding-top:10px;
background: url(/_common/skins/21/images/dotline.gif) repeat-x;
}

.entry h4 {
padding: 0;
margin: 0 0 10px 0;
font-size: 105%;
}

.entry ul, .entry li, .entry dl, .entry dt, .entry dd, .entry form {
padding: 0;
margin: 0;
}

/* nice! */
#nice h4 {
padding-left: 20px;
background: url("/_common/skins/21/images/icon-nice.gif") no-repeat left center;
}

#nice form {
margin-bottom: 5px;
}

#nice ul {
margin-bottom: 5px;
}

#nice li {
float: left;
width: 65px;
padding: 5px 0;
overflow: hidden;
font-size: 86%;
line-height: 1.2;
display: block;
text-align: center;
white-space: nowrap;
list-style: none;
}

/* Comments */
#comments form {
}

.each-comment {
clear: both;
margin-bottom: 15px;
}

.each-comment img {
float: left;
margin: 0 10px;
}

.each-comment input {
padding: 0;
margin: 0;
}

* html .each-comment input {
margin-bottom: -2px;
}

.comments-body {
margin: 0 0 0 60px;
}

#comments .delete {
margin-left: 60px;
}

/* Comment Write */
#comment-write dt {
float: left;
clear: both;
}

#comment-write dl {
}

#comment-write dd {
margin: 0 0 3px 80px;
line-height: 1.5;
}

#comment-write textarea {
height: 150px;
padding:3px;
border: 1px solid #969696;
}

.comment-input {
width: 360px;
padding:3px;
border: 1px solid #969696;
}

/* Trackback Write */
#trackback-write p {
margin: 0;
}

#trackback-write form {
margin: 12px 0;
}

.each-trackback {
margin-bottom: 15px;
}

.trackback-url {
padding-top: 10px;
}

.trackback-url input {
width: 98%;
padding:3px;
border: 1px solid #969696;
}

/* Side */
#side-a {
float: left;
width: 170px;
padding-left: 20px;
margin-left: 20px;
overflow: hidden;
font-size: 90%;
background: url(/_common/skins/21/images/dotline_tate.gif) repeat-y left top;
}

#side-b {
float: left;
width: 170px;
padding-left: 20px;
margin-left: 20px;
overflow: hidden;
font-size: 90%;
background: url(/_common/skins/21/images/dotline_tate.gif) repeat-y left top;
}

.sidebar {
width: 170px;
margin-bottom: 20px;
overflow: hidden;
}

.sidebar-title {
margin: 0 0 10px 0;
font-size: 12px;
}

.sidebar-title a:link {
color: #333333;
text-decoration: none;
}

.sidebar-title a:visited {
color: #333333;
text-decoration: none;
}

.sidebar-title a:active {
color: #333333;
text-decoration: none;
}

.sidebar-title a:hover {
color: #ffa900;
text-decoration: underline;
}

.sidebar-body {
}

.sidebar-body ul, .sidebar-body li, .sidebar-body dl, .sidebar-body dt, .sidebar-body dd, .sidebar-body form {
padding: 0;
margin: 0;
}

.sidebar-body li {
padding-left: 12px;
margin-bottom: 8px;
line-height: 1.3;
background: url(/_common/skins/21/images/dot.gif) no-repeat 0 4px;
list-style-type: none;
}

* html .sidebar-body li {
background: url(/_common/skins/21/images/dot.gif) no-repeat 0 6px;
}

.sidebar-body li a {
margin-right: 4px;
}

.new {
margin-left: 6px;
font-weight: bold;
color: #ee0000;
}

/* Profile */
dt.profile-img {
float: left;
}

dd.profile-status{
margin-left: 80px;
font-size:x-small;
}

dd.profile-status .blogthemeLink {
line-height:1.3;
}

#profile .profileLink{
padding-left: 12px;
line-height: 1.2;
background: url(/_common/skins/21/images/dot.gif) no-repeat 0 3px;
}

.nice {
padding: 0 2px;
margin: 0;
border: 1px solid #0090ff;
color: #0090ff;
background: #ffd900;
}

/* Calendar */
#calendar a:link {
color: #333333;
text-decoration: none;
}

#calendar a:visited {
color: #333333;
text-decoration: none;
}

#calendar a:active {
color: #333333;
text-decoration: none;
}

#calendar a:hover {
color: #333333;
text-decoration: underline;
}

.calendar-date {
text-align: center;
}

#calendar table {
margin: 3px auto;
text-align: center;
}

#calendar th {
height: 20px;
width: 24px;
font-weight: normal;
color: #ffffff;
background: #484848;
}

#calendar td{
height: 18px;
width: 22px;
border: 1px solid #dddddd;
font-size: 90%;
}

#calendar td.link {
font-weight: bold;
color: #ffffff;
background: #484848;
}

#calendar td.link a:link {
color: #ffffff;
}

#calendar td.link a:visited {
color: #ffffff;
}

#calendar td.link a:hover {
color: #ffffff;
}

#calendar td.link a:active {
color: #ffffff;
}

/* Search */
#search .sidebar-body {
}

.search-tbox {
width: 65%;
}

/* Message */
#send-message {
}

/* RSS Regist */
#rssRegist {
margin-bottom: 20px;
font-weight: bold;
font-size:90%;
line-height: 1;
text-align: center;
}

#rssRegist a:link ,
#rssRegist a:visited ,
#rssRegist a:active {
padding:4px 0;
background: #333333 url("/_common/skins/21/images/arrow_rssentry.gif") no-repeat 8px 7px;
color: #ffffff;
text-decoration: none;
display:block;
}

#rssRegist a:hover {
padding:4px 0;
background: #ffa900 url("/_common/skins/21/images/arrow_rssentry.gif") no-repeat 8px 7px;
color: #ffffff;
text-decoration: none;
display:block;
}

/* So-net */
#powered {
}

#powered img {
margin-bottom: 10px;
}

#rssfeed {
}

#rssfeed a:link {
color: #666666;
text-decoration: none;
}

#rssfeed a:visited {
color: #666666;
text-decoration: none;
}

#rssfeed a:active {
color: #666666;
text-decoration: none;
}

#rssfeed a:hover {
color: #666666;
text-decoration: underline;
}

/* Tag */
.tag-word{
margin: 10px 0 0 0;
}

.tag{
}

#tag_cloud{
padding: 12px 10px;
margin-bottom: 10px;
text-align: left;
background: #f6f6f6;
}

#tag_cloud a {
padding: 2px;
}

.tag-title{
padding-top: 5px;
font-size: 140%;
font-weight: bold;
text-align: left;
}

.tag-body{
margin: 10px 0;
}

.tag-service{
position: relative;
clear: left;
padding: 0 0 3px 0;
font-size: 130%;
font-weight: bold;
text-align: left;
background: url(/_common/skins/21/images/dotline.gif) repeat-x left bottom;
}

.tag-search{
padding: 5px 0 0 0;
margin-bottom: 10px;
text-align: right;
}

.tag-article{
padding: 2px 10px;
text-align: left;
}

.tag-article-title{
padding: 0 0 5px 12px;
text-align: left;
background: url(/_common/skins/21/images/arrowR_small.gif) no-repeat 0 5px;
}

* html .tag-article-title{
background: url(/_common/skins/21/images/arrowR_small.gif) no-repeat 0 8px;
}

.tag-article-posted{
}

.tag-article-summary{
padding: 0px 10px;
line-height: 1.4em;
}

.tag-more{
clear: left;
margin: 10px 0;
text-align: right;
}

.tag-photos{
float: left;
height: 200px;
width: 140px;
padding: 0px 10px;
}

.tag-photos-title{
padding: 5px 0;
line-height: 1.4em;
text-align: left;
}

.tag-audios{
margin: 2px 10px;
}

.tag-audios-title{
padding: 0 0 5px 12px;
text-align: left;
background: url(/_common/skins/21/images/arrowR_small.gif) no-repeat 0 5px;
}

* html .tag-audios-title{
background: url(/_common/skins/21/images/arrowR_small.gif) no-repeat 0 8px;
}

.tag-audios-posted{
}

.tag-videos{
float: left;
padding: 0 10px;
}

.tag-videos-title{
padding: 5px 0;
line-height: 1.4em;
text-align: left;
}

.tag-navi{
clear: left;
margin: 10px 0;
text-align: center;
}

/* Footer */
#footer {
clear: both;
padding: 10px 20px;
font-size: x-small;
background: #eeeeee;
}

#footer a:link {
color: #666666;
text-decoration: none;
}

#footer a:visited {
color: #666666;
text-decoration: none;
}

#footer a:active {
color: #666666;
text-decoration: none;
}

#footer a:hover {
color: #666666;
text-decoration: underline;
}

.copyright{
padding: 0;
margin: 0;
text-align: right;
}

/* Message(2011.08) */
.message {
margin: 0 0 15px 0;
padding: 0;
}
h3.message-title {
margin: 0 0 10px 0;
font-size: 105%;
}
.message-body {
padding: 0;
}

タグ：テンプレート