はてなダイアリー公開デザイン「dejavu」（http://d.hatena.ne.jp/designset/393）を3カラム（左に220px）にしたいのですが，CSS等をどう変更すれば良いのでしょうか？

左側に220px追加するので、閲覧時にブラウザを最大化する必要がありますが、それで大丈夫でしょうか？

※最大化にして閲覧しないと、右側に表示されている項目を読みたい時に、横スクロールしなければなりません。

1.デザイン編集の詳細タブのページのヘッダに「sidebar2」というクラス名のボックスを追加します。

※表示するモジュールは、ページのフッタの「sidebar」というクラス名のボックスから適当に切り取って貼り付けます。

※以下の場合、プロフィールとカレンダーのモジュールを左側に表示します。

※「<div class="main">」は最初から入力されています。

<div class="sidebar2">

<hatena name="profile" template="hatena-module" moduletitle="Profile">

<hatena name="calendar2" template="hatena-module" moduletitle="Calendar">

</div>

<div class="main">

2.スタイルシートの欄に以下の記述をそのままコピーして、現在の記述と入れ替えます。

※変更点は、クラス名「sidebar2」への適用項目の追加と、ヘッダー、タイトルボックス、3カラムを囲むメインのボックスのサイズ変更です。

(左に追加する220px分大きくして920pxにしました。)

※「background: (省略);」で背景画像を指定している所が数箇所ありますが、はてなの投稿ではurlが「...」で途中で省略されてしまいます。

「background: (省略);」の行だけは上書きしないように注意してください。

ちょっと面倒ですが、「background: (省略);」の行を省いて、数回に分けてコピー＆ペーストしてみてください。

html {

margin: 0;

padding: 0;

}

body{

color: #333333;

background: #e5e5e5 url("http://f.hatena.ne.jp/images/fotolife/c/chepooka/20060105/200601...") left top;

font-size: 80%;

font-family: "Lucida Grande", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Verdana, "ＭＳ Ｐゴシック", sans-serif;

line-height: 1.6;

margin: 0;

text-align: center;

padding: 0;

word-break: break-all;

word-wrap: break-word;

}

/*::header:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

table#banner{

padding: 0;

font-size: 100%;

margin: 0 auto;

width: 920px;

text-align: left;

background: #ffffff;

}

table#banner td{

background-color:transparent;

padding: 0 10px;

}

table#banner table{

background-color: transparent;

background-image: none;

border: none;

width: 100%;

line-height: 1;

font-size: 100%;

}

table#banner table td{

background-color:transparent;

padding: 0;

margin: 0;

}

table#banner div{

font-size: 85%;

}

table#banner font,

table#banner a{

border: none;

color: #a0a0a0;

font-size: 100%;

}

table#banner font font{

font-size: 100%;

}

table#banner input{

background-color: #f9f9f9;

color: #333333;

border: none;

}

/*::simple-header:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#simple-header {

position: relative;

text-align: right;

padding: 5px 0;

background: #ffffff;

width: 920px;

margin: 0 auto;

zoom: 1;

}

#simple-header img, #simple-header input {

vertical-align: middle;

}

#simple-header img {

margin-top: 2px;

}

#simple-header img#logo-hatena {

}

#simple-header img#logo-diary,

#simple-header img#log-group-name{

margin-right: 15px;

}

#simple-header form.search-form {

display: inline;

position: absolute;

top: 8px;

right: 140px;

}

#simple-header input,

#simple-header select{

margin: 0;

font-size: 10px;

height: 14px;

padding: 0;

vertical-align: middle;

}

#simple-header input.search-word {

width: 10em;

font-size: 12px;

background: #ffffff;

color: #000000;

border: solid 1px #ddd;

margin: 0 3px 0 0;

}

#simple-header input.search-button,

#simple-header input.search-button-keyword {

background: #f0f0f0;

border: none;

width: 38px;

height: 16px;

padding: 0;

margin: 0 3px 0 0;

color: #666666;

font-family: sans-serif;

}

#simple-header input.search-button-keyword{

width: 64px;

}

#simple-header ul {

list-style: none;

margin: 0;

padding: 0;

position: absolute;

top: 5px;

right: auto;

left: 15px;

}

#simple-header ul li {

display: inline;

margin: 0 3px 0 0;

font-size: 80%;

font-family: sans-serif;

padding: 0;

}

#simple-header ul li a {

color: #bbb;

text-decoration: none;

}

#simple-header ul li a:hover {

text-decoration: none;

}

/*::title:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

h1{

padding: 57px 30px 0 30px;

width: 860px;

_width: 920px;

*width: 920px;

height: 83px;

_height: 140px;

*height: 140px;

font-size: 150%;

text-align: left;

color: #ffffff;

font-family: Myriad,Helvetica,Arial,sans-serif;

clear: both;

margin: 0 auto;

font-weight: bold;

background: #ffffff url("http://f.hatena.ne.jp/images/fotolife/c/chepooka/20061217/200612...") no-repeat left center;

}

h1 a{

text-decoration: none;

border: none;

color: #ffffff;

}

/*::main:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.hatena-body{

width: 920px;

margin: 0 auto;

padding: 0;

text-align: left;

position: relative;

background: #ffffff url("http://f.hatena.ne.jp/images/fotolife/c/chepooka/20061219/200612...") repeat-x left bottom;

}

.hatena-body:after{

content:"";

display:block;

clear:both;

border-bottom:1px transparent solid;

}

.main{

margin: 0;

padding: 0;

float: left;

width: 480px;

}

.day{

margin: 0 15px 3em 15px;

_margin: 0 15px 2em 15px;

position: relative;

top: 0;

left: 0;

_width: 100%;

}

h2,

h2 a{

text-decoration: none;

border: none;

color: #d0d0d0;

}

h2 {

font-size: 100%;

font-weight: bold;

margin: 0 0 1em 0;

padding: 0;

border-bottom: solid 3px #eeeeee;

text-align: left;

line-height: 1;

}

span.date{

margin: 0;

text-align: left;

color: #d0d0d0;

font-size: 120%;

font-family: Myriad,Helvetica,Arial,sans-serif;

}

span.title{

margin: 0 5px;

text-align: left;

}

a.edit{

font-weight: normal;

color: #ddd;

margin: 0 0 0 10px;

}

.body {

width: 100%;

padding: 0;

margin: 0;

text-align: left;

}

.section{

margin: 0 0 2em 0;

padding: 0;

}

.section p {

margin: 1em 0;

padding: 0;

}

h3 {

font-size: 120%;

font-family: arial,sans-serif;

font-weight: bold;

margin: 0 0 0.7em 0;

padding: 0;

text-align: left;

}

.section h3 a{}

h3 a:first-child,

span.sanchor {

text-decoration: none;

}

a.sectioncategory{

color: #333333;

text-decoration: none;

}

span.sanchor{

color: #FF46C2;

font-family: sans-serif;

margin: 0 3px 0 0;

}

span.timestamp{

font-size: 70%;

font-weight: normal;

letter-spacing: 0;

}

.section h3.title{

margin: 0;

line-height: 1.2;

padding: 2px 0 0 5px;

border-left: solid 4px #FF46C2;

}

.section p.sectionheader{

text-align: left;

font-size: 80%;

line-height: 1.2;

padding: 0 0 2px 5px;

border-left: solid 4px #FF46C2;

margin: 0 0 12px 0;

}

.section p.sectionheader img{

vertical-align: middle;

}

.section p.sectionheader span.timestamp{

font-size: 100%;

}

.section p.sectionfooter{

font-size: 80%;

text-align: right;

clear: both;

color: #a0a0a0;

margin: 1.5em 0 1em 0;

padding: 0 ;

}

p.sectionfooter a{

text-decoration: none;

color: #a0a0a0;

border-bottom: solid 1px #eeeeee;

}

.ad{

margin: 2em 0 3em 0;

text-align: left;

width: 100%;

overflow: hidden;

}

/*::calendar/breadcrumbs:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

div.calendar a{

text-decoration: none;

color: #a0a0a0;

border-bottom: solid 1px #eeeeee;

}

div.calendar{

text-align: right;

color: #a0a0a0;

margin: 0 10px;

font-size: 80%;

}

#hatena-archive div.calendar{

text-align: left;

color: #333333;

margin: 0 15px 0.5em 15px;

font-size: 100%;

}

#hatena-archive div.calendar a{

color: #333333;

}

div.breadcrumbs{

font-size: 80%;

color: #a0a0a0;

margin: 0;

padding: 0;

text-align: left;

}

div.breadcrumbs a{

color: #a0a0a0;

}

/*::format:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

a{

text-decoration: underline;

color: #333333;

}

a.keyword,

a.okeyword{

text-decoration: none;

border: none;

}

a:hover,

a:hover font,

a:hover span{

color: #FF46C2;

border-color: #FF46C2;

}

h4 {

font-size: 100%;

font-weight: bold;

margin: 1.5em 0 1em 0;

padding: 0 0 0 0.5em;

text-align: left;

word-break: break-all;

border-left: solid 3px #FF46C2;

}

h4 a{

}

h5{

font-size: 100%;

font-weight: bold;

margin: 1em 0;

padding: 0 0 0 0.5em;;

text-align:left;

word-break:break-all;

border-left: solid 3px #d0d0d0;

}

p.seemore{

text-align: left;

font-weight: bold;

}

p.seemore a{

border-color: #f0f0f0;

color: #666666;

}

p.message{

color: #ff0000;

}

blockquote{

margin: 1em 0;

padding: 1px 0;

border: solid 2px #f0f0f0;

}

.section blockquote p{

margin: 1em;

padding: 0;

}

cite a{

border: none;

text-decoration: none;

}

cite{

font-weight: bold;

font-style: normal;

display: block;

width: 98%;

_width: 100%;

padding: 3px 1%;

}

pre {

margin: 1em 0;

padding: 1em;

font-family: 'MS Gothic', monospace;

background: #f0f0f0 url("http://f.hatena.ne.jp/images/fotolife/c/chepooka/20061219/200612...");

color: #333333;

white-space: -moz-pre-wrap;

white-space: -pre-wrap;

white-space: -o-pre-wrap;

white-space: pre-wrap;

word-wrap: break-word;

}

.section blockquote a,

.section pre a{

color: #333333;

}

strong{

font-weight: bold;

}

em

{

font-weight: normal;

font-style: normal;

color: #FF46C2;

}

em a{ color: #FF46C2; }

ins{

text-decoration: none;

color: #999999;

}

ins a{ color: #999999; }

/*::list:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.section ul{

margin: 1em;

padding: 0;

}

.section ol{

margin: 1em 1em 1em 1.5em;

padding: 0;

}

.section ul li,

.section ol li,

.section ol ul,

.section ol ol,

.section ul ul,

.section li li {

margin: 0 0 0 1em;

padding: 0;

}

.section dl{

margin: 1em 1em;

}

.section dl{

margin: 10px 10px;

}

.section dt{

font-weight: normal;

}

/*::image:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

a img{

border: none;

}

img.photo{

float: right;

margin: 10px;

}

img.asin{

}

img.hatena-fotolife {

}

/*::table:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.day td{

padding: 5px;

margin: 0;

border: solid 2px #dddddd;

}

.day th{

padding: 5px;

margin: 0;

border: solid 2px #e0e0e0;

font-weight: bold;

}

.day table{

margin: 1em 0;

font-size: 100%;

border: none;

border-collapse: collapse;

text-align: left;

border: solid 3px #e0e0e0;

}

/*::question:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.day table.hatena-question-detail{

margin: 1em 0;

padding: 5px;

font-size: 100%;

border: 3px solid #e0e0e0;

table-layout: auto;

}

th.hatena-question-detail-title{

border: none;

padding: 5px;

margin: 0;

font-weight: bold;

width: auto;

}

th.hatena-question-detail-title a{

border:none;

text-decoration:none;

}

td.hatena-question-detail-label{

width: 30%;

}

td.hatena-question-detail-value{

width: auto;

}

img.hatena-question-image{

}

/*::asin:detail:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.hatena-asin-detail {

margin: 1em 0;

padding: 10px;

background: #f0f0f0 url("http://f.hatena.ne.jp/images/fotolife/c/chepooka/20061219/200612...");

_width: 100%;

}

img.hatena-asin-detail-image {

float: left;

border: 0;

margin: 0 10px 0 0 ;

max-width: 140px;

}

.hatena-asin-detail-info{

float: left;

margin: 0;

word-break: break-all;

width: 280px;

_width: auto;

*width: auto;

}

.section .hatena-asin-detail p{

font-weight: bold;

margin: 0;

}

.section .hatena-asin-detail p a{

border: 0;

text-decoration: none;

}

.section .hatena-asin-detail-info ul {

list-style-type: none;

margin: 5px 0 0 0;

padding: 0;

}

.section .hatena-asin-detail-info li {

margin: 0;

padding: 0;

}

.hatena-asin-detail-foot {

clear: left;

}

/*::footnote:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

span.footnote{

font-size: 70%;

}

span.footnote a{

border: 0;

}

.footnote{

padding: 3px;

text-align: left;

margin: 0 0 10px 0;

}

p.footnote{

margin: 0;

font-size: 80%;

}

/*::comment:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.comment,

.refererlist{

text-align: left;

padding: 0;

margin: 0 0 15px 0;

_width: 100%;

}

.caption{

padding: 0;

margin: 0;

}

.caption a{

text-decoration: none;

border-bottom: solid 1px #eeeeee;

}

.refererlist ul{

margin: 0 7px;

padding: 0;

list-style-type: none;

text-align: left;

font-size: 80%;

letter-spacing: 0;

}

.commentshort{

border-top: 1px solid #e0e0e0;

margin: 0;

padding: 0;

zoom: 1;

}

.commentshort a{

text-decoration: none;

}

.commentshort p{

margin: 1em 0;

padding: 0;

font-size: 100%;

zoom: 1;

position: relative;

}

span.canchor{}

span.canchor a{}

span.commentator{

font-weight: bold;

}

span.commentator,

span.commentator a {

text-decoration: none;

}

.commentshort p img.hatena-id-icon {

margin-left: 0;

}

.commentshort span.timestamp {

font-size: 90%;

position: absolute;

right: 0;

top: 0;

}

.commentshort span.timestamp a {

color: #aaa;

margin: 0;

text-decoration: none;

font-weight: normal;

}

.commentshort span.commentbody {

display: block;

padding: 0.3em 0 0 20px;

}

/*::form:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

form{

margin: 0;

padding: 0;

}

form.hatena-searchform{

margin: 0;

}

#hatena-edit h2{

margin: 0 0 5px 0;

}

#hatena-edit textarea#textarea-edit{

width: 90%;

height: 30em;

margin: 0;

font-size: 100%;

}

#hatena-edit p.footnote,

#hatena-edit .refererlist ul{

font-size: 100%;

}

.comment textarea{

width: 400px;

}

.sidebar textarea,

.sidebar input{

font-size: 100%;

font-family: Verdana, Osaka, sans-serif;

line-height: 1.5;

}

/*::sidebar2::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.sidebar2{

margin: 0;

padding: 0;

float: left;

width: 220px;

text-align: left;

font-size: 85%;

color: #333333;

}

.hatena-body*.sidebar2{

font-size: 80%;

}

/*::sidebar:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.sidebar {

float: right;

clear: right;

width: 220px;

color: #333333;

margin: 0;

text-align: left;

font-size: 85%;

}

.hatena-body*.sidebar{

font-size: 80%;

}

.hatena-module{

margin: 0 15px 15px 0;

padding: 7px;

text-align: left;

_width: 100%;

background: #fff url("http://f.hatena.ne.jp/images/fotolife/c/chepooka/20061216/200612...");

}

.hatena-moduletitle,

.hatena-moduletitle a{

border: none;

text-decoration: none;

color: #FF46C2;

}

.hatena-moduletitle{

font-size: 140%;

line-height: 1;

padding: 7px 7px 5px 7px;

margin: 0;

font-weight: bold;

font-family: Myriad,Helvetica,Arial,sans-serif;

background: #fff;

border-top: solid 3px #eeeeee;

border-left: solid 3px #eeeeee;

border-right: solid 3px #eeeeee;

}

.hatena-modulebody{

padding: 0 7px 7px 7px;

margin: 0;

_width:100%;

background: #fff;

border-bottom: solid 3px #eeeeee;

border-left: solid 3px #eeeeee;

border-right: solid 3px #eeeeee;

}

.hatena-modulebody a{

border: none;

text-decoration: none;

}

/*::sidebar:list:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.hatena-modulebody ul{

padding: 0 0 0 1.6em;

margin: 0;

list-style: circle;

}

.hatena-modulebody li {

}

.hatena-modulebody li a{

color: #333333;

padding: 0;

}

.hatena-modulebody li a:hover {

color: #FF46C2;

}

/*::profile:module:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.hatena-profile{

}

p.hatena-profile-image{

margin: 0;

}

p.hatena-profile-id{

margin: 0;

font-weight: bold;

}

p.hatena-profile-id a{}

p.hatena-profile-body{

margin: 0;

}

ul.hatena-profile-list {

margin: 0 !important;

padding: 0;

}

ul.hatena-profile-list li {

display: inline;

margin: 0;

padding: 0;

}

/*::rss:module:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

dl.hatena-rss{

margin: 0;

}

dl.hatena-rss dt{}

dl.hatena-rss dd{

margin: 0 0 0 0.5em;

padding: 0;

color: #999999;

}

/*::photo:module:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

ul.hatena-photo{

padding: 0;

margin: 0;

width: auto;

list-style-type: none;

text-align: left;

}

ul.hatena-photo:after{

content:"";

display:block;

clear:both;

border-bottom:1px transparent solid;

}

ul.hatena-photo li{

margin: 0;

padding: 0;

display: block;

width: 49.9999%;

float: left;

text-align: center;

vertical-align: middle;

height: 80px;

}

ul.hatena-photo li img{

}

ul.hatena-photo li a{

}

ul.hatena-photo li a img{

border:solid 1px #f0f0f0;

}

ul.hatena-photo li a:hover img{

border:solid 1px #FF46C2;

}

.thumbnail img{

width: 80px;

}

/*::calendar2:module:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

table.calendar{

font-size: 100%;

letter-spacing: 0;

width: 100%;

margin: 0 auto;

padding: 0;

border: none;

background-image : none;

background-repeat: no-repeat;

border-collapse: collapse;

}

table.calendar td{

padding: 5px 3px;

text-align: center;

}

td.calendar-current-month{

font-weight: normal;

}

td.calendar-prev-month,

td.calendar-current-month,

td.calendar-next-month{

text-align:center;

}

td.calendar-day {

}

td.calendar-day a{

text-decoration: underline;

}

td.day-today{

background-color: #e0e0e0;

}

td.day-selected{

background-color: #FF46C2;

color: #333333;

}

td.day-selected a{

}

td.calendar-weekday,

td.calendar-sunday,

td.calendar-saturday{

display:none;

}

td.calendar-day img {

height: 16px;

width: 16px;

border: 0;

}

/*::keywordcloud:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

ul.keywordcloud {

margin: 10px;

padding: 0;

line-height: 1.5em;

}

ul.keywordcloud li {

display: inline;

}

ul.keywordcloud li a{

text-decoration: none;

}

a.keywordcloud0 { font-size: 80%; }

a.keywordcloud1 { font-size: 100%; }

a.keywordcloud2 { font-size: 120%; }

a.keywordcloud3 { font-size: 140%; }

a.keywordcloud4 { font-size: 160%; }

a.keywordcloud5 { font-size: 180%; }

a.keywordcloud6 { font-size: 200%; }

a.keywordcloud7 { font-size: 220%; }

a.keywordcloud8 { font-size: 240%; }

a.keywordcloud9 { font-size: 260%; }

a.keywordcloud10 { font-size: 280%; }

/*::adminmenu:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

div.adminmenu{

text-align: right;

width: 670px;

_width: 920px;

*width: 920px;

padding: 0 15px;

margin: 0 auto;

background-color: #ffffff;

font-size: 80%;

}

.main div.adminmenu{

width: 100% ;

background-color:transparent;

font-size: 100%;

}

.sidebar div.adminmenu{

width: 100%;

font-size: 100%;

text-align: left;

background-color: transparent;

padding: 0;

margin: 0;

}

span.adminmenu{

margin: 0 3px;

}

span.adminmenu a{

text-decoration: none;

}

.sidebar span.adminmenu{

display: block;

width: 49.99%;

float: left;

margin: 0;

}

.sidebar div.adminmenu:after{

content:"";

display:block;

clear:both;

border-bottom:1px transparent solid;

}

.main span.adminmenu a,

.sidebar span.adminmenu a{

text-decoration: none;

background: transparent;

padding: 0;

}

/*::other:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

span.highlight {

background-color: yellow;

}

.footer{

text-align: center;

clear: both;

_width:100%;

}

.footer,

.footer a{

color: #dddddd;

border: none;

}

.message {

font-size:80%;

position: fixed;

margin: 0 !important;

bottom: 30px;

right: 30px;

*bottom: auto;

_bottom: auto;

*top: -90px;

_top: -90px;

*right: 10px;

_right: 10px;

width: 350px;

z-index:1000;

_border: none !important;

*border: none !important;

_background: transparent !important;

*background: transparent !important;

}

html {

*overflow: hidden;

_overflow: hidden;

}

body {

*height: 100%;

*overflow: auto;

_height: 100%;

_overflow: auto;

}

.message {

*position: absolute;

_position: absolute;

}

3.このままでもとりあえず大丈夫だと思いますが、タイトルの背景画像が小さいのが気になる場合は、背景画像をダウンロードして、適切な大きさに変更してください。

http://f.hatena.ne.jp/images/fotolife/c/chepooka/20061219/200612...

※修正後、自分のHPスペース等にアップロードして、読み込むようにすると良いです。

この場合、スタイルシートの次の箇所のアドレスを自分のHPスペース等にアップした画像のアドレスに変更してください。

.hatena-body{

(省略)

background: #ffffff url("http://f.hatena.ne.jp/images/fotolife/c/chepooka/20061219/200612...") repeat-x left bottom;

}