スタイルシート　（グレイ） Movable Type

スタイルシート　（グレイ）

ベーシック３列　２列（左右）に対応するスタイルシートです。

3列見本サイト
仕様とダウンロード

左サイドバー見本サイト
仕様とダウンロード

右サイドバー見本サイト
仕様とダウンロード

基本仕様

　・3列、2列（サイドバー左でも右でも）にするのも、このスタイルシート一枚で対応してます。

詳細仕様

　・横幅は７７０px
　・2列の場合はサイド１８０ｐｘ　メイン５８９ｐｘ　線１ｐｘ
　・3列の場合はサイド１６０ｐｘ　メイン４４８ｐｘ　線２ｐｘ
　・サイドタイトル
　・サイド文字
　・メインタイトル
　・メイン文字

バージョンアップ情報

　・検索の余白を０にする
　・各項目にコメントを追加
　・投稿情報を右寄せ
　・フッターの署名情報追加

背景画像

画像上で右クリックして「名前をつけて保存」　で自分のパソコンのマイドキュメントに保存
→　サーバー上、ブログのスタイルシートがある場所【　例　】blogフォルダ直下にアップロードしてください。

スタイルシート（グレイ版）

/* この部分は消さないでください。
created by smash 2005/08/08
Copyright (C) 2005-2006 Movable Type Nyumon. All rights reserved.
siteurl:http://30smash.main.jp/mt/
*/

/* 背景と配置 */
body {
 margin: 0px 0px 20px 0px;
/* background-color: #8FABBE;*/
 background-image: url("graybg.gif");
 text-align: center;
}

/* リンク設定 */
a:link {color:#0066CC; text-decoration:none}
a:visited {color:#0066CC; text-decoration:none}
a:active { color: #0066CC;}
a:hover { color: #006699;}

/* 強調文字設定 */
h1, h2, h3 {
 margin: 0px;
 padding: 0px;
 font-weight: normal;
}

.font_10{font-size:10px;}
.font_16{font-size:16px;}

/* 全体の枠組み 横幅 */
#container {
 line-height: 140%;
 margin-right: auto;
 margin-left: auto;
 text-align: left;
 padding: 0px;
 width: 770px;
 background-color: #FFFFFF;
 border: 1px solid #666666;
}

/* バナー設定 */
#banner {
 font-family: Verdana, Arial, sans-serif;
 color: #FFFFFF;
 background-color: #999999;
/* background-image: url(".gif");*/
 text-align: left;
 padding: 15px;
}

#banner-img {
 display: none;
}

#banner a {
 color: #FFFFFF;
 text-decoration: none;
}

#banner h1 {
 font-size: xx-large;
}

#banner h2 {
 font-size: small;
}

/* ３列左サイドバー */
#left {
 float: left;
 width: 160px;
 background-color: #FFFFFF;
 overflow: hidden;
}

/* ３列右サイドバー */
#right {
 float: left;
 width: 160px;
 background-color: #FFFFFF;
 overflow: hidden;
}

/* ３列メイン */
#center {
 float: left;
 width: 448px;
 overflow: hidden;
 border-left: 1px solid #666666;
 border-right: 1px solid #666666;
 border-bottom: 1px solid #666666;
}

/* 旧サイドバー */
#side {
 float: left;
 width: 180px;
 background-color: #FFFFFF;
 overflow: hidden;
 }

/* 2列左サイドバー */
#left-side {
 float: left;
 width: 180px;
 background-color: #FFFFFF;
 overflow: hidden;
 border-bottom: 1px solid #666666;
 border-right: 1px solid #666666;
}

/* 2列メイン */
#main{
 float: left;
 width: 589px;
 overflow: hidden;
}

/* 2列右サイドバー */
#right-side {
 float: left;
 width: 180px;
 background-color: #FFFFFF;
 overflow: hidden;
 border-bottom: 1px solid #666666;
 border-left: 1px solid #666666;
}

/* メイン本文 */
.content {
 padding: 15px 15px 5px 15px;
 background-color: #FFFFFF;
 color: #000000;
 font-family: Verdana, Arial, sans-serif;
 font-size: small;
}
.content pre {
 font-size: larger;
}

.dataheader {
text-align:right;
width=100%;
}

.entryheader {
text-align:left;
width=100%;
padding:2px;
border:1px solid #666666;
background-color: #F5F5F5;
}

.content p {
 color: #000000;
 font-family: Verdana, Arial, sans-serif;
 font-size: small;
 font-weight: normal;
 line-height: 150%;
 text-align: left;
 margin-bottom: 10px;
}

.content blockquote {
 line-height: 150%;
}

.content li {
 line-height: 150%;
}

.content h2 {
 color: #666666;
 font-family: Verdana, Arial, sans-serif;
 font-size: x-small;
 text-align: left;
 font-weight: bold;
 margin-bottom: 10px;
}

.content h3 {
 color: #666666;
 font-family: Verdana, Arial, sans-serif;
 font-size: small;
 text-align: left;
 font-weight: bold;
 margin-bottom: 10px;
}

.posted {
 color: #999999;
 font-family: Verdana, Arial, sans-serif;
 font-size: x-small;
 border-top: 1px solid #999999;
 text-align: right;
 margin-bottom: 25px;
 line-height: normal;
 padding: 3px;
}

/* サイドバー設定 */
.sidebar {
 padding: 10px;
 font-size: x-small;
}

.sidebar h2 {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size:10px;
text-align: left;
font-weight: bold;	
padding:2px 0px 2px 3px;
line-height: 15px;
background-color: #F5F5F5;
border-left: 5px solid #666666;
border-bottom: 1px solid #666666;
border-top: 1px solid #666666;
border-right: 1px solid #666666;
}

#calendar {
 line-height: 140%;
 color: #666666;
 font-family: Verdana, Arial, sans-serif;
 font-size: x-small;
 padding: 2px;
 text-align: center;
 margin-bottom: 30px;
}

#calendar table {
 padding: 2px;
 border-collapse: collapse;
 border: 0px;
 width: 100%;
}

#calendar caption {
 color: #666666;
 font-family: Verdana, Arial, sans-serif;
 font-size: x-small;
 text-align: center;
 font-weight: bold;
 text-transform: uppercase;
 letter-spacing: .3em;
}

#calendar th {
 text-align: center;
 font-weight: normal;
}

#calendar td {
 text-align: center;
}

.sidebar ul {
 padding-left: 5px;
 margin: 0px;
 margin-bottom: 20px;
}

.sidebar ul ul {
 margin-bottom: 0px;
}

.sidebar #categories ul {
 padding-left: 15px;
}

.sidebar li {
 color: #666666;
 font-family: Verdana, Arial, sans-serif;
 font-size: x-small;
 text-align: left;
 line-height: 100%;
 margin-top: 10px;
 list-style-type: none;
}

.side {
 color: #666666;
 font-family: Verdana, Arial, sans-serif;
 font-size: x-small;
 text-align: left;
 line-height: 150%;
 padding-left: 5px;
 margin-top: 10px;
 margin-bottom: 20px;
 list-style-type: none;
}

.sidebar #categories li {
 list-style-type: circle;
}

.sidebar img {
 border: 3px solid #FFFFFF;
}

form {
 margin:0px;
}

.photo {
 text-align: left;
 margin-bottom: 20px;
}

.link-note {
 font-family: Verdana, Arial, sans-serif;
 font-size: x-small;
 line-height: 150%;
 text-align: left;
 padding: 2px;
 margin-bottom: 15px;
}

#powered {
 font-family: Verdana, Arial, sans-serif;
 font-size: x-small;
 line-height: 150%;
 text-align: left;
 color: #666666;
 margin-top: 50px;
}

#comment-data {
 float: left;
 width: 180px;
 padding-right: 15px;
 margin-right: 15px;
 text-align: left;
 border-right: 1px dotted #BBB;
}

textarea[id="comment-text"] {
 width: 80%;
}

.commenter-profile img {
 vertical-align: middle;
 border-width: 0;
}

#footer {
 font-family: Verdana, Arial, sans-serif;
 font-size:12px;
 color: #666666;
 font-weight: bold;
 background-color: #f6f6f6;
 text-align: center;
 padding-left: 15px;
}

/* content */

.content-nav
{
   margin: 10px;
   text-align: center;
}

.date-header,
.entry-content
{
   position: static;
   clear: both;
}

.entry,
.trackbacks,
.comments,
.archive
{
   position: static;
   overflow: hidden;
   clear: both;
   width: 100%;
   margin-bottom: 20px;
}

.entry-content,
.trackbacks-info,
.trackback-content,
.comment-content,
.comments-open-content,
.comments-closed
{
   clear: both;
   margin: 5px 10px;
}

.entry-excerpt,
.entry-body,
.entry-more-link,
.entry-more
{
   clear: both;
}

.entry-footer,
.trackback-footer,
.comment-footer,
.comments-open-footer,
.archive-content
{
   clear: both;
   margin: 5px 10px 20px 10px;
}

.comments-open label { display: block; }

#comment-author, #comment-email, #comment-url, #comment-text
{
   width: 240px;
}

#comment-bake-cookie
{
   margin-left: 0;
   vertical-align: middle;
}

#comment-post
{
   font-weight: bold;
}

img.image-full { width: 100%; }

.image-thumbnail
{
   float: left;
   width: 115px;
   margin: 0 10px 10px 0;
}

.image-thumbnail img
{
   width: 115px;
   height: 115px;
   margin: 0 0 2px 0;
}

スタイルシート （グレイ） Movable Type

スタイルシート （グレイ）

スタイルシート　（グレイ） Movable Type

スタイルシート　（グレイ）