解決済

clip!clip!
Ads By Google

T-SELECTのわりとよくできました、のデザインを使っています。この2カラムのデザインを3カラムにするやりかたを教えてください。

試行錯誤しながら自分でやろうかとも思いましたが、共同ブログなので自分より詳しい人のお知恵を借りて確実にしたいです。よろしくお願いします。

2006-06-29 12:06の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(1)

1.

2006-07-01 17:50:24ベスト
CSSを以下のようにまず修正します。
----------------------
#content{
width:523px;→width:360px;
float:leftf;→loat:right;
}
#blog{
width:470px;→width:360px;
margin:0 20px 0 33px;→margin:0 auto;
}
#links{
width:188px;→削除
float:left;→削除
padding-bottom:30px;→削除
}
----------------------

以下をCSSに新規に追加します。
----------------------
#wrapper{
float:left;
width:550px;
}
#leftlinks{
float:right;
width:190px;
}
#rightlinks{
float:left;
width:190px;
}
----------------------

「トップページ」「カテゴリアーカイブ」「月別アーカイブ」の
「<div id="blogcontainer">」の下に「<div id="wrapper">」を追加し、
「<div id="linksbottom"></div>」の下の「</div>」を削除して
----------------------
<div id="links">
<div id="linkstop"></div>
<div id="linksbody">
<$PluginList_A$>
<$PluginList_B$>
----------------------
の部分を
----------------------
<!-- プラグインA(左) -->
<div id="leftlinks">
<$PluginList_A$>
</div></div>
<!-- プラグインB(右) -->
<div id="rightlinks">
<$PluginList_B$>
----------------------
と書き換えます。


「個別記事ページ」の「<div id="content">」「<div id="blog">」を削除し、
「<div id="links">」から「<br clear="all">」の直前の「</div>」までを削除します。

個別記事ページだけはカラム(サイドメニュー)無しで、それ以外のページは3カラムになると思います。
個別記事ページも3カラムにする時は、更にCSSを書き換える必要がありますが、トラックバックURLの表示部分などが短くなって読みにくいので、あえて3カラムにはしていません。
その他細かく修正したい場合は、適宜書き換えてください。
算数苦手なので、横幅のpxの計算は計算機で行いましたが、計算間違いしていたらすみません。
一応確認したので大丈夫だと思いますが、時折ありえない計算間違いをやらかすので。
回答レベル : アドバイス

できました。ありがとうございました。

Ads By Google

コメント(9)

#1.  g7zs
2006-06-30 21:04:25

ブログできいた方が早いような気がしないでもないですが・・・^^;

#2.  g7zs
2006-06-30 21:05:16

少なくなってきてると思ってたら、最近またコメント反映されない事がよく起こるようになりました。。。

2006-07-01 00:22:59

似た質問が出るかも知れないし過去質問として蓄積できたほうがいいかなと思ったですが厳しいですかね。自分の別IDで試行錯誤初めてみることにします。

#4.  060731
2006-07-01 06:42:29

画像であちこちの横幅が決まっているので(私の技量では)難しいですね
一応考えては見たのですが……
がんばられてください

#5.  Hukamin
2006-07-01 18:07:41

>>1の修正
「float:leftf;→loat:right;」という箇所は
「float:left;→float:right;」の誤りです。
一部(日付などの背景)画像が使われていますが、たぶんこれでいけると思います。
「#wrapper」の横幅が「550px」なのは190px+360pxの合計だからです。
「#blogcontainer」の横幅が740pxなので、740px-190px-190px=360pxなので、#contentの横幅は360pxに指定しています。

もし自己解決していたらすみません。

2006-07-02 00:29:28

大変丁寧にありがとうございます。
おっしゃるとおりやってみたところできました!
ただFirefoxだとOKなのですがIEだとサイドバーが落ちるようです。
画像も広げ、本文も広げたら対応可能なんでしょうか

#7.  Hukamin
2006-07-02 09:41:29

>>#6
サイドバーが落ちるのは右端で、本文部分を広げたいということでしょうか。
左右に限らずサイドバーなどが落ちる原因として考えられるのは、サイドバーあるいは本文に、width指定した横幅よりも大きな画像などがあり、IEなどブラウザ側で自動的に横幅が伸びて表示されている場合などですが、それを小さくできないのならば、横幅を変更するしかないと思います。
#banner,#subbannerに指定されている画像の横幅が740pxなので、この画像を変更して、その横幅を、CSSの740pxの箇所に全置換すると楽だと思います。

場合によっては「.date」の画像の横幅も広げた方が見映えが良いかもしれません。
面倒ならば例えば文字を右寄せにして、paddingの指定を変更すれば、見映えを整える事ができると思います。

また、その際、#contentの横幅を「全体の幅-380px」
#wrapperの横幅を「190px+#contentの横幅」にしてください。

#8.  Hukamin
2006-07-02 09:49:45

>>#7補足
画像を変更せずに、はみ出している箇所のCSSの指定に「overflow:auto(あるいはhideen);」をつけるという方法もありますが、残念ながらMac IEでは対応していなかったり、スクロールバーが表示されたり、一部が非表示になって切れているのは困るという場合には、素直に画像のサイズなどを変更するしかないと思います。

2006-07-02 09:52:00

原因わかりました。blogclickが犯人っぽいです。
テスト用のIDでテキスト数文字の投稿&プラグインも使ってないので他に犯人なさそうです。
画像はなんとでもなるのでとりあえず幅広げてみます。

トラックバック(2)

トラックバックURL: