解決済

clip!clip!
Ads By Google

2カラム→3カラムへは?

いま使っているデザインの2カラムを3カラムに変更したいのですが、どうすれば出来ますか?
詳しいサイトでもいいので教えてください

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

回答(1)

2.

2006-02-24 00:41:48ベスト
「Pink Pigeon」ということだったので、試しに挑戦してみることにしました。事例として挙げます。

ブログの投稿画面で、上のメニューから「カスタマイズ/管理」を選んで、左側の「デザインの設定」を選びます。3段組のデザインなら何でも良いので、例えば「シンプル」の「Liquid Pearl (3カラム) 」を選んで、「デザインを変更する」ボタンを押します。次に、左上の方、「ブログに設定を反映(再構築)」を選び、「再構築する部分を指定」というのが下の方にあるので、「インデックス(トップの記事)」を選んで「ブログを再構築する」というボタンを押します。

もう一度、元の「Pink Pigeon」に戻すため、左側の「デザインの設定」から、「イラスト」、「Pink Pigeon」を選び、「デザインを変更する」ボタンを押します。再度、「ブログに設定を反映(再構築)」を選び、「再構築する部分を指定」というのが下の方にあるので、「デザイン(CSS)」を選んで「ブログを再構築する」というボタンを押します。

この状態でブログを確認すると、2段組のままだけど、左下の方に、本来3つめの段組みとなるものが表示されているはずです。しかし、右側に出ているものが本来は左で、下に出ているものが右側に来ないといけないようです。もう一息です。

「デザインの設定」を選び、画面の一番右下に、「カスタマイズ」があるので選択します。まずは「content」というのを探してください。content自身も修正しますが、さらにright、left、wrapperというものを追加します。下のものをそのままコピーして貼り付けると良いでしょう。

修正前の例)
#content{
width:480px;
float:left;
}

修正後の例)
#content{
width:310px;
float:left;
}
#right{
float:left;
width:180px;
}
#left{
width:180px;
float:right;
}
#wrapper{
float:right;
width:500px;
}

終わったら「この内容で保存する」をクリックして保存。「ブログに設定を反映(再構築)」を選び、「デザイン(CSS)」を選んで「ブログを再構築する」というボタンを押せば完了です。

しかし、デザイン上、本文の幅は310pxしかありません。ちょっと狭いです。ちなみに、全体を長くしても良いのですが、背景画像とトップにある鳥の絵を作り替えないといけないので手間です。ちょっと消極的になってしまいます。
Ads By Google

コメント(9)

2006-02-23 22:32:40
2006-02-23 22:33:32

変更元のテンプレートも書いてみてください。多くは難しいのでやらない方が無難です。

#3.  ゆうう
2006-02-23 22:55:04

コメントありがとうございます。

テンプレートはPink Pigeonです。

#4.  SV
2006-02-23 23:24:19

Pink Pigeonは横幅が狭いデザインなので、3カラムにすると、本文(記事部分)もサイドバーと同じくらいの幅になります・・
幅を広げることもできますが、背景の画像も修正しないとデザインがくずれます><

#5.  ゆうう
2006-02-23 23:37:13

SVさん、ありがとうございます。
そうですか、初心者では到底無理ですね。
では諦めて3カラムを探すことにします。

2006-02-24 00:43:22

http://blog.livedoor.jp/testuser1/
うちのブログでやってみました。SVさんも書いてらっしゃいますが、本文が狭いです。一応、今後、同じ質問をされる方もいらっしゃるでしょうから、ヒント程度に。

2006-02-24 00:44:26

見終えたら言ってください。他の質問に合わせて、再構築しちゃうかもしれません。

#8.  ゆうう
2006-03-02 21:24:55

ありがとうございました

2006-03-02 23:12:04

ベスト回答、ありがとうございます。一応、やってみたので、他の人のためにも参考になればと書きました。ちょっと無理がある感じでした。Pink Pigeonはかわいいですものね。

トラックバック(2)

トラックバックURL: