１・２カラムを３カラムにする方法

無料新規登録

会員の方はログイン

トピック

コミュニティ

お知らせ

テンプレート・プラグイン

１・２カラムを３カラムにする方法が知りたいです

FC2の共有テンプレートなのですが
今はなくなってしまったようですが・・・・

１・２カラムを３カラムにする方法はありますか？

cssなどの特定部分に何かを入れてみる
などがあったら教えてください

よろしくおねがいします

by 彩希 2011年11月04日 23:20

by 彩希
2011年11月04日 23:20

コメント一覧新しい順に表示▽ / 古い順に表示△

コメント一覧
新しい順 | 古い順

このコミュニティにご参加頂くと、コメントの書き込みができます

>>mushroom_liquid
のような幅の取り方を、kamawanuでやりたいのです

dhw_kamawanuは
ひとつの画像を3つにも4つにも分割して
細かい配置を設定して組み合わせてあるテンプレートなので
リキッドタイプにするのは無理だと思います。

それと前述のカスタマイズ例は
背景の「かまわぬ」柄が繰り返し表示の部分とそれ以外の部分とで食い違っています。

ふと思い立って<html>のカッコ内に
style="background-position-x:-46px;"
こういう表記を加えてみたら、自分のブラウザではズレがなくなりました。
ヒトサマには勧められない無茶なやり方だと思いますが、ご参考まで。

by 標野ゆき 2011年11月24日 12:12

by 標野ゆき
2011年11月24日 12:12
＜スタイルシート＞
body { 中略
background: url(中略) 1130px 0px no-repeat;/* for Modern browsers */
}

#container {
中略
width: 1140px;
}

#header {
background: url(中略) #330000 240px 0 no-repeat;

#main {
中略
width: 600px !important;

#sidemenu2 {
background-color: #f4fdda;
float: left;
width: 200px !important;
width /* for IE5.5 */: 240px;
overflow: hidden;
margin-right: 0px !important;
margin-right /* for IE5.5 */: 5px;
padding: 20px;
}

＜ＨＴＭＬ＞
<body style="margin-top: 0px; background-position-y: 0px;">
<div id="container" style="background-position-x: 240px;">
<div id="header">
中略 </div>
<div id="sidemenu2">

yosoilueさんの指示とおりに編集したテンプレートを
上記のように変更または追加してみたら、ご希望の表示になるかもしれません。

もっとも
これは自分で試してみたときの例なので
誰がどんな環境で試してもうまくいくかは判りません。

#sidemenu2とある部分のスタイルシートは
もともとのスタイル指定とは別に、まるまる新しく追加します。

好みのサイズがこれと違う場合には
それぞれがどの程度の数値増やしてあるかを確認して
自分で計算して編集してください。

by 標野ゆき 2011年11月24日 11:46

by 標野ゆき
2011年11月24日 11:46
お返事ありがとうございます
あと、お返事遅くなり申し訳ありません

このような形にしたいのですが・・・（画像参照願います）
どうしたらよいでしょうか
色々と数値を変えてはいるのですが、なかなか出来なくて・・・

よろしかったら教えていただけると助かります

mushroom_liquid
のような幅の取り方を、kamawanuでやりたいのです

by 彩希 2011年11月22日 14:15

by 彩希
2011年11月22日 14:15
＞　dhw_kamawanu という名前のテンプレートを３カラムにしたいのですが

全く何もそのテンプレートをいじっていない場合の話です。
まず最初に複製を作ってください。そして複製の方でカスタマイズしてください。

ＨＴＭＬの編集で変更したいブログの構造が、
ヘッダー、メイン（記事部分）、プラグイン、フッターとなっていると思いますが、
プラグイン１の部分をヘッダーとメインの間に移動すれば３カラムには出来ます。

<div id="sidemenu">
<p class="logo"><img src="ttp://templates.blog.fc2.com/template/dhw/logo.gif" title="Digital Hollywood & FC2" alt="Digital Hollywood & FC2" /></p>


<dl class="sidemenu_body">

－－－　中略　－－－

</dl>




<dl class="sidemenu_body">

－－－　中略　－－－

</dl>


</div>

赤文字部分はコピーして、青文字部分との位置関係を変えずに下記の位置に挿入してください。

青文字部分を丸ごと移動して、下記の位置に挿入してください。

</div>
ここに挿入してください。
<div id="main">

これで構造的には３カラムになります。
が、幅を調整せずにただ３カラムにしただけなのでプラグイン２は下に落ちます。

幅を調整するためにスタイルシートの

#main {

－－－　中略　－－－

width: 600px !important;

この部分の数値600を360に変更すれば３カラムで下に落ちない状態になります。

by ロギラキ 2011年11月06日 09:25

by ロギラキ
2011年11月06日 09:25
お返事ありがとうございます

　　</div>
　　ここに挿入してください。←</div>
　　<div id="main">

はわかるのですが、プラグイン１はその赤字の前に挿入するんですよね・・・？
それで
　　600を360に変更すれば３カラムで下に落ちない状態
ということで、やってみたのですが、若干落ちてしまうことと
あと、欲を言わせていただければ
モニターの幅を１００％として使いたいのです
多分、このテンプレートはモニターの幅の６０％くらいまででプラグイン・メインが表示されていると思うのですが・・・
モニター全体で左２０％・メイン６０％・右２０％にならないでしょうか？
多分今、私が使っているブログのテンプレートの様に
といった方が早いのでしょうが・・・

よろしくお願いします

by 彩希 2011年11月06日 02:30

by 彩希
2011年11月06日 02:30
dhw_kamawanu という名前のテンプレートを３カラムにしたいのですが
前回の質問ではよくわからなかったので

お願いします

by 彩希 2011年11月05日 02:09

by 彩希
2011年11月05日 02:09
＞　１・２カラムを３カラムにする方法が知りたいです

お使いになっているテンプレートの話ではないのでしょうか？

カラムとは、通常は下記のマニュアルにあるような認識だと思います。
http://fc2blogmanual.blog60.fc2.com/blog-entry-3.html#more

したがってお使いになっているテンプレートは３カラムだと思います。

もしくは別のテンプレートを３カラムにしたいのならばそのテンプレート名を書かないと回答はしにくいとは思います。

というか同じ質問ではないのでしょうか？
http://blog.fc2.com/forum_community/topic/12605/46292/

by ロギラキ 2011年11月05日 01:59

by ロギラキ
2011年11月05日 01:59