何が楽しいの？と言われても・・・

  

ブログってのはテンプレートのおかげで手っ取り早くていいんだけど、思い通りのデザインに出来ないんだよなあ。

今使ってるのは２カラムなんだけど、サイドバーの幅はなんとか広く変更出来た。

でも今度は記事欄の幅が微妙に気になりだした・・・


　　　＜教えてブログ改造　１　へ戻る　
　

また少しずつ改造に挑戦してみるかな。
知識が全くないもんだからえらく手間取ってメンドいが。

詳しいことは分からないけど、いろいろイジってみたところこんな構成じゃないのかな？。




使用しているテンプレート　　２カラム　シンプルブルー（幅100%）　

変更点　　　　左サイドバーの拡大。　それに伴う体裁の調整。　
　　　　　　　　
　　　　　　　　　　　いろいろイジって詳しいことは忘れてしまった。　


そのスタイルシートのプログラム　　

@charset "UTF-8";

/*simple_blue 100%
back_obj:#0072d3;画像と同じ色
line:#00666;テーブルデコレーション色
back_bg:#D9E2ff;bodyバック色
link_txt:#001F79;フォント色
url:http://admin.naturum.ne.jp/_img/simple_blue/head.gif;画像
*/

*{
font-family :"verdana","helvetica","osaka","ＭＳ Ｐゴシック",ans-serif;
}

textarea,select,input {
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","Helvetica","Arial","ＭＳ Ｐゴシック","sans-serif";
}

body{
color :#000;
margin :0px;
background :#D9E2FF;
text-align:center;
}

form{
margin :0px;
padding :0px;
}

table.form{
margin :25px 0px 0px 13px;
}

img{
border :none;
}

ul.rss{
margin :0px;
padding :0px;
width :100%;
text-align :center;
}

ul.rss li {
border-right :#999 1px solid;
display :inline;
font-size :12px;
font-style :normal;
font-weight :bold;
letter-spacing :20.2px;
margin-right :0.3em;
padding-right :0.5em;
padding-left :0.2em;
}

ul.rss a:link {
color:#333333;
text-decoration:none;
}

ul.rss a:visited {
color:#333333;
text-decoration:none;
}

ul.rss a:hover {
color :#999999;
text-decoration :none;
}

ul.rss a:active {
color :#333333;
text-decoration :none;
}

a{color:#6633ff;text-decoration:underline;}
a:link{color:#6633ff;text-decoration:underline;}
a:visited{color:#6633ff;text-decoration:underline;}
a:active{color:#6666cc;text-decoration:none;}
a:hover{color:#6666cc;text-decoration:none;}

a.acalendar{color:#001F79;text-decoration:underline;}
a.acalendar:link{color:#001F79;text-decoration:underline;}
a.acalendar:visited{color:#001F79;text-decoration:underline;}
a.acalendar:active{color:#001F79;text-decoration:none;}
a.acalendar:hover{color:#001F79;text-decoration:none;}

a.acontinues{color:#001F79;text-decoration:underline;}
a.acontinues:link{color:#001F79;text-decoration:underline;}
a.acontinues:visited{color:#001F79;text-decoration:underline;}
a.acontinues:active{color:#001F79;text-decoration:none;}
a.acontinues:hover{color:#001F79;text-decoration:none;}

a.amenu{color:#001F79;text-decoration:underline;}
a.amenu:link{color:#001F79;text-decoration:underline;}
a.amenu:visited{color:#001F79;text-decoration:underline;}
a.amenu:active{color:#001F79;text-decoration:none;}
a.amenu:hover{color:#001F79;text-decoration:none;}

#container{ font-size:12px;
width:100%;
background-color:#ffffff;
margin:0px auto;
text-align:left;
}

#banner,#subbanner{
background :#0072D3 url(http://admin.naturum.ne.jp/_img/simple_blue/head.gif) left bottom;
padding :0px 10px 10px 10px; }

#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:active{color:#fff;text-decoration:underline;}
#banner a:hover{color:#fff;text-decoration:underline;}

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

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

.blogtitle{
font-size :30px;
font-weight :bold;
padding :40px 0px 0px 10px;
text-align :left;
letter-spacing :2px;
}

.description{
color :#fff;
font-size :12px;
padding :4px 0px 0px 35px;
text-align :left;
letter-spacing :2px;
}


#content{
margin-left:265px;
background-color:#ffffff;
}

#links{
width:260px;
float:left;
text-align:left;
padding :20px 0px 0px 10px;
margin:0px;
background-color:#ffffff;
overflow:hidden;
}


にほんブログ村

#footer{
clear :both;
}

#copyright{
background :#0072D3 url(http://admin.naturum.ne.jp/_img/simple_blue/foot.gif) bottom;
width :100%;
height :16px;
font-size :12px;
font-weight :bold;
color :#fff;
margin :0px;
padding :0px;
line-height :16px;
text-align :center;
}

.blog{
margin :20px 10px 20px 15px;
}

.date{
border-top :1px solid #000066;
border-left :1px solid #000066;
border-right :1px solid #000066;
border-bottom :1px solid #000066;
background :#0072D3 url(http://admin.naturum.ne.jp/_img/simple_blue/obj.gif);
background-position :1px 1px;
color :#fff;
font-size :14px;
letter-spacing :2px;
padding :5px 0px 5px 5px;
}

.blogbody{
background :#fff;
margin :0px 0px 10px 0px;
padding :20px;
border-left :1px solid #000066;
border-right :1px solid #000066;
border-bottom :1px solid #000066;
}

.title{
color:#000;
font-size:14px;
font-weight :bold;
height:10px;
}

.main{
color :#555555;
font-size :13px;
padding :15px 0px 15px 0px;
height:100%;
width:95%;
overflow:auto;
line-height:110%;
}

.main img{
margin :0px 0px 5px 0px;
}


.main-continues{
font-size :12px;
}

.posted{
color :#000;
font-size :10px;
text-align :right;
margin :0px 0px 0px 0px;
}

a.aposted{color:#001F79;text-decoration:underline;font-weight:bold;font-sizepx;}
a.aposted:link{color:#001F79;text-decoration:underline;font-weight:bold;}
a.aposted:visited{color:#001F79;text-decoration:underline;font-weight:bold;}
a.aposted:active{color:#001F79;text-decoration:none;font-weight:bold;}
a.aposted:hover{color:#001F79;text-decoration:none;font-weight:bold;}

.menu{
color#666666;
font-size:12px;
text-align:right;
}

.comments-head{
color:#000;
font-size:10px;
font-weight :bold;
padding:0px 0px 0px 0px;
height:10px;
}

.comments-body{
font-size:12px;
line-height :135%;
margin:20px 0px 15px 13px;
}

.comments-post{
color:#6633cc;
font-size:12px;
text-align:right;
margin:0px 0px 25px 0px;
}

.trackback-url{
color:#009999;
font-size:11px;
font-weight :bold;
margin:20px 0px 15px 13px;
}

.trackback-body{
font-size:12px;
line-height:135%;
margin:20px 0px 15px 13px;
}

.trackback-post{color :#000;
font-size :10px;
text-align :right;
margin :0px 0px 30px 0px;
font-weight :bold;
}

a.atrackback-post{color:#001F79;text-decoration:underline;font-weight:bold;}
a.atrackback-post:link{color:#001F79;text-decoration:underline;font-weight:bold;}
a.atrackback-post:visited{color:#001F79;text-decoration:underline;font-weight:bold;}
a.atrackback-post:active{color:#001F79;text-decoration:none;font-weight:bold;}
a.atrackback-post:hover{color:#001F79;text-decoration:none;font-weight:bold;}

label{
font-size :10px;
font-weight :bold;
}

#author{
width :200px;
border :1px solid #000066;
}
#email{
width :200px;
border :1px solid #000066;
}
#url{
width :300px;
border :1px solid #000066;
}
#text{ font-size:12px;
width :400px;
height :200px;
border :1px solid #000066;
}
.pagetop{
font-size :12px;
text-align :right;
margin :0px 0px 25px 0px;
}
.calendarhead{
color :#666;
font-size :12px;
font-weight :bold;
letter-spacing :2px;
padding :0px 0px 2px 0px;
text-align :center;
}

.calendartable{
margin :0px auto 20px auto;
padding :0px;
width :185px;
text-align :left;
background :#fff
border-top :1px solid #000066;
border-left :1px solid #000066;
border-right :1px solid #000066;
border-bottom :1px solid #000066;
empty-cells:show;
border-spacing:0px;
border-collapse:collapse;
}

.calendarweek{
color :#fff;
font-size :12px;
font-weight :bold;
position :center;
}

.calendarwd{
border-top :1px solid #000066;
border-left :none;
border-right :none;
border-bottom :1px solid #000066;
background :#0072D3 url(http://admin.naturum.ne.jp/_img/simple_blue/obj.gif);
background-position :-2px 0px;
color :#fff;
font-size :12px;
letter-spacing :2px;
padding :5px 0px 5px 5px;
}
.calendard{
text-align:center;
}
.calendar{
font-size :12px;
padding :4px 2px 4px 2px;

}

.sidetitle{
border-top :1px solid #000066;
border-left :1px solid #000066;
border-right :1px solid #000066;
border-bottom :1px solid #000066;
background :#0072D3 url(http://admin.naturum.ne.jp/_img/simple_blue/obj.gif) top left;
background-position :1px 1px;
color :#fff;
font-size :12px;
letter-spacing :2px;
padding :5px 0px 5px 5px;
width :251px;
}

.side{
font-size :12px;
line-height :140%;
margin :0px 0px 10px 0px;
padding :8px;
border-left :1px solid #000066;
border-right :1px solid #000066;
border-bottom :1px solid #000066;
width:240px;
}

a.aside{color:#9933cc;text-decoration:underline;}
a.aside:link{color:#9933cc;text-decoration:underline;}
a.aside:visited{color:#9933cc;text-decoration:underline;}
a.aside:active{color:#6699cc;text-decoration:none;}
a.aside:hover{color:#6699cc;text-decoration:none;}

a.arss{color:#0000FF;text-decoration:underline;}
a.arss:link {color:#0000FF;text-decoration:underline;}
a.arss:visited{color:#0000FF;text-decoration:underline;}
a.arss:active{color:#0000FF;text-decoration:none;}
a.arss:hover{color:#0000FF;text-decoration:none;}

.photo{text-align:center;
}

.nickname{
color:#2b5695;
font-size:16px;
font-weight :bold;
margin:10px 0px;
　　　　　　　text-align:center
}

.message{text-align:center

}

.quotetable{
}

.quote{
color :#000;
font-size :12px;
padding :1px;
}

.blogtimes{
margin :0px 0px 16px 0px;
text-align :center;
}

.powered{
text-align :center;
margin :0px 0px 10px 0px;
}

.syndicate{
font-size :12px;
text-align :center;
}
.checkers{
font-size :12px;
margin-top:10px;
}

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

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

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

a.adld {text-decoration:underline;}
a.adld:link {text-decoration:underline;}
a.adld:visited {text-decoration:underline;}
a.adld:active {text-decoration:underline;}
a.adld:hover {text-decoration:underline;}

body.ad{
background :#f7p39f;
}



　　　＜教えてブログ改造　１　へ戻る  

どなたかお詳しい方教えてください。

現在３カラムのテンプレートに変更したいと考えています。

一番左のフレーム（カラム？）は幅を広くできたのですが、右のフレームまで一緒に大きくなってしまうのです。

希望は右フレームの幅を小さくし、真ん中のフレームを少しでも幅広く取りたいのです。

ページ全体の幅が広くなってもかまいません。

僕は全く知識がありません。HPソフトでHPは作ったことがありますが、プログラムはさっぱりです。

下の画像はテンプレートの数値を一つ一つ変更しながら、どこが変わるのか試したものです。
間違いがあるかもしれません。テンプレートを別ソフトに移して自分なりに解説したものです。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
その後

いろいろやってみましたが、幅の変更は結局諦めました
Kawatombo Kenさんのアドバイスによると、幅の変更は詳しくない者がやるのは止めた方がよいみたい。

というわけで、現在の２カラムにしました。
ただ今後の事も考えて、改造の記録のためにこのページは録っておきたいと思います。

なお、ここを見て参考にするのは危険です。文字の色、サイズの変更くらいなら大丈夫だと思うけど、責任は持てないのでご注意を。

Kawatombo Kenさんのやりとりは下に記録しておきます。



質問テンプレートでの「３カラム、幅100%」を利用したくて、いろいろいじったのですがお手上げです。

いちばん左のフレームは広げることが出来たのですが、同時にいちばん右のフレームまで幅広くなってしまいます。

真ん中のフレームも狭くなり、画像が途切れてしまいました。

なんとか、一番右のフレームを狭めて、真ん中のフレーム幅を広げられないでしょうか？。


お詳しい方よろしくお願いいたします。

解答
表示幅の改造方法は、無い訳では無いのですが・・・
仮にうまく行っても、IE7やFireFoxなどのユーザーの方から閲覧すると、フレームがはみ出したり、記事の表示がおかしくなったりと
色々不具合が出るようです
（もしかしたら解決方法があるかも知れませんが・・・）

3カラムで、本文の表示幅を広くする手っ取り早い方法は
【N.I.R】にて夕焼けを眺めた瞬間
【N.I.R】にて釣りをはじめた男
など、元々幅広のテンプレートをベースに改造することです（私のブログが、この方法を使っています）

回答になっていないかもしれませんが・・・（；＾＾Ａ

解答
追記です
友人よりの情報では、最近IE7では上記不具合が解消されたと言う、不確定情報を得ました
一応、簡単に改造方法を記しておきます

ブログ全体の幅を広げずに、左右のカラムの幅を変更してしまった事が、原因です
#container{・・・・}ブログ全体の幅
#content{・・・・}中央部の幅
main{・・・・}記事の文字や写真の幅
この三箇所の{}内にあるwidth：に続く数値を増やす事で幅広に出来るはずです

ただし、結構な微調整が必要だと思いますので、頑張ってみてください

返信
Kawatombo Kenさん
返事が遅くなって申し訳ありません。
アドバイスしていただいたとおりにやってみると、真ん中のフレームは幅広くすることが出来ました！。

ただ一番右のフレームの幅を縮めることが出来ません。もしかすると出来ないのかも・・・。

解答
３カラム１００％のテンプレートはあまりお勧めではありません。
理由は見る人の環境に左右されやすいからです。
ブログやサイトを作る場合は自分のPC環境ではなく、見る人の環境を考えて作らないといけません。
出来れば、普通の３カラムを改造して横幅は最高でも950以下で作られた方が良いと思います。
それと、幅を広げる改造ですがプロパティを変更して広げるだけでは使うブラウザによってデザインがおかしくなります。
これはCSSの記述を無視したやり方です。
ボックスプロパティのマージン・パディング・ボーダーの変更などなど色々やらないと見る人のブラウザによってデザインが滅茶苦茶になります。
ナチュラムのブログを色々みると、プロパティだけ変えて改造しているブログが沢山ありますが、綺麗に見えるのはIE6からだけで他のブラウザからみると記事自体が読めないというのが殆どです。
CSSに記述に対しては一言では書けません。
ttp://www.tohoho-web.com/css/reference.htm
↑のようなサイトを参考にして下さい。

解答
こんばんは！
「教えて！・・・」にも書きましたが、シンプルスタイルですと、表記の仕方が多少異なるので
具体例を書いておきますね
#container{　の　width:980px
#content{　の　width:580px
#links{　の　width:180px
#links2{　の　width:180px
.main{　の　width:552px
で、大体バランスが取れるはずです

他にも、
.sidetitle｛　や、.date｛　の背景画像など色々と変更しなければならないでしょうが・・・
とにかく試してみてください

PS.
その他の質問は、当ブログのカスタマイズ関連記事にしていただければ
出来る限りのお答えをしますよ