livedoor blogは、新環境移行に伴い3カラムのデザインをサポートしたが、これは本文固定幅のデザインであり、これを本文可変幅としたい。
よって、まずデフォルトの3カラムデザインのものを参考とし、そのCSSについて調査をおこなった上、CSSを改変する。

参考としたCSSは、

デフォルト2005 (ブルー) 　http://www.blog.livedoor.com/design_demo/new_defau...

また、以下が、そのCSS本文であるが、当Wikiに掲載するにあたって、wiki文法上の問題から、「http」を「ｈttp」（行頭のｈを大文字）にするなど、一部を改変している。

• 覚え書き
  このCSSの著作権はlivedoorにある筈。
  無料であるblogサービスのCSSを、ここに公開することに問題はあるか？

---

@charset "EUC-JP";

/*
livedoor Blog CSS
FileName: new_default_blue
Version: 2005.08.02
　*/

body{ margin:0; padding:0; color:#444; font-family:arial ,sans-serif; background:url(ｈttp://parts.blog.livedoor.jp/img/usr/new_default_blue/side.gif); text-align:center; }

a{color:#43699b;text-decoration:underline;} a:link{color:#43699b;text-decoration:underline;} a:visited{text-decoration:underline;} a:active{} a:hover{color:#43699b;text-decoration:none;}

#header{ background:url(ｈttp://parts.blog.livedoor.jp/img/usr/new_default_blue/bg_head.gif) repeat-x 0 100%; } #header td{ font-size:12px; text-align:right; padding-right:10px; } #header a:link{color:#00497d;} #header a:visited{color:#00497d;} #header a:active{color:#00497d;} #header a:hover{color:#00497d;text-decoration:none;}

#container{ width:823px; margin:0 auto; background:url(ｈttp://parts.blog.livedoor.jp/img/usr/new_default_blue/base.gif) repeat-y 50% 0; text-align:center; word-break:break-all; }

#banner,#subbanner{ color:#fff; width:773px; height:100px; text-align:left; margin:0 auto; font-weight:normal; background:url(ｈttp://parts.blog.livedoor.jp/img/usr/new_default_blue/title.gif) repeat-x; }

#banner a{color:#fff;text-decoration:none;} #banner a:link{color:#fff;text-decoration:none;} #banner a:visited{color:#fff;text-decoration:none;} #banner a:hover{color:#fff;text-decoration:underline;} #ad{width:340px;}

h1,h2,h3{margin:0;padding:0;}

.blogtitle{ font-size:medium; padding:30px 30px 5px; }

.description{ font-size:small; padding:0 30px; }

#wrapper{ float:left; width:608px; }

#content{ float:right; width:393px; text-align:center; border-top:#8abde3 2px solid; }

#blog{ width:100%; padding:0px 0 20px; text-align:left; margin:0 auto; }

#left{ float:right; width:190px; padding:0px 0px 30px; } #right{ float:left; width:190px; padding:0px 0px 30px 2px; text-align:center; } #categorytitle{ color:#43699b; font-size:14px; font-weight:bold; padding:6px 20px; text-align:left; background:#CCE9F9; }

.date{ color:#43699b; font-size:12px; font-weight:normal; padding:10px 20px;

}

.blogbody{ line-height:130%; text-align:center; border-bottom:#8abde3 2px solid; margin-bottom:10px; }

.blogbodybottom{ }

.title{ color:#43699b; font-size:small; font-weight:bold; text-align:left; margin:0 20px; }

.main,.mainmore{ font-size:small; margin:10px 20px 0; text-align:left; } blockquote{ border:2px dotted #777; padding:10px; margin:10px; text-align:left; } .pict{} a.continues:link{color:#43699b;text-decoration:underline;} a.continues:visited{color:#43699b;text-decoration:underline;} a.continues:active{color:#43699b;text-decoration:underline;} a.continues:hover{color:#43699b;text-decoration:none;}

.posted{ color:#43699b; font-size:11px; text-align:right; margin:20px 20px 5px; }

.posted a:link{color:#43699b;text-decoration:underline;} .posted a:visited{color:#43699b;text-decoration:underline;} .posted a:active{color:#43699b;text-decoration:underline;} .posted a:hover{color:#43699b;text-decoration:none;}

.menu{ color:#43699b; font-size:11px; text-align:right; margin:0 20px 10px; }

.menu a:link{color:#43699b;text-decoration:underline;} .menu a:visited{color:#43699b;text-decoration:underline;} .menu a:active{color:#43699b;text-decoration:underline;} .menu a:hover{color:#43699b;text-decoration:none;}

.comblogbodybottom{}

/* トラックバックURL表示 */

.trackbackurlbody{ text-align:left; } .trackbackurlttl{ color:#43699b; font-size:x-small; font-weight:bold; padding:10px 20px 0;

/* border-top:#CCE9F9 1px solid; */

}

.trackbackurl{text-align:center;margin-bottom:10px;} .trackbackurl table{width:350px;margin:0 auto;} input.trackbackbox{width:275px;}

/* トラックバック・コメント表示 */

a.posttitle:link{color:#43699b;text-decoration:underline;font-size:x-small;} a.posttitle:visited{color:#43699b;text-decoration:underline;font-size:x-small;} a.posttitle:active{color:#43699b;text-decoration:underline;font-size:x-small;} a.posttitle:hover{color:#43699b;text-decoration:underline;font-size:x-small;}

#trackback,#comment,#takecomment{text-align:left;}

.trackbackhead,.commenthead,.takecommenthead{ color:#43699b; font-size:x-small; font-weight:bold; padding:10px 20px 0; margin-bottom:10px; border-top:#CCE9F9 1px solid; } #trackbackbody,#commentbody,#takecommentbody{padding:0 20px;} .trackbackttl,.commentttl{color:#43699b;font-size:x-small;} .trackbacktext,.commenttext{font-size:x-small;line-height:125%;margin:5px 5px 20px;}

#error{ padding:10px; font-size:x-small; line-height:125%; font-weight:bold; } #error span{font-weight:normal;}

.loginon{ color:#000; font-size:x-small; font-weight:bold; margin:10px 15px; padding:5px; border:1px solid #CCE9F9; text-align:center; } .loginoff a:link{color:#000;} .loginoff a:visited{color:#000;} .loginoff a:active{color:#000;} .loginoff a:hover{color:#fff;} .loginoff{ color:#000; font-size:x-small; font-weight:bold; margin:10px 15px; padding:5px; border:1px solid #CCE9F9; text-align:center; } .loginoff a:link{color:#43699b;} .loginoff a:visited{color:#43699b;} .loginoff a:active{color:#43699b;} .loginoff a:hover{color:#43699b;}

#formbody{text-algin:center;padding-left:10px;}

.form{ margin:0px auto; color:#000; font-size:12px; } .form th{ font-weight:normal; padding:2px; text-align:right; } .form td{ padding:2px; }

input#author{width:200px;} input#email{width:200px;} input#url{width:200px;} input#bake{} textarea#text{width:280px;height:200px;} input.button{margin-top:20px;width:80px;} #blogcommentbottom{ }

/* カレンダー指定 */

.calendarhead{ color:#fff; font-size:12px; font-weight:bold; padding:3px 0; text-align:center; background:url(ｈttp://parts.blog.livedoor.jp/img/usr/new_default_blue/title_bar.gif) no-repeat; }

.calendarhead a:link{color:#fff;text-decoration:none;} .calendarhead a:link{color:#fff;text-decoration:none;} .calendarhead a:visited{color:#fff;text-decoration:none;} .calendarhead a:active{color:#fff;text-decoration:none;} .calendarhead a:hover{color:#fff;text-decoration:underline;}

.caltop{} .calbody{text-align:left;} .calendartable{} .caltbl{ width:188px; margin:0px; }

.calbottom{margin-bottom:10px;} .caltblwkbg{} .calendarwd{ background:#8ABDE3; margin:0; } .caltblwk{} .caltblwk td{ color:#43699b; padding:3px 0; font-size:11px; text-align:center; }

.weekday{} .sun{} .sat{}

.caltbldaybg{ padding:5px 5px 0 6px; background:transparent; }

.caltblday{ width:175px; margin:0 auto; }

.caltblday td{ color:#43699b; width:25px; height:25px; padding:3px 0; font-size:11px; text-align:center; }

.calendar{} .calendard{} .calon{background:url(ｈttp://parts.blog.livedoor.jp/img/usr/new_default_blue/calendaron.gif) no-repeat;} .caloff{background:url(ｈttp://parts.blog.livedoor.jp/img/usr/new_default_blue/calendar.gif) no-repeat;}

.caltblday a:link{color:#43699b;text-decoration:none;} .caltblday a:visited{color:#43699b;text-decoration:none;} .caltblday a:active{color:#43699b;text-decoration:none;} .caltblday a:hover{color:#43699b;text-decoration:underline;}

/* サイド指定 */

.sidetitle{ color:#fff; font-size:12px; font-weight:bold; height:20px; padding:3px 0; text-align:center; background:url(ｈttp://parts.blog.livedoor.jp/img/usr/new_default_blue/title_bar.gif) no-repeat; margin-bottom:5px; }

.side{ color:#41699a; font-size:x-small; text-align:center; line-height:125%; padding:5px 10px 0; } .sidebottom{ margin-bottom:10px; } .sidebody{ padding-bottom:5px; padding-left:5px; background:url(ｈttp://parts.blog.livedoor.jp/img/usr/new_default_blue/dot.gif) no-repeat 0 5px; text-align:left; }

.side a:link{color:#41699a;text-decoration:underline;} .side a:visited{color:#41699a;text-decoration:underline;} .side a:active{color:#41699a;text-decoration:underline;} .side a:hover{color:#41699a;text-decoration:underline;}

a.ttllink:link{color:#fff;text-decoration:underline;} a.ttllink:visited{color:#fff;text-decoration:underline;} a.ttllink:active{color:#fff;text-decoration:underline;} a.ttllink:hover{color:#fff;text-decoration:none;}

input.sf{width:122px;margin-right:3px;} .moblogbody,.linkme,.skypeme{text-align:center;} .afbody{text-align:center;padding-bottom:10px;} .afbody img{margin-bottom:3px;} .photo{text-align:center;} .nickname{font-size:x-small;font-weight:bold;margin:10px 0;} .message{text-align:left;font-size:x-small;margin-bottom:10px;} .blogtimes{margin:10px auto;text-align:center;width:180px;} .quotetable{background:#000;width:170px;} .quotetable img{width:160px;} .quote{color:#000;font-size:x-small;padding:1px;background:#fff;}

.elsehead{ padding:3px 0 4px; } .elsebody{text-align:center;} .elsebottom{ padding:3px 0 4px; } .elsebody a:link{} .elsebody a:visited{} .elsebody a:active{} .elsebody a:hover{} .checkers{padding-bottom:10px;width:117px;font-size:11px;text-align:left;margin:0 auto;} .reader{padding-bottom:20px;width:117px;font-size:11px;text-align:left;margin:0 auto;} .powered{padding-bottom:10px;} .syndicate{} #footer{ }

.blogbody iframe{width:340px;margin-top:20px;margin-left:10px;}

a.adtitle{color:#0a4976;font-weight:bold;text-decoration:underline;} a.adtitle:link{color:#0a4976;font-weight:bold;text-decoration:underline;} a.adtitle:visited{color:#0a4976;font-weight:bold;text-decoration:underline;} a.adtitle:active{color:#0a4976;font-weight:bold;text-decoration:underline;} a.adtitle:hover{color:#0a4976;font-weight:bold;text-decoration:underline;} a.addescription{color:#000;text-decoration:none;} a.addescription:link{color:#000;text-decoration:none;} a.addescription:visited{color:#000;text-decoration:none;} a.addescription:active{color:#000;text-decoration:none;} a.addescription:hover{color:#000;text-decoration:none;} a.adurl{text-decoration:none;} a.adurl:link{text-decoration:none;} a.adurl:visited{text-decoration:none;} a.adurl:active{text-decoration:none;} a.adurl:hover{text-decoration:none;} a.adld{color:#0a4976;text-decoration:underline;} a.adld:link{color:#0a4976;text-decoration:underline;} a.adld:visited{color:#0a4976;text-decoration:underline;} a.adld:active{color:#0a4976;text-decoration:underline;} a.adld:hover{color:#0a4976;text-decoration:underline;} body.ad{background:#fff;}