スタイルシート

カスタマイズ初心者用に誰でも簡単にスタイルシートが変更できるCSSソース（seesaaブログ用）を配布予定です。

こんな方にお薦めです。

変更したいけどCSSに戸惑っていた方
CSSのどこを変更したらいいのか解らない方
変更箇所をCSSで探すのが面倒くさかった方
カスタマイズするとレイアウトが崩れる方
などなど,,,,

近日中に公開しますのでご期待下さい！

タグ：Seesaa CSS スタイルシートカスタマイズブログ

3カラム（可変幅）CSSソース

ご利用の際は当ブログへリンクを張って頂けると喜びます。
リンクソースコピー

3カラム（可変幅）CSSソース

/*=========================================
==    スタイルシート(CSS)遊びのブログ　　==
==    簡単カスタマイズCSSソース          ==
==    3カラム可変幅                      ==
==    <a href="http://stylesheet.seesaa.net/" target="_blank">http://stylesheet.seesaa.net/</a>      ==
==========================================*/

/*++++++++++++++++++++++++++++++ページ全体*/

body {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 85%;
     margin: 0px 0px 0px 0px;
     padding: 0px 2% 0px 2%;
     text-align: center;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
}
/*++++++++++++++++++++++++++++++ページ全体のリンク色*/

a{
     color: blue;
     text-decoration: none;
}
a:hover{
     color: red;
     text-decoration: underline;
}
/*=========================================
==    全体の枠指定                       ==
==========================================*/

#container{
     width: 100%;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     text-align: left;
     color: black;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
/*左右の太さ分をwidthから引く*/
}
/*=========================================
==    記事部分のボックス                 ==
==========================================*/

#content {
     width: 64%;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     float: left;
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
/*左右の太さ分をwidthから引く*/
}
/*=========================================
==    右サイドのボックス                 ==
==========================================*/

#links {
     width: 18%;
     font-size: 90%;
     font-weight: normal;
     float: left;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
/*左右の太さ分をwidthから引く*/
}
/*=========================================
==    左サイドのボックス                 ==
==========================================*/

#links-left {
     width: 18%;
     font-size: 90%;
     font-weight: normal;
     float: left;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
/*左右の太さ分をwidthから引く*/
}
/*++++++++++++++++++++++++++++++ヘッダー*/

#banner{
     margin: 0px 0px 10px 0px;
     padding: 0px 0px 0px 0px;
     height:120px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*++++++++++++++++++++++++++++++ブログタイトル*/

h1 {
     margin: 0px 0px 0px 0px;
     padding: 50px 0px 10px 20px;
     font-weight: bolder;
     font-size: 200%;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======リンク色======*/

h1 a{
     color: black;
     text-decoration: none;
     font-weight: bolder;
}
/*======マウスオーバー======*/

h1 a:hover{
     color: silver;
     text-decoration: none;
}
/*++++++++++++++++++++++++++++++ブログ説明*/

.description {
     font-weight: bold;
     margin: 0px 0px 0px 20px;
     padding: 0px 10px 0px 0px;
     font-size:100%;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*++++++++++++++++++++++++++++++記事部分のの指定*/

/*++++++++++++++++++++++++++++++トップナビゲーション*/

.navi {
     font-size:75%;
     width:100%;
     text-align: center;
     margin: 10px 0px 10px 0px;
     padding: 0px 0px 0px 0px;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======記事部分大外枠======*/
.blog {
     margin: 0px 0px 0px 0px;
     padding: 0px 15px 20px 15px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======記事部分中枠======*/
.blogbody {
     margin: 0px 0px 15px 0px;
     padding: 15px 15px 0px 15px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======この中に文章が入ります======*/
.text{
     margin: 0px 0px 0px 0px;
     padding: 10px 0px 10px 0px;
     line-height:1.8;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*++++++++++++++++++++++++++++++記事日付*/

h2 {
     font-size: 100%;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     font-weight: bold;
     text-align: left;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
.date{
     color: black;
     margin: 0px 0px 0px 0px;
     padding: 10px 0px 0px 0px;
}
/*++++++++++++++++++++++++++++++記事タイトル*/

h3 {
     font-size:120%;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     font-weight: bolder;
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======記事タイトルのリンク色等======*/
h3 a{
     font-weight:bolder;
}
.title{
     font-weight:bolder;
     text-align:left;
}
.title a{
     color:blue;
     border:none;
     text-decoration: none;
     font-weight:bolder;
}
/*++++++++++++++++++++++++++++++記事下posted部分*/
.posted{
     text-align: right;
     margin: 0px 0px 5px 0px;
     padding: 15px 0px 10px 0px;
     font-size: 75%;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======postedのリンク色======*/
.posted a{
     font-weight: bold;
     color: blue;
}
/*++++++++++++++++++++++++++++++コメント*/
#comments {
     margin: 25px 0px 10px 0px;
     padding: 15px 15px 15px 15px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======コメント記事の外枠======*/
.comments-body {
     margin: 0px 0px 0px 0px;
     padding: 0px 15px 0px 15px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======コメント記入部分======*/
#comments form{
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
}
#comments textarea{
     margin: 0px 0px 5px 0px;
     padding: 0px 0px 0px 0px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top: 1px solid bkack;
     border-bottom: 1px solid bkack;
     border-right: 1px solid bkack;
     border-left: 1px solid bkack;
}
#comments input{
     border:1px solid black;
     background-color:white;
     color:black;
}
/*======コメントタイトル[この記事へのコメント]======*/
.comments-head{
     font-weight: bold;
     margin: 0px 0px 0px 0px;
     padding: 5px 0px 5px 15px;
     color: blue;
     font-size:100%;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:r;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======コメントのposted======*/
.comments-post{
     margin: 0px 0px 0px 0px;
     padding: 3px 0px 3px 0px;
     font-size: 75%;
     text-align: right;
     color: blue;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*++++++++++++++++++++++++++++++トラックバック*/
#trackback {
     font-size: 100%;
     color: black;
     margin: 0px 30px 10px 30px;
     padding: 14px 14px 14px 14px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top: 1px dotted black;
     border-bottom: 1px dotted black;
     border-right: 1px dotted black;
     border-left: 1px dotted black;
}
/*++++++++++++++++++++++++++++++サイドバーの指定*/

/*======サイドバーの中枠======*/
.side {
     line-height: 1.8;
     margin: 0px 0px 10px 0px;
     padding: 0px 10px 10px 10px;
     font-size:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======サイドバーのタイトル======*/
.sidetitle{
     font-size:;
     margin: 0px 0px 0px 0px;
     padding: 5px 10px 5px 10px;
     font-weight: bold;
     color: white;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:black;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======サイドバーのリンク指定======*/
.side a{
     color:;
}
/*======サイドバーの記事検索======*/
.side input {
     border: 1px solid black;
     background-color: white;
     color: black;
}
/*======サイドバーのタグクラウド======*/
.side-tag {
     padding:3px 10px 10px 10px;
     margin: 0px 0px 10px 0px;
}
.side-tag a{
     font-size:100%;
}
/*======syndicate======*/
.syndicate {
     margin: 0px 10px 0px 0px;
     padding: 0px 0px 0px 0px;
     text-align:center;
     font-size: 75%;
}
/*++++++++++++++++++++++++++++++フッター*/
#footer{
     clear:both;
     width:100%;
     height: 50px;
     background-color:;
     background-image:url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
.copyright{
     font-size:80%;
     width:100%;
     text-align:center;
}
.powered {
     padding:3px 5px 0px 0px;
     text-align:right;
     margin-left:10px;
}
/*++++++++++++++++++++++++++++++カレンダーを囲むボックス*/
#calendar {
     margin: 0px 0px 10px 0px;
     padding: 0px 0px 0px 0px;
     baclground-color:;
     width: 98%;
     border-top: 1px solid black;
     border-bottom: 1px solid black;
     border-right: 1px solid black;
     border-left: 1px solid black;
     /*左右の太さ分をwidthから引く*/
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
}
/*======テーブル======*/
#calendar table {
     width:100%;
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======曜日======*/
#calendar th{
     text-align:center;
     font-size:12px;
     color:black;
     padding:2px;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======日======*/
#calendar td{
     text-align:center;
     font-size:12px;
     color:black;
     padding:2px;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======年/月======*/
.calendarhead {
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:black;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
     color:white;
     font-size:12px;
     font-weight:bolder;
     padding:5px 0px 5px 0px;
     text-align:center;
}
/*======年/月のリンク指定======*/
.calendarhead a{
     color: white;
     text-decoration:none;
}
.calendarhead a:hover{
     color: red;
     text-decoration:underline;
}
/*======日のリンク指定======*/
.calendarday {
     font-size:12px;
}
.calendarday a{
     color: blue;
     text-decoration:none;
}
.calendarday a:hover{
     color: red;
     text-decoration:underline;
}
#diet-container{
     border:1px solid #999;
     padding:5px;
     margin-bottom:5px;
}
.diet-title{
     padding:2px 10px 2px 5px;
     font-size:12px;
     width:90px;
     margin-top:5px;
     font-weight:bold;
}
.diet-content{
     padding-left:10px;
     font-size:12px;
}
#diet-foods{
     padding-left:10px;
     font-size:12px;
}
.food-title{
     width:20%;
     clear:left;
     float:left;
}
.food-content{
     width:75%;
     padding-top:10px;
}
blockquote{
     border:1px solid #ccc;
     padding:5px;
     margin:10px;
}
.tag-word{
     margin:20px 0px 0px 0px;
     line-height:1.4em;
}
/*++++++++++++++++++++++++++++++ボックス*/
.tag{
     margin: 0px 0px 0px 0px;
     padding: 10px 10px 10px 10px;
     position:relative;
     font-size:100%;
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
#tag_cloud{
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top: 1px solid black;
     border-bottom: 1px solid black;
     border-right: 1px solid black;
     border-left: 1px solid black;
     margin: 0px 0px 0px 0px;
     padding: 10px 10px 10px 10px;
     text-align:left;
     position:relative;
}
#tag_cloud a {
     margin: 0px 0px 0px 0px;
     padding: 2px 2px 2px 2px;
     color: blue;
}
.tag-title{
     font-size:120%;
     font-weight:bold;
     text-align:left;
}
.tag-body{
     margin:10px 0px 10px 0px;
     padding:10px 0px 0px 0px;
     position:relative;
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
.tag-service{
     text-align:left;
     font-weight:bold;
     border-top:;
     border-bottom: 1px solid blue;
     border-right:;
     border-left:;
     margin:0px 0px 0px 0px;
     padding:0px 0px 5px 0px;
     clear:left;
     position:relative;
}
.tag-search{
     text-align:right;
     padding:5px 0px;
     margin-bottom:10px;
     font-weight:bold;
     position:relative;
}
.tag-article{
     padding:0px 10px 10px 10px;
     text-align:left;
     position:relative;
}
.tag-article-title{
     text-align:left;
     padding:0px 0px 5px 0px;
     font-weight:bold;
     position:relative;
}
.tag-article-posted{
     font-weight:normal;
     position:relative;
}
.tag-article-summary{
     padding:0px 10px;
     line-height:1.4em;
     position:relative;
}
.tag-more{
     text-align:right;
     margin:10px 0px;
     clear:left;
     position:relative;
}
.tag-photos{
     float:left;
     margin:10px 7px;
     position:relative;
     width:140px;
     height:200px;
}
.tag-photos-title{
     line-height:1.4em;
     padding:5px 0px;
     text-align:left;
     position:relative;
}
.tag-audios{
     margin:5px;
     position:relative;
}
.tag-audios-title{
     text-align:left;
     font-weight:bold;
     padding:0px 0px 5px 0px;
     position:relative;
}
.tag-audios-posted{
     font-weight:normal;
     position:relative;
}
.tag-videos{
     float:left;
     margin:10px 7px;
     position:relative;
}
.tag-videos-title{
     line-height:1.4em;
     padding:5px 0px;
     text-align:left;
     position:relative;
}
.tag-navi{
     clear:left;
     text-align:center;
     margin:10px 0px;
     position:relative;
}

>>>>>サンプル表示（別窓）

タグ：CSS Seesaa スタイルシートカスタマイズブログ

2カラム右サイドバー（可変幅）CSSソース

ご利用の際は当ブログへリンクを張って頂けると喜びます。
リンクソースコピー

2カラム右サイドバー（可変幅）CSSソース

/*=========================================
==    スタイルシート(CSS)遊びのブログ　　==
==    簡単カスタマイズCSSソース          ==
==    右サイドバー可変幅                 ==
==    <a href="http://stylesheet.seesaa.net/" target="_blank">http://stylesheet.seesaa.net/</a>      ==
==========================================*/

/*++++++++++++++++++++++++++++++ページ全体*/

body {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 85%;
     margin: 0px 0px 0px 0px;
     padding: 0px 2% 0px 2%;
     text-align: center;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
}
/*++++++++++++++++++++++++++++++ページ全体のリンク色*/

a{
     color: blue;
     text-decoration: none;
}
a:hover{
     color: red;
     text-decoration: underline;
}
/*=========================================
==    全体の枠指定                       ==
==========================================*/

#container{
     width: 100%;
     margin: 0px  0px 0px  0px;
     padding: 0px 0px 0px 0px;
     text-align: left;
     color: black;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
/*左右の太さ分をwidthから引く*/
}
/*=========================================
==    記事部分のボックス                 ==
==========================================*/

#content {
     width: 80%;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     float: left;
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
/*左右の太さ分をwidthから引く*/
}
/*=========================================
==    右サイドのボックス                 ==
==========================================*/

#links {
     width: 18%;
     font-size: 90%;
     font-weight: normal;
     float: right;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
/*左右の太さ分をwidthから引く*/
}
/*=========================================
==    左サイドのボックス                 ==
==========================================*/

#links-left {
     }
/*++++++++++++++++++++++++++++++ヘッダー*/

#banner{
     margin: 0px 0px 10px 0px;
     padding: 0px 0px 0px 0px;
     height:120px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*++++++++++++++++++++++++++++++ブログタイトル*/

h1 {
     margin: 0px 0px 0px 0px;
     padding: 50px 0px 10px 20px;
     font-weight: bolder;
     font-size: 200%;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======リンク色======*/

h1 a{
     color: black;
     text-decoration: none;
     font-weight: bolder;
}
/*======マウスオーバー======*/

h1 a:hover{
     color: silver;
     text-decoration: none;
}
/*++++++++++++++++++++++++++++++ブログ説明*/

.description {
     font-weight: bold;
     margin: 0px 0px 0px 20px;
     padding: 0px 10px 0px 0px;
     font-size:100%;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*++++++++++++++++++++++++++++++記事部分のの指定*/

/*++++++++++++++++++++++++++++++トップナビゲーション*/

.navi {
     font-size:75%;
     width:100%;
     text-align: center;
     margin: 10px 0px 10px 0px;
     padding: 0px 0px 0px 0px;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======記事部分大外枠======*/
.blog {
     margin: 0px 0px 0px 0px;
     padding: 0px 15px 20px 15px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======記事部分中枠======*/
.blogbody {
     margin: 0px 0px 15px 0px;
     padding: 15px 15px 0px 15px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======この中に文章が入ります======*/
.text{
     margin: 0px 0px 0px 0px;
     padding: 10px 0px 10px 0px;
     line-height:1.8;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*++++++++++++++++++++++++++++++記事日付*/

h2 {
     font-size: 100%;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     font-weight: bold;
     text-align: left;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
.date{
     color: black;
     margin: 0px 0px 0px 0px;
     padding: 10px 0px 0px 0px;
}
/*++++++++++++++++++++++++++++++記事タイトル*/

h3 {
     font-size:120%;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     font-weight: bolder;
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======記事タイトルのリンク色等======*/
h3 a{
     font-weight:bolder;
}
.title{
     font-weight:bolder;
     text-align:left;
}
.title a{
     color:blue;
     border:none;
     text-decoration: none;
     font-weight:bolder;
}
/*++++++++++++++++++++++++++++++記事下posted部分*/
.posted{
     text-align: right;
     margin: 0px 0px 5px 0px;
     padding: 15px 0px 10px 0px;
     font-size: 75%;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======postedのリンク色======*/
.posted a{
     font-weight: bold;
     color: blue;
}
/*++++++++++++++++++++++++++++++コメント*/
#comments {
     margin: 25px 0px 10px 0px;
     padding: 15px 15px 15px 15px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======コメント記事の外枠======*/
.comments-body {
     margin: 0px 0px 0px 0px;
     padding: 0px 15px 0px 15px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======コメント記入部分======*/
#comments form{
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
}
#comments textarea{
     margin: 0px 0px 5px 0px;
     padding: 0px 0px 0px 0px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top: 1px solid bkack;
     border-bottom: 1px solid bkack;
     border-right: 1px solid bkack;
     border-left: 1px solid bkack;
}
#comments input{
     border:1px solid black;
     background-color:white;
     color:black;
}
/*======コメントタイトル[この記事へのコメント]======*/
.comments-head{
     font-weight: bold;
     margin: 0px 0px 0px 0px;
     padding: 5px 0px 5px 15px;
     color: blue;
     font-size:100%;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:r;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======コメントのposted======*/
.comments-post{
     margin: 0px 0px 0px 0px;
     padding: 3px 0px 3px 0px;
     font-size: 75%;
     text-align: right;
     color: blue;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*++++++++++++++++++++++++++++++トラックバック*/
#trackback {
     font-size: 100%;
     color: black;
     margin: 0px 30px 10px 30px;
     padding: 14px 14px 14px 14px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top: 1px dotted black;
     border-bottom: 1px dotted black;
     border-right: 1px dotted black;
     border-left: 1px dotted black;
}
/*++++++++++++++++++++++++++++++サイドバーの指定*/

/*======サイドバーの中枠======*/
.side {
     line-height: 1.8;
     margin: 0px 0px 10px 0px;
     padding: 0px 10px 10px 10px;
     font-size:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======サイドバーのタイトル======*/
.sidetitle{
     font-size:;
     margin: 0px 0px 0px 0px;
     padding: 5px 10px 5px 10px;
     font-weight: bold;
     color: white;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:black;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======サイドバーのリンク指定======*/
.side a{
     color:;
}
/*======サイドバーの記事検索======*/
.side input {
     border: 1px solid black;
     background-color: white;
     color: black;
}
/*======サイドバーのタグクラウド======*/
.side-tag {
     padding:3px 10px 10px 10px;
     margin: 0px 0px 10px 0px;
}
.side-tag a{
     font-size:100%;
}
/*======syndicate======*/
.syndicate {
     margin: 0px 10px 0px 0px;
     padding: 0px 0px 0px 0px;
     text-align:center;
     font-size: 75%;
}
/*++++++++++++++++++++++++++++++フッター*/
#footer{
     clear:both;
     width:100%;
     height: 50px;
     background-color:;
     background-image:url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
.copyright{
     font-size:80%;
     width:100%;
     text-align:center;
}
.powered {
     padding:3px 5px 0px 0px;
     text-align:right;
     margin-left:10px;
}
/*++++++++++++++++++++++++++++++カレンダーを囲むボックス*/
#calendar {
     margin: 0px 0px 10px 0px;
     padding: 0px 0px 0px 0px;
     baclground-color:;
     width: 98%;
     border-top: 1px solid black;
     border-bottom: 1px solid black;
     border-right: 1px solid black;
     border-left: 1px solid black;
     /*左右の太さ分をwidthから引く*/
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
}
/*======テーブル======*/
#calendar table {
     width:100%;
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======曜日======*/
#calendar th{
     text-align:center;
     font-size:12px;
     color:black;
     padding:2px;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======日======*/
#calendar td{
     text-align:center;
     font-size:12px;
     color:black;
     padding:2px;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======年/月======*/
.calendarhead {
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:black;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
     color:white;
     font-size:12px;
     font-weight:bolder;
     padding:5px 0px 5px 0px;
     text-align:center;
}
/*======年/月のリンク指定======*/
.calendarhead a{
     color: white;
     text-decoration:none;
}
.calendarhead a:hover{
     color: red;
     text-decoration:underline;
}
/*======日のリンク指定======*/
.calendarday {
     font-size:12px;
}
.calendarday a{
     color: blue;
     text-decoration:none;
}
.calendarday a:hover{
     color: red;
     text-decoration:underline;
}
#diet-container{
     border:1px solid #999;
     padding:5px;
     margin-bottom:5px;
}
.diet-title{
     padding:2px 10px 2px 5px;
     font-size:12px;
     width:90px;
     margin-top:5px;
     font-weight:bold;
}
.diet-content{
     padding-left:10px;
     font-size:12px;
}
#diet-foods{
     padding-left:10px;
     font-size:12px;
}
.food-title{
     width:20%;
     clear:left;
     float:left;
}
.food-content{
     width:75%;
     padding-top:10px;
}
blockquote{
     border:1px solid #ccc;
     padding:5px;
     margin:10px;
}
.tag-word{
     margin:20px 0px 0px 0px;
     line-height:1.4em;
}
.tag{
     padding:10px;
     position:relative;
     font-size:12px;
     border:1px solid #E4E4E4;
     color: #9B9B9B;
}
#tag_cloud{
     border:1px solid #CCC;
     padding:10px;
     text-align:left;
     position:relative;
}
#tag_cloud a {
     padding:2px;
}
.tag-title{
     font-size:16px;
     font-weight:bold;
     text-align:left;
}
.tag-body{
     margin:10px 0px;
     padding:10px 0px 0px 0px;
     position:relative;
}
.tag-service{
     text-align:left;
     font-weight:bold;
     border-bottom:1px solid #CCC;
     padding:0px 0px 5px 0px;
     clear:left;
     position:relative;
}
.tag-search{
     text-align:right;
     padding:5px 0px;
     margin-bottom:10px;
     font-weight:bold;
     position:relative;
}
.tag-article{
     padding:0px 10px 10px 10px;
     text-align:left;
     position:relative;
}
.tag-article-title{
     text-align:left;
     padding:0px 0px 5px 0px;
     font-weight:bold;
     position:relative;
}
.tag-article-posted{
     font-weight:normal;
     position:relative;
}
.tag-article-summary{
     padding:0px 10px;
     line-height:1.4em;
     position:relative;
}
.tag-more{
     text-align:right;
     margin:10px 0px;
     clear:left;
     position:relative;
}
.tag-photos{
     float:left;
     margin:10px 7px;
     position:relative;
     width:140px;
     height:200px;
}
.tag-photos-title{
     line-height:1.4em;
     padding:5px 0px;
     text-align:left;
     position:relative;
}
.tag-audios{
     margin:5px;
     position:relative;
}
.tag-audios-title{
     text-align:left;
     font-weight:bold;
     padding:0px 0px 5px 0px;
     position:relative;
}
.tag-audios-posted{
     font-weight:normal;
     position:relative;
}
.tag-videos{
     float:left;
     margin:10px 7px;
     position:relative;
}
.tag-videos-title{
     line-height:1.4em;
     padding:5px 0px;
     text-align:left;
     position:relative;
}
.tag-navi{
     clear:left;
     text-align:center;
     margin:10px 0px;
     position:relative;
}

>>>>>サンプル表示（別窓）

タグ：スタイルシートカスタマイズブログ CSS Seesaa

2カラム左サイドバー（可変幅）CSSソース

ご利用の際は当ブログへリンクを張って頂けると喜びます。
リンクソースコピー

2カラム左サイドバー（可変幅）CSSソース

/*=========================================
==    スタイルシート(CSS)遊びのブログ　　==
==    簡単カスタマイズCSSソース          ==
==    左サイドバー可変幅                 ==
==    <a href="http://stylesheet.seesaa.net/" target="_blank">http://stylesheet.seesaa.net/</a>      ==
==========================================*/

/*++++++++++++++++++++++++++++++ページ全体*/

body {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 85%;
     margin: 0px 0px 0px 0px;
     padding: 0px 2% 0px 2%;
     text-align: center;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
}
/*++++++++++++++++++++++++++++++ページ全体のリンク色*/

a{
     color: blue;
     text-decoration: none;
}
a:hover{
     color: red;
     text-decoration: underline;
}
/*=========================================
==    全体の枠指定                       ==
==========================================*/

#container{
     width: 100%;
     margin: 0px  0px 0px  0px;
     padding: 0px 0px 0px 0px;
     text-align: left;
     color: black;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
/*左右の太さ分をwidthから引く*/
}
/*=========================================
==    記事部分のボックス                 ==
==========================================*/

#content {
     width: 80%;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     float: right;
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
/*左右の太さ分をwidthから引く*/
}
/*=========================================
==    右サイドのボックス                 ==
==========================================*/

#links {
     width: 18%;
     font-size: 90%;
     font-weight: normal;
     float: left;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
/*左右の太さ分をwidthから引く*/
}
/*=========================================
==    左サイドのボックス                 ==
==========================================*/

#links-left {
     }
/*++++++++++++++++++++++++++++++ヘッダー*/

#banner{
     margin: 0px 0px 10px 0px;
     padding: 0px 0px 0px 0px;
     height:120px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*++++++++++++++++++++++++++++++ブログタイトル*/

h1 {
     margin: 0px 0px 0px 0px;
     padding: 50px 0px 10px 20px;
     font-weight: bolder;
     font-size: 200%;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======リンク色======*/

h1 a{
     color: black;
     text-decoration: none;
     font-weight: bolder;
}
/*======マウスオーバー======*/

h1 a:hover{
     color: silver;
     text-decoration: none;
}
/*++++++++++++++++++++++++++++++ブログ説明*/

.description {
     font-weight: bold;
     margin: 0px 0px 0px 20px;
     padding: 0px 10px 0px 0px;
     font-size:100%;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*++++++++++++++++++++++++++++++記事部分のの指定*/

/*++++++++++++++++++++++++++++++トップナビゲーション*/

.navi {
     font-size:75%;
     width:100%;
     text-align: center;
     margin: 10px 0px 10px 0px;
     padding: 0px 0px 0px 0px;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======記事部分大外枠======*/
.blog {
     margin: 0px 0px 0px 0px;
     padding: 0px 15px 20px 15px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======記事部分中枠======*/
.blogbody {
     margin: 0px 0px 15px 0px;
     padding: 15px 15px 0px 15px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======この中に文章が入ります======*/
.text{
     margin: 0px 0px 0px 0px;
     padding: 10px 0px 10px 0px;
     line-height:1.8;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*++++++++++++++++++++++++++++++記事日付*/

h2 {
     font-size: 100%;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     font-weight: bold;
     text-align: left;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
.date{
     color: black;
     margin: 0px 0px 0px 0px;
     padding: 10px 0px 0px 0px;
}
/*++++++++++++++++++++++++++++++記事タイトル*/

h3 {
     font-size:120%;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     font-weight: bolder;
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======記事タイトルのリンク色等======*/
h3 a{
     font-weight:bolder;
}
.title{
     font-weight:bolder;
     text-align:left;
}
.title a{
     color:blue;
     border:none;
     text-decoration: none;
     font-weight:bolder;
}
/*++++++++++++++++++++++++++++++記事下posted部分*/
.posted{
     text-align: right;
     margin: 0px 0px 5px 0px;
     padding: 15px 0px 10px 0px;
     font-size: 75%;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======postedのリンク色======*/
.posted a{
     font-weight: bold;
     color: blue;
}
/*++++++++++++++++++++++++++++++コメント*/
#comments {
     margin: 25px 0px 10px 0px;
     padding: 15px 15px 15px 15px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======コメント記事の外枠======*/
.comments-body {
     margin: 0px 0px 0px 0px;
     padding: 0px 15px 0px 15px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======コメント記入部分======*/
#comments form{
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
}
#comments textarea{
     margin: 0px 0px 5px 0px;
     padding: 0px 0px 0px 0px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top: 1px solid bkack;
     border-bottom: 1px solid bkack;
     border-right: 1px solid bkack;
     border-left: 1px solid bkack;
}
#comments input{
     border:1px solid black;
     background-color:white;
     color:black;
}
/*======コメントタイトル[この記事へのコメント]======*/
.comments-head{
     font-weight: bold;
     margin: 0px 0px 0px 0px;
     padding: 5px 0px 5px 15px;
     color: blue;
     font-size:100%;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:r;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======コメントのposted======*/
.comments-post{
     margin: 0px 0px 0px 0px;
     padding: 3px 0px 3px 0px;
     font-size: 75%;
     text-align: right;
     color: blue;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*++++++++++++++++++++++++++++++トラックバック*/
#trackback {
     font-size: 100%;
     color: black;
     margin: 0px 30px 10px 30px;
     padding: 14px 14px 14px 14px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top: 1px dotted black;
     border-bottom: 1px dotted black;
     border-right: 1px dotted black;
     border-left: 1px dotted black;
}
/*++++++++++++++++++++++++++++++サイドバーの指定*/

/*======サイドバーの中枠======*/
.side {
     line-height: 1.8;
     margin: 0px 0px 10px 0px;
     padding: 0px 10px 10px 10px;
     font-size:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======サイドバーのタイトル======*/
.sidetitle{
     font-size:;
     margin: 0px 0px 0px 0px;
     padding: 5px 10px 5px 10px;
     font-weight: bold;
     color: white;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:black;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======サイドバーのリンク指定======*/
.side a{
     color:;
}
/*======サイドバーの記事検索======*/
.side input {
     border: 1px solid black;
     background-color: white;
     color: black;
}
/*======サイドバーのタグクラウド======*/
.side-tag {
     padding:3px 10px 10px 10px;
     margin: 0px 0px 10px 0px;
}
.side-tag a{
     font-size:100%;
}
/*======syndicate======*/
.syndicate {
     margin: 0px 10px 0px 0px;
     padding: 0px 0px 0px 0px;
     text-align:center;
     font-size: 75%;
}
/*++++++++++++++++++++++++++++++フッター*/
#footer{
     clear:both;
     width:100%;
     height: 50px;
     background-color:;
     background-image:url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
.copyright{
     font-size:80%;
     width:100%;
     text-align:center;
}
.powered {
     padding:3px 5px 0px 0px;
     text-align:right;
     margin-left:10px;
}
/*++++++++++++++++++++++++++++++カレンダーを囲むボックス*/
#calendar {
     margin: 0px 0px 10px 0px;
     padding: 0px 0px 0px 0px;
     baclground-color:;
     width: 98%;
     border-top: 1px solid black;
     border-bottom: 1px solid black;
     border-right: 1px solid black;
     border-left: 1px solid black;
     /*左右の太さ分をwidthから引く*/
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
}
/*======テーブル======*/
#calendar table {
     width:100%;
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======曜日======*/
#calendar th{
     text-align:center;
     font-size:12px;
     color:black;
     padding:2px;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======日======*/
#calendar td{
     text-align:center;
     font-size:12px;
     color:black;
     padding:2px;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======年/月======*/
.calendarhead {
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:black;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
     color:white;
     font-size:12px;
     font-weight:bolder;
     padding:5px 0px 5px 0px;
     text-align:center;
}
/*======年/月のリンク指定======*/
.calendarhead a{
     color: white;
     text-decoration:none;
}
.calendarhead a:hover{
     color: red;
     text-decoration:underline;
}
/*======日のリンク指定======*/
.calendarday {
     font-size:12px;
}
.calendarday a{
     color: blue;
     text-decoration:none;
}
.calendarday a:hover{
     color: red;
     text-decoration:underline;
}
#diet-container{
     border:1px solid #999;
     padding:5px;
     margin-bottom:5px;
}
.diet-title{
     padding:2px 10px 2px 5px;
     font-size:12px;
     width:90px;
     margin-top:5px;
     font-weight:bold;
}
.diet-content{
     padding-left:10px;
     font-size:12px;
}
#diet-foods{
     padding-left:10px;
     font-size:12px;
}
.food-title{
     width:20%;
     clear:left;
     float:left;
}
.food-content{
     width:75%;
     padding-top:10px;
}
blockquote{
     border:1px solid #ccc;
     padding:5px;
     margin:10px;
}
.tag-word{
     margin:20px 0px 0px 0px;
     line-height:1.4em;
}
.tag{
     padding:10px;
     position:relative;
     font-size:12px;
     border:1px solid #E4E4E4;
     color: #9B9B9B;
}
#tag_cloud{
     border:1px solid #CCC;
     padding:10px;
     text-align:left;
     position:relative;
}
#tag_cloud a {
     padding:2px;
}
.tag-title{
     font-size:16px;
     font-weight:bold;
     text-align:left;
}
.tag-body{
     margin:10px 0px;
     padding:10px 0px 0px 0px;
     position:relative;
}
.tag-service{
     text-align:left;
     font-weight:bold;
     border-bottom:1px solid #CCC;
     padding:0px 0px 5px 0px;
     clear:left;
     position:relative;
}
.tag-search{
     text-align:right;
     padding:5px 0px;
     margin-bottom:10px;
     font-weight:bold;
     position:relative;
}
.tag-article{
     padding:0px 10px 10px 10px;
     text-align:left;
     position:relative;
}
.tag-article-title{
     text-align:left;
     padding:0px 0px 5px 0px;
     font-weight:bold;
     position:relative;
}
.tag-article-posted{
     font-weight:normal;
     position:relative;
}
.tag-article-summary{
     padding:0px 10px;
     line-height:1.4em;
     position:relative;
}
.tag-more{
     text-align:right;
     margin:10px 0px;
     clear:left;
     position:relative;
}
.tag-photos{
     float:left;
     margin:10px 7px;
     position:relative;
     width:140px;
     height:200px;
}
.tag-photos-title{
     line-height:1.4em;
     padding:5px 0px;
     text-align:left;
     position:relative;
}
.tag-audios{
     margin:5px;
     position:relative;
}
.tag-audios-title{
     text-align:left;
     font-weight:bold;
     padding:0px 0px 5px 0px;
     position:relative;
}
.tag-audios-posted{
     font-weight:normal;
     position:relative;
}
.tag-videos{
     float:left;
     margin:10px 7px;
     position:relative;
}
.tag-videos-title{
     line-height:1.4em;
     padding:5px 0px;
     text-align:left;
     position:relative;
}
.tag-navi{
     clear:left;
     text-align:center;
     margin:10px 0px;
     position:relative;
}

>>>>>サンプル表示（別窓）

⇒注意事項

タグ：スタイルシートカスタマイズブログ Seesaa CSS

3カラム（固定幅）CSSソース

ご利用の際は当ブログへリンクを張って頂けると喜びます。
リンクソースコピー

3カラム（固定幅）CSSソース

/*=========================================
==    スタイルシート(CSS)遊びのブログ　　==
==    簡単カスタマイズCSSソース          ==
==    3カラム固定幅                      ==
==    <a href="http://stylesheet.seesaa.net/" target="_blank">http://stylesheet.seesaa.net/</a>      ==
==========================================*/

/*++++++++++++++++++++++++++++++ページ全体*/

body {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 85%;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     text-align: center;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
}
/*++++++++++++++++++++++++++++++ページ全体のリンク色*/

a{
     color: blue;
     text-decoration: none;
}
a:hover{
     color: red;
     text-decoration: underline;
}
/*=========================================
==    全体の枠指定                       ==
==========================================*/

#container{
     width: 860px;
     margin: 0px auto 0px auto;
     padding: 0px 0px 0px 0px;
     text-align: left;
     color: black;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
/*左右の太さ分をwidthから引く*/
}
/*=========================================
==    記事部分のボックス                 ==
==========================================*/

#content {
     width: 500px;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     float: left;
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
/*左右の太さ分をwidthから引く*/
}
/*=========================================
==    右サイドのボックス                 ==
==========================================*/

#links {
     width: 180px;
     font-size: 90%;
     font-weight: normal;
     float: left;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
/*左右の太さ分をwidthから引く*/
}
/*=========================================
==    左サイドのボックス                 ==
==========================================*/

#links-left {
     width: 180px;
     font-size: 90%;
     font-weight: normal;
     float: left;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
/*左右の太さ分をwidthから引く*/
}
/*++++++++++++++++++++++++++++++ヘッダー*/

#banner{
     margin: 0px 0px 10px 0px;
     padding: 0px 0px 0px 0px;
     height:120px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*++++++++++++++++++++++++++++++ブログタイトル*/

h1 {
     margin: 0px 0px 0px 0px;
     padding: 50px 0px 10px 20px;
     font-weight: bolder;
     font-size: 200%;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======リンク色======*/

h1 a{
     color: black;
     text-decoration: none;
     font-weight: bolder;
}
/*======マウスオーバー======*/

h1 a:hover{
     color: silver;
     text-decoration: none;
}
/*++++++++++++++++++++++++++++++ブログ説明*/

.description {
     font-weight: bold;
     margin: 0px 0px 0px 20px;
     padding: 0px 10px 0px 0px;
     font-size:100%;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*++++++++++++++++++++++++++++++記事部分のの指定*/

/*++++++++++++++++++++++++++++++トップナビゲーション*/

.navi {
     font-size:75%;
     width:100%;
     text-align: center;
     margin: 10px 0px 10px 0px;
     padding: 0px 0px 0px 0px;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======記事部分大外枠======*/
.blog {
     margin: 0px 0px 0px 0px;
     padding: 0px 15px 20px 15px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======記事部分中枠======*/
.blogbody {
     margin: 0px 0px 15px 0px;
     padding: 15px 15px 0px 15px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======この中に文章が入ります======*/
.text{
     margin: 0px 0px 0px 0px;
     padding: 10px 0px 10px 0px;
     line-height:1.8;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*++++++++++++++++++++++++++++++記事日付*/

h2 {
     font-size: 100%;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     font-weight: bold;
     text-align: left;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
.date{
     color: black;
     margin: 0px 0px 0px 0px;
     padding: 10px 0px 0px 0px;
}
/*++++++++++++++++++++++++++++++記事タイトル*/

h3 {
     font-size:120%;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     font-weight: bolder;
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======記事タイトルのリンク色等======*/
h3 a{
     font-weight:bolder;
}
.title{
     font-weight:bolder;
     text-align:left;
}
.title a{
     color:blue;
     border:none;
     text-decoration: none;
     font-weight:bolder;
}
/*++++++++++++++++++++++++++++++記事下posted部分*/
.posted{
     text-align: right;
     margin: 0px 0px 5px 0px;
     padding: 15px 0px 10px 0px;
     font-size: 75%;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======postedのリンク色======*/
.posted a{
     font-weight: bold;
     color: blue;
}
/*++++++++++++++++++++++++++++++コメント*/
#comments {
     margin: 25px 0px 10px 0px;
     padding: 15px 15px 15px 15px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======コメント記事の外枠======*/
.comments-body {
     margin: 0px 0px 0px 0px;
     padding: 0px 15px 0px 15px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======コメント記入部分======*/
#comments form{
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
}
#comments textarea{
     margin: 0px 0px 5px 0px;
     padding: 0px 0px 0px 0px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top: 1px solid bkack;
     border-bottom: 1px solid bkack;
     border-right: 1px solid bkack;
     border-left: 1px solid bkack;
}
#comments input{
     border:1px solid black;
     background-color:white;
     color:black;
}
/*======コメントタイトル[この記事へのコメント]======*/
.comments-head{
     font-weight: bold;
     margin: 0px 0px 0px 0px;
     padding: 5px 0px 5px 15px;
     color: blue;
     font-size:100%;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:r;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======コメントのposted======*/
.comments-post{
     margin: 0px 0px 0px 0px;
     padding: 3px 0px 3px 0px;
     font-size: 75%;
     text-align: right;
     color: blue;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*++++++++++++++++++++++++++++++トラックバック*/
#trackback {
     font-size: 100%;
     color: black;
     margin: 0px 0px 10px 0px;
     padding: 14px 14px 14px 14px;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top: 1px dotted black;
     border-bottom: 1px dotted black;
     border-right: 1px dotted black;
     border-left: 1px dotted black;
}
/*++++++++++++++++++++++++++++++サイドバーの指定*/

/*======サイドバーの中枠======*/
.side {
     line-height: 1.8;
     margin: 0px 0px 10px 0px;
     padding: 0px 10px 10px 10px;
     font-size:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======サイドバーのタイトル======*/
.sidetitle{
     font-size:;
     margin: 0px 0px 0px 0px;
     padding: 5px 10px 5px 10px;
     font-weight: bold;
     color: white;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:black;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======サイドバーのリンク指定======*/
.side a{
     color:;
}
/*======サイドバーの記事検索======*/
.side input {
     border: 1px solid black;
     background-color: white;
     color: black;
}
/*======サイドバーのタグクラウド======*/
.side-tag {
     padding:3px 10px 10px 10px;
     margin: 0px 0px 10px 0px;
}
.side-tag a{
     font-size:100%;
}
/*======syndicate======*/
.syndicate {
     margin: 0px 10px 0px 0px;
     padding: 0px 0px 0px 0px;
     text-align:center;
     font-size: 75%;
}
/*++++++++++++++++++++++++++++++フッター*/
#footer{
     clear:both;
     width:100%;
     height: 50px;
     background-color:;
     background-image:url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
.copyright{
     font-size:80%;
     width:100%;
     text-align:center;
}
.powered {
     padding:3px 5px 0px 0px;
     text-align:right;
     margin-left:10px;
}
/*++++++++++++++++++++++++++++++カレンダーを囲むボックス*/
#calendar {
     margin: 0px 0px 10px 0px;
     padding: 0px 0px 0px 0px;
     baclground-color:;
     width: 178px;
     border-top: 1px solid black;
     border-bottom: 1px solid black;
     border-right: 1px solid black;
     border-left: 1px solid black;
     /*左右の太さ分をwidthから引く*/
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
}
/*======テーブル======*/
#calendar table {
     width:100%;
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======曜日======*/
#calendar th{
     text-align:center;
     font-size:12px;
     color:black;
     padding:2px;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======日======*/
#calendar td{
     text-align:center;
     font-size:12px;
     color:black;
     padding:2px;
     background-color:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
/*======年/月======*/
.calendarhead {
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     background-color:black;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
     color:white;
     font-size:12px;
     font-weight:bolder;
     padding:5px 0px 5px 0px;
     text-align:center;
}
/*======年/月のリンク指定======*/
.calendarhead a{
     color: white;
     text-decoration:none;
}
.calendarhead a:hover{
     color: red;
     text-decoration:underline;
}
/*======日のリンク指定======*/
.calendarday {
     font-size:12px;
}
.calendarday a{
     color: blue;
     text-decoration:none;
}
.calendarday a:hover{
     color: red;
     text-decoration:underline;
}
#diet-container{
     border:1px solid #999;
     padding:5px;
     margin-bottom:5px;
}
.diet-title{
     padding:2px 10px 2px 5px;
     font-size:12px;
     width:90px;
     margin-top:5px;
     font-weight:bold;
}
.diet-content{
     padding-left:10px;
     font-size:12px;
}
#diet-foods{
     padding-left:10px;
     font-size:12px;
}
.food-title{
     width:20%;
     clear:left;
     float:left;
}
.food-content{
     width:75%;
     padding-top:10px;
}
blockquote{
     border:1px solid #ccc;
     padding:5px;
     margin:10px;
}
.tag-word{
     margin:20px 0px 0px 0px;
     line-height:1.4em;
}
/*++++++++++++++++++++++++++++++ボックス*/
.tag{
     margin: 0px 0px 0px 0px;
     padding: 10px 10px 10px 10px;
     position:relative;
     font-size:100%;
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
#tag_cloud{
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top: 1px solid black;
     border-bottom: 1px solid black;
     border-right: 1px solid black;
     border-left: 1px solid black;
     margin: 0px 0px 0px 0px;
     padding: 10px 10px 10px 10px;
     text-align:left;
     position:relative;
}
#tag_cloud a {
     margin: 0px 0px 0px 0px;
     padding: 2px 2px 2px 2px;
     color: blue;
}
.tag-title{
     font-size:120%;
     font-weight:bold;
     text-align:left;
}
.tag-body{
     margin:10px 0px 10px 0px;
     padding:10px 0px 0px 0px;
     position:relative;
     background-color:;
     background-image: url(アップロードした画像のURL);
     background-repeat:;
     background-position:;
     border-top:;
     border-bottom:;
     border-right:;
     border-left:;
}
.tag-service{
     text-align:left;
     font-weight:bold;
     border-top:;
     border-bottom: 1px solid blue;
     border-right:;
     border-left:;
     margin:0px 0px 0px 0px;
     padding:0px 0px 5px 0px;
     clear:left;
     position:relative;
}
.tag-search{
     text-align:right;
     padding:5px 0px;
     margin-bottom:10px;
     font-weight:bold;
     position:relative;
}
.tag-article{
     padding:0px 10px 10px 10px;
     text-align:left;
     position:relative;
}
.tag-article-title{
     text-align:left;
     padding:0px 0px 5px 0px;
     font-weight:bold;
     position:relative;
}
.tag-article-posted{
     font-weight:normal;
     position:relative;
}
.tag-article-summary{
     padding:0px 10px;
     line-height:1.4em;
     position:relative;
}
.tag-more{
     text-align:right;
     margin:10px 0px;
     clear:left;
     position:relative;
}
.tag-photos{
     float:left;
     margin:10px 7px;
     position:relative;
     width:140px;
     height:200px;
}
.tag-photos-title{
     line-height:1.4em;
     padding:5px 0px;
     text-align:left;
     position:relative;
}
.tag-audios{
     margin:5px;
     position:relative;
}
.tag-audios-title{
     text-align:left;
     font-weight:bold;
     padding:0px 0px 5px 0px;
     position:relative;
}
.tag-audios-posted{
     font-weight:normal;
     position:relative;
}
.tag-videos{
     float:left;
     margin:10px 7px;
     position:relative;
}
.tag-videos-title{
     line-height:1.4em;
     padding:5px 0px;
     text-align:left;
     position:relative;
}
.tag-navi{
     clear:left;
     text-align:center;
     margin:10px 0px;
     position:relative;
}

>>>>>サンプル表示（別窓）

タグ：スタイルシートカスタマイズ Seesaa CSS