ライブドアブログ(フリー)で、ブログの横幅を広げてみました。

お金を払っていないフリーのライブドアブログでできないことがお金を払えばできるようになります。

1.作成したデザインを複数保存できる
2.FTPでファイルをアップロードできる

私はフリーなので有料版を体験したことがありませんが、今回のカスタマイズではこの2点が非常に不便に感じました。この為にPROに移行してもいいかなぁと思えるぐらいの機能ですが、ま、デザイン気にしなければ特には問題無いでしょうしね。で、ちょっと説明を。

1.作成したデザインを複数保存できる
WEB作成と同じようにローカルで確認するのは、面倒(できるという話がちらほらありますが、特有のタグであったり画像のファイル名が変わってしまったり)なので、結局は

エディタに保存→再構築→失敗なら戻す

という作業を繰り返す必要がありますが、PROであれば、複数のデザイン保存が可能なので、その都度ブラウザで保存しながらの作業ができます。楽。

2.FTPでファイルをアップロードできる
やってみたのですが、どうやらブログでは外部サイトのファイルはブログパーツにはできないようです(ここで言うブログパーツは、罫線とかタイトル背景とか。<TABLE>で線をつけているわけではなく、画像ファイルを繰り返し表示して罫線を形成)。ということは

画像修正→画像アップ→デザイン修正(画像URL)→再構築→失敗であれば画像修正からやり直し

普通のWEBであれば、画像が違っていれば画像だけを修正できますが、FTPでのアップができず、ブログでのファイルアップロードは、それごとにファイル名が変わってしまいます。つまり、画像を変更するということは、デザイン(CSS)もいっしょに変更しなければなりません。もう何度もいったりきたり。

そんなこんなでできたサイトが現在のサイトです。横幅を大きくしただけですがwww
所要時間は2時間ぐらい。触ったのはCSSだけです。あとは画像のアップロード。

ざっと手順を説明します。

1.デザインのカスタマイズ・・・スタイルシート(CSS)

2.修正個所を探す
#container{
width:960px;
margin:0 auto;
text-align:center;
background:url(http://parts.blog.livedoor.jp/img/usr/〜〜) repeat-y 50% 0;
word-break:break-all;

2-1
このURLを直接コピーして、ブラウザで開いてみる。現在のブログと合わせて、画像幅の修正が必要そうなら画像をダウンロード。
2-2
ペイントブラシ等で画像を修正。幅を広くし(上記では960pxに)保存する。
2-3
ブログの投稿・・・ファイルのアップロードで、修正したファイルをアップする。
2-4
アップロードした画像ファイルのURLを確認する。
2-5
上記の,髻2-4で確認したURLに変更する。一緒に△凌値を広く(上記では960pxに)変更する。
2-6
更新→再構築

これがうまくいかなかったら、2-2から2-6まで順にやり直し。失敗が画像なら、その都度アップしたファイルを削除していくことをお勧めします。2-1で画像を見れば、ほとんどがどこに使われている画像なのかわかるので、それが確認できれば、widthを広げ、同じだけ画像を広げていければなんとかなるのではないかなと思います。

フリーでも頑張ればいろいろできそうですね。追記で、当サイトのCSSを掲載しておきます。参考までにどうぞ。修正個所も、覚えている範囲でマークしてみます。


元デザインはシンプルの「Liquid Pearl(3カラム)」です。手順はどのデザインでもいっしょだと思うのですが。
もし、ブログパーツが、他サイトではなくライブドアの画像データなら呼び出しが可能となっていれば追記のCSSをそのままコピーするだけでデザインはこのサイトになると思います、たぶん。
ただ、私が勝手にいじった場合は画像データのURLが変わってしまいますし、他の元デザインで行った場合はどうなるかわかりませんのでお勧めはしませんがwww



////////////ここから////////////
@charset "EUC-JP";

/*
-----------------------------------------------------
livedoor Blog CSS
FileName: Liquid Pearl(3カラム)
Version: 2006.09.08
Designed by: Demiflare Designs.
-----------------------------------------------------
*/

body{
margin:0;
padding:0;
color:#333;
font-family:arial ,sans-serif;
background:url(https://parts.blog.livedoor.jp/img/usr/liquid_pearl/bg00.gif) repeat-x 0 30px;
text-align:center;
}

a:link{color:#233a5B;}
a:visited{color:#233a5B;}
a:active{color:#233a5B;}
a:hover{color:#233a5B;text-decoration:none;}

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

#container{
width:960px;
margin:0 auto;
text-align:center;
background:url(https://livedoor.blogimg.jp/bad_mint_on/imgs/7/1/71c83e03.gif) repeat-y 50% 0;
word-break:break-all;
}

#banner{
width:767px;
height:400px;
text-align:left;
margin:0 auto;
background:url(https://livedoor.blogimg.jp/bad_mint_on/imgs/7/1/71b51f9b.png) no-repeat 50% 0;
}

#banner a{color:#666;}
#banner a:link{color:#666;}
#banner a:visited{color:#666;}
#banner a:hover{color:#666;text-decoration:underline;}

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

.blogtitle{
font-size:14px;
padding:100px 18px 5px;
}

.description{
font-size:12px;
font-weight:bold;
color:#666;
padding-left:18px;
}

#blogcontainer{
width:940px;
margin:5px auto 0;
padding-bottom:30px;
background:url(https://livedoor.blogimg.jp/bad_mint_on/imgs/5/3/53243f41.gif) repeat-y 50% 0;
}

#wrapper{
width:760px;
float:left;
text-aling:center;
}

#content{
width:580px;
float:right;
text-aling:center;
}

#blog{
width:570px;
margin:0 auto;
text-align:left;
}

#lefttop,#righttop{}

#left{
width:180px;
float:right;
text-align:center;
}

#right{
width:180px;
float:left;
text-align:center;
}

#categorytitle{
color:#4C4C4C;
font-size:12px;
font-weight:bold;
padding:10px;
margin:0px auto 10px;
text-align:center;
background:url(https://livedoor.blogimg.jp/bad_mint_on/imgs/8/5/855f125b.gif) repeat-y 50% 50%;
}
.datetop,#articletop{
padding:3px 0px;
background:url(https://livedoor.blogimg.jp/bad_mint_on/imgs/8/5/855f125b.gif) no-repeat 50% 0%;
}
.fullbody,#articlebody{
padding:5px 15px 5px 15px;
background:url(https://livedoor.blogimg.jp/bad_mint_on/imgs/6/2/622c61bb.gif) repeat-y 50% 0%;
}
.date{
padding:12px 40px;
color:#d39828;
font-size:12px;
font-weight:bold;
background:url(https://parts.blog.livedoor.jp/img/usr/liquid_pearl/center_icon.gif) no-repeat 0% 50%;
width:100%;
}

.blogbodytop{}

.blogbody{
padding:5px 0px;
}

.title{
color:#555;
font-size:14px;
font-weight:bold;
}

/**/
* html .main{height:1%;}
* html .mainmore{height:1%;}
/**/

.main,.mainmore,.article_tags{
font-size:12px;
color:#333;
text-align:left;
line-height:150%;
padding:15px 0px;
}

blockquote{
border:2px dotted #71520C;
padding:10px;
margin:10px;
text-align:left;
}

.pict{}

a.continues:link{color:#71520C;}
a.continues:visited{color:#71520C;}
a.continues:active{color:#71520C;}
a.continues:hover{color:#71520C;text-decoration:none;}

.posted{
font-size:11px;
text-align:right;
padding-top:5px;
background:url(https://parts.blog.livedoor.jp/img/usr/liquid_pearl/center_line.gif) repeat-x 50% 0%;
}

.posted a:link{color:#71520C;}
.posted a:visited{color:#71520C;}
.posted a:active{color:#71520C;}
.posted a:hover{color:#71520C;text-decoration:none;}

.nextpage{
font-size:12px;
padding:5px;
text-align:right;
}
.nextpage a:link{color:#71520C;}
.nextpage a:visited{color:#71520C;}
.nextpage a:active{color:#71520C;}
.nextpage a:hover{color:#71520C;text-decoration:none;}

.blogbodybottom{}

.dateend,#articlebottom{
padding:3px 0px 4px;
background:url(https://livedoor.blogimg.jp/bad_mint_on/imgs/d/4/d4da3fe1.gif) no-repeat 50% 0%;
margin-bottom:25px;
}

.menu{
font-size:11px;
text-align:right;
margin-top:5px;
background:url(https://livedoor.blogimg.jp/bad_mint_on/imgs/d/4/d4da3fe1.gif) repeat-x 50% 100%;
padding-bottom:5px;
}

.menu a:link{color:#71520C;font-weight:bold;}
.menu a:visited{color:#71520C;font-weight:bold;}
.menu a:active{color:#71520C;font-weight:bold;}
.menu a:hover{color:#71520C;font-weight:bold;text-decoration:none;}

.comblogbodybottom{}

.trackbackurltop,#trackbacktop,#commenttop,.formbodytop{}
.trackbackurlbody{
padding:10px 0px;
text-align:left;
width:100%;
}
.trackbackurlttl{
color:#555;
font-size:12px;
font-weight:bold;
}

.trackbackurl{text-align:center;}
.trackbackurl table{width:335px;margin:10px auto 0;}
input.trackbackbox{width:260px;}

.trackbackurlbottom,#trackbackbottom,#commentbottom,.formbodybottom{}

a.posttitle:link{color:#71520C;}
a.posttitle:visited{color:#71520C;}
a.posttitle:active{color:#71520C;}
a.posttitle:hover{color:#71520C;text-decoration:none;}

#trackback,#comment,#takecomment{
padding:10px 0px;
text-align:left;
width:100%;
}

.trackbackhead,.commenthead,.takecommenthead{
color:#555;
font-size:12px;
font-weight:bold;
}
#trackbackbody,#commentbody,#takecommentbody{
padding:10px 5px;
}
.trackbackttl,.commentttl{
color:#71520C;
font-size:12px;
}
.trackbacktext,.commenttext{
font-size:12px;
margin:3px 0 10px 10px;
}

.loginon{
color:#333;
font-size:12px;
margin:15px 0;
}
.loginon a:link{color:#233a58;}
.loginon a:visited{color:#233a58;}
.loginon a:active{color:#233a58;}
.loginon a:hover{color:#233a58;}
.loginoff{
color:#333;
font-size:12px;
margin:15px 0;
}
.loginoff a:link{color:#233a58;}
.loginoff a:visited{color:#233a58;}
.loginoff a:active{color:#233a58;}
.loginoff a:hover{color:#233a58;}

#formbody{
text-align:left;
}
.form{
color:#333;
margin:0px auto;
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:320px;height:200px;}
input.button{margin-top:20px;width:80px;}

.formbodybottom{}

.calendarhead{
color:#4C4C4C;
font-size:12px;
font-weight:bold;
text-align:center;
padding:14px 0 19px;
background:url(https://parts.blog.livedoor.jp/img/usr/liquid_pearl/side_title.gif) no-repeat 50% 0%;
}

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

.calendarpre,.calendarnext{
font-size:11px;
}

.caltop{}
.calbody{}
.caltbl{
width:170px;
margin:0 auto 30px;
border:solid #e3dac3;
border-width:1px 0px 0px 1px;
}

.caltblwkbg{}
.caltblwk{
color:#4C4C4C;
font-size:12px;
}
.caltblwk td{
padding:3px 0;
text-align:center;
background:#d5c3b5;
border:solid #fff;
border-width:0 1px 1px 0;
}

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

.caltbldaybg{}

.caltblday{
font-size:11px;
color:#000;
}

.caltblday td{
text-align:center;
padding:3px 0px;
background:#fff;
border:solid #e3dac3;
border-width:0 1px 1px 0;
}

.calon{}
.caloff{}

.caltblday a:link{color:#233a58;font-weight:bold;}
.caltblday a:visited{color:#233a58;font-weight:bold;}
.caltblday a:active{color:#233a58;font-weight:bold;}
.caltblday a:hover{color:#233a58;font-weight:bold;text-decoration:none;}

.calbottom{}


.sidetitle{
color:#4C4C4C;
font-size:12px;
font-weight:bold;
text-align:center;
padding:14px 0 19px;
background:url(https://parts.blog.livedoor.jp/img/usr/liquid_pearl/side_title.gif) no-repeat 50% 0%;
}

.side{
font-size:12px;
text-align:left;
line-height:125%;
padding:0 5px;
margin-bottom:30px;
}

.sidebody{
margin-bottom:5px;
}

.sidebody a:link{color:#233a5B;}
.sidebody a:visited{color:#233a5B;}
.sidebody a:active{color:#233a5B;}
.sidebody a:hover{color:#233a5B;text-decoration:none;}

.sidebottom{}

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

input.sf{width:100px;margin:5px 3px 5px 0;}
input.sfbtn{margin:5px 0;}
.moblogbody,.linkme,.skypeme{text-align:center;}
.afbody{text-align:center;padding-bottom:10px;}

.afbody a:link{color:#233a5B;}
.afbody a:visited{color:#233a5B;}
.afbody a:active{color:#233a5B;}
.afbody a:hover{color:#233a5B;}

.afbody img{margin-bottom:3px;}
.photo{text-align:center;}
.nickname{color:#233a5B;font-size:12px;font-weight:bold;padding:10px 0;}
.message{font-size:12px;padding-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:12px;padding:1px;background:#fff;}

.elsehead{}
.elsebody{
text-align:center;
}
.elsebottom{}
.checkers{padding-bottom:10px;width:117px;font-size:10px;text-align:left;margin:0 auto;}
.reader{padding-bottom:20px;width:117px;font-size:10px;text-align:left;margin:0 auto;}
.powered{padding-bottom:10px;}
.syndicate{}

#footer{}

.blogbody iframe{width:365px;margin-top:20px;}

a.adtitle:link{color:#71520C;font-weight:bold;text-decoration:underline;}
a.adtitle:visited{color:#71520C;font-weight:bold;text-decoration:underline;}
a.adtitle:active{color:#71520C;font-weight:bold;text-decoration:underline;}
a.adtitle:hover{color:#71520C;font-weight:bold;text-decoration:underline;}

a.addescription:link{color:#333;text-decoration:none;}
a.addescription:visited{color:#333;text-decoration:none;}
a.addescription:active{color:#333;text-decoration:none;}
a.addescription:hover{color:#333;text-decoration:none;}

a.adurl:link{color:#71520C;text-decoration:none;}
a.adurl:visited{color:#71520C;text-decoration:none;}
a.adurl:active{color:#71520C;text-decoration:none;}
a.adurl:hover{color:#71520C;text-decoration:none;}

a.adld:link{color:#71520C;text-decoration:underline;}
a.adld:visited{color:#71520C;text-decoration:underline;}
a.adld:active{color:#71520C;text-decoration:underline;}
a.adld:hover{color:#71520C;text-decoration:underline;}

body.ad{background:#fff;}


/////////////////ここまで///////////////