2004年11月11日 19:39

幅が固定されているテンプレでの3カラム化の一例

livedoorBlogにあるテーマのうち、
 flower_message
はブログのタイトルのところからサイドバー、本体にかけて全体を枠で囲むようなデザインになっていますが、これをこちらで紹介している方法で3カラムにすると、レイアウトが崩れます。
上記の方法はウィンドウの枠の幅を変えるとそれにしたがって真ん中の列の大きさもいっしょに変わるのですが、枠の絵を画像イメージで持っていると画像そのものの大きさは変わらないためずれてしまいます。
なので、こういうタイプのテンプレートを使うときは全体の幅を固定しなければなりません。

その方法はいくつかあるのかもしれませんが、とりあえず以下のようにやってみてできたので紹介します。
#links2 を右からの固定値ではなく、左からどのくらいかという指定の仕方にしています。#contentも同様です。


※追記(04/5/16)
上記の方法はNetFront3.1(Clie PEG-TH55添付のBrowser)で見る場合にも、カラム幅が可変だと右サイドバーが左に寄ってしまうのを固定化する意味で有効であることが確認されました。
(「ぱぱの背中」さんより問題発生解決
※追記(04/5/23)
MacのIEでは真ん中のカラムが右端にずれるので#content の position を absolute にしたら崩れないという報告がありました。
Blog内関連記事
※追記(05/4/11)
 flower_messageを上の方法でやると、IEではうまくできるのですが、OperaなどIE以外のブラウザで見ると背景画像がずれています。背景画像をぴったり一致させることが難しいのですが、bodyの内容を以下のようにするとずれが最小限に抑えられます。(画面全体は左端に固定されます)

body{
margin:0;
text-align:left;
background:transparent url('/_img/flower_message/base.gif') repeat-y 0px;
}



    このエントリーをはてなブックマークに追加

トラックバックURL

トラックバック一覧

1. TH55で見ても、右側のカラムが左に寄らなくなりました  [ ぱぱの背中 ]   2004年05月15日 23:41
以前、Clie PEG-TH55標準添付のNetFront3.1で、このページを見ると、右側のカラムが左によってしまうと報告いたしましたが、今回新しく『小春日和の日差しの中で』で紹介されている手法で、無事解決してしまいました。 右からの相対位置指定がうまくハンドリングできなか
2. 3カラム化成功か??  [ ふるーつがーでん ]   2004年05月17日 00:11
幅が固定されているテンプレでの3カラム化の一例:小春日和の陽射しのなかでで、このテーマ(flower_message)を3カラムにする方法を教えていただきました。 Mac版 IE 5.2では、きれいに3カラム化出来てるようですが、またまたsafariではうまくいきません... ということ
3. 進化  [ こぜ日記 ]   2004年07月27日 18:47
やっとできた〜!3カラム\(^o^)/ このスタイルシートkerokeroでは3カラムは不可能!? あぁ、もう別のデザインに変えてやる〜〜〜なんて思ってデザインを物色したりしてたけど、 何てことはない、おいらの設定ミス。 ごめんよ、カエル。 君のせいになんかして悪かった
4. ■3カラム化  [ FUMI@LOG ]   2004年10月13日 21:35
巷で流行っている「3カラム化」をやってみました〜 800x600表示のノートPCでも見れるように横幅も調整。 いかがなもんでしょーか。 参考にさせていただいたのは、以下のBlogです。 >小春日和の陽射しの中で:livedoorBlogで3カラムにする手順[整理版] >小春日和の
5. 3カラム  [ 心愛のきもち ]   2004年10月27日 00:40
http://junike.livedoor.biz/archives/609550.html
6. 続続3カラム  [ 心愛のきもち ]   2004年10月27日 13:23
や〜っと表示できました。(T∇T) ウウウ っても、今回はちゃんと計算して手直ししただけなんだけど。 それにしても、ちゃんと自分のテンプレを見て計算(?)して直さないと駄目だったんだね。 全然理解していなくてバカでした。 もしlivedoor Blogで3カラムにしたい方.
7. 一応出来たけどw  [ FFな日記 ]   2004年11月10日 01:24
探していたら小春日和の日差しの中でという方の テンプレートを使い下記のような css にて作成して3カラム化には成功しましたけど プラグインの順番を逆にしないと左側に置こうと思った物が右に 右に置こうと思った物が左になって しまいましたw もしかしたらノ.
8. 3カラム♪♪  [ 化粧品生活〜無料でキレイになってやる!〜 ]   2005年01月21日 15:41
3カラムにしてみました*・ω・)ノ 真ん中が少し狭くなりましたが・・・ (*^^)v v(^^*) ヤッタネッ! それだけです。(-"-; ご参考;「小春日和の陽射しの中で」様(わかりやすくて有名です、参考にさせていただきました、ありがとうございます)
9. ちょっとリニューアル  [ 15分で楽ラクお弁当☆簡単・節約・ダイエット♪ ]   2005年01月23日 13:59
サイトを3段組に変更しました。昨日苦闘?しながら変更作業をしていたので、その時間にこのblogをご覧頂いた方にはご迷惑おかけしました。(結構レイアウト崩れてましたね・・)参考にさせていただいたのは、「小春日和の日差しの中で」http://junike.livedoor.biz/ のblog
10. BLOG名変更  [ TERASUYA spice* ]   2005年03月03日 01:02
お陰さまで念願の3カラムに成功しました! とても参考になりました。ありがとうございます☆
11. 何とか形になったかな?3カラム  [ ブログでコツコツ儲けよう ]   2005年03月04日 02:36
  昨日からすごい時間をかけながらやっと形になってきた3カラム(両サイドメニューバー)。   参考にさせていただいたサイト様は【小春日和の陽射しの中で】さま。 とても丁寧に解説してくださっているのに、なかなか理解できなかった私・・・ヽ(;´Д`)ノ
12. 3カラム  [  * ]   2005年03月05日 21:42
ご迷惑をかけつつ、何となく完成。もういいや、これでって感じ。 で、タイトルをオリジナルに変更。 ・・・。 ここまでするんなら、わざわざシンプルピンクのスキンを使う必要があったのか?っておこられそう。ご、ごめんなさい。(>_<) あとはタイトルが上にのっ
13. やっっっとぉ!!  [ ひとりごと ]   2005年03月06日 07:47
おはようございます〜♪   寝てないせいか、ちょっとハイテンションです(笑)   いま、ライブドアのブログを使ってるんですけど、 3カラム(記事の両サイドにカテゴリを配列するテンプレート)にするための やり方がどうしても分からなくて、 いろいろ検索.
14. 3コ(カ?)ラム化してみました (本日 日記2回目)   [ ★ シャムロックの 'Life is hard だけど Happy' でありたい毎日 ★ ながっ! ]   2005年04月05日 17:02
このブログ少し変ったことお気づきのかたもいらっしゃるかと思います。 昨日、ブログを3コ(カ?)ラム化してみました。 もちろん、私が一人で出来るわけないのですが、とても親切、かつ丁寧にやり方を公開してくれているブログがありました。  出来るわけないと、、
15. 表示のズレについて  [ 15分で楽ラクお弁当☆簡単・節約・ダイエット♪ ]   2005年04月11日 08:23
今までInternet Explorer以外のブラウザでご覧になられていた方にはずっと表示がずれていてご迷惑をおかけしていたと思いますm(_)m今は左端の寄りましたが大丈夫だと思います。「小春日和の陽射しの中で」のjunkieさんにはお世話になりました!お弁当もおいしそうなんて言
16. TOPページを3カラム化失敗談  [ Blog生活 めざせ月給○○円! ]   2005年05月03日 15:15
僕は、やっぱり初心者だ…。 HTMLは、多少触った事があるものの、CSSは、さっぱりでした。 小春日和さんの『livedoorBlogで3カラムにする手順』のおかげで、なんとか3カラム化が出来ました。ありがとうございます。 しかし、デザインのテーマにもよるのか、このままでは

コメント一覧

1. Posted by ちぇりあす   2004年05月16日 19:51
こんにちは
いろいろ試していただいてありがとうございます。
こちらの記事の囲み部分をコピーさせてもらって
スタイルシートを変えてみたのですが、真ん中の記事部分が
とても幅広(画面の3/4くらい?)になり、サイドバーと
重なってしまいます。
サイドバーの配置はなんとか両端に位置しているようですが。
(少しのずれはあるようです)

コピペの方法を間違えているのでしょうか?
2. Posted by ちぇりあす   2004年05月16日 20:45
成功しました!!
ありがとうございます。
ただいま 微調整中です。

お恥ずかしながら、私のしょーもないミスのせいでした。
スタイルシートの中にコメント→<!-- -->を入れていたせいみたいです。
もしかすると、最初の方法(真ん中も固定しない方法)で
うまくいっていたかもしれませんね
その時、コメントを入れていたかどうか思い出せませんが...

本当にお騒がせしました。
ありがとうございますm(_ _)m
3. Posted by 潮風   2004年06月20日 19:15
こんばんは。台風なので家でじっとしています。(T_T)

お礼が遅れましたが、先だってアドバイスいただきました↑上記の手法を用いまして、再びCSSを修正、ほぼ理想の形に仕上がりました。

サイトリニューアルの際、これからは気分と雰囲気で「真ん中を固定するタイプ」と「可変にするタイプ」を使い分けていくつもりです。

いろいろとありがとうございました。m(__)m
4. Posted by thorn_rose   2004年06月25日 02:04
参考にして、必死で、やっとできました♪
ありがとうございました。m(_ _)m
5. Posted by cozy   2004年07月27日 17:45
はじめまして。
junikeさんのサイトを参考にして3カラムにチャレンジ中です。
すごく参考になります。
私のスタイルシートテーマはkerokeroですが、
どうもメインの部分も画像として領域が取られているのか、
右カラムが下に落ちてしまいます。
3カラムに分ける前はサイドバーが落ちるということはなかったので、
原因を掴みまねてます。
私の設定ミスなのかどうか、、、。
もう少しチャレンジを続けてみます。
6. Posted by cozy   2004年07月27日 18:52
↑のコメントの自己レスです(^^ゞ

私の設定ミスでした。
なんともお恥ずかしいミスで。。。
(私の場合(kerokero)、commentもpossition:absolute にする必要があったようです。)
結果、3カラム成功しました!

ありがとうございました!
7. Posted by junike   2004年07月27日 20:54
cozyさん、とりあえずできてよかったです。
>私の場合(kerokero)、commentもpossition:absolute にする必要があったようです。
commentではなくてcontent?
個別記事での3カラム化もがんばってください。
8. Posted by cozy   2004年07月27日 21:23
>commentではなくてcontent?

はっ、そうです。contentでした。

>個別記事での3カラム化もがんばってください。

はい、どうもありがとうございます。
がんばります!
9. Posted by cozy   2004年07月28日 21:59
リンク先、記事に飛ぶように修正しました。
失礼いたしましたm(__)m
ご連絡ありがとうございます。
10. Posted by こじママ   2004年10月19日 09:37
はじめまして〜!
こちらのブログを参考にさせていただいて3カラム化に挑戦してみました〜。なんだか、まだ調整の余地は感じているのですが、どこをどうすればそれが実現できるかはっきりわからず、そのままになりそうな予感です…。
とても丁寧にサンプルまで置いてくださっているので1時間弱でできました。ありがとうございました〜♪
11. Posted by 心愛   2004年10月28日 10:16
junikeさん、わざわざありがとうございました。
最新の日付の背景、やってみたら無事に直りました。
本当にありがとうございました。
12. Posted by Yuz   2004年11月09日 23:26
トラックバックまで…本当にいろいろお手数をお掛けして;
ありがとうございました!
13. Posted by はっぴーあき   2005年01月13日 20:05
はじめまして。

3カラム、完成しました!
とってもわかりやすく解説してあり、
スムーズにできあがりました。

ライブドアのブログを始めて、
ずーっと悩んでいたのですが、
これで解決です。

ありがとうございます!
14. Posted by みー   2005年02月07日 12:07
 はじめまして。昨日、このブログの通りに3カラムに挑戦してみたんですが、自分のパソコンのマックのIEではデザインが右にずれただけで3カラムになりませんでした。でもサファリだと3カラムなんですが、左側のサイドバーの文字や画像がずれてしまいました。どこを調整すればいいのでしょうか。教えて下さい。宜しくお願いします。
15. Posted by junike   2005年02月07日 19:55
>みーさん
CSSを拝見しました。
#countainer と #content に position: relative; がありませんでした。
また、 #content の左右に margin がありません。
特に、前者の  position: relative; についてはMac版IEでも崩れないように対策して入れたものですから、とりあえずこれだけでも入れてみてください。
もう一度「3カラムにする手順[整理版]」 http://junike.livedoor.biz/archives/33322.html をよく読んでやり直してみてください。
16. Posted by ボンボン   2005年03月01日 20:48
うーん。すいません、自分なりにこちらの記事を何度も読みながらいろいろやってみてるのですが。やっぱり。。。もし、可能でしたら、教えてください。
まず、両端にカラムがはみ出たり、逆に真ん中の記事の部分にかかったり、可変にするとタイトルバナーがずれたりで、少しづつくなってきているのですが、何か根本的にまずいところがあるようで。
バックグラウンドカラーを、この際白にしてしまおうか、とも考えましたが。。。きれいにできるのであればしたいのです。すいません、良かったら見てください。
17. Posted by junike   2005年03月01日 23:55
>ボンボンさん
たしかにこれは難しいです。
どこをどう変えればいいのか微調整が多すぎて1つ1つ指摘できないので丸ごとテキストファイルを参照してください(とりあえず丸ごとコピペしてみてください。独自にCSSを追加した部分があればそれも追記して)。

http://junike.livedoor.biz/CSS_3C_simple_pink.txt

ポイントは .blog や .calendartable にwidthが固定で割り当てられていたのでそれを調整したところでしょうか。
18. Posted by ボンボン   2005年03月02日 14:44
大感激ですーー。ありがとうございましたっ!
・・・。ちなみに、バックをしろって、どこで設定したのですか?
ここかな?とおもって。#contentに追加されてるカラー設定をいじったら違いました。(;´ー`)

ちゃんと勉強しないとなあー。。。 junikeさん、尊敬します!いろんなページ見ただけでわかるなんて。
19. Posted by junike   2005年03月02日 20:46
>ボンボンさん
見ただけではわかりません。。
いろいろ試してます。
バックを白というのは全体の背景ということでしょうか?
であればいちばん上の body の background に白を指定すればいいと思います。元々画像を指定しているので両側がピンクの背景になっているものです。それを外して。
20. Posted by ボンボン   2005年03月05日 18:53
junikeさん、ありがとうございます!
見ただけじゃないのですねー。ますます尊敬します。

あれ?バックを白に設定してくださってなかったのですね?白になってるので、何かしてくれたんだ、と思ったんです。考え過ぎだった。。謎が謎を呼ぶなあ。。。3カラム
21. Posted by junike   2005年03月05日 19:01
>ボンボンさん
あれ?上に貼ったCSSテキストファイルでは背景の色については何もやってなかったと思うのですが。
多分お互いどこを指しているのかすれ違ってるかもしれませんね。
22. Posted by ボンボン   2005年03月05日 21:05
junikeさん
なんどもすいません。多謝です。(;_;)

私はmacでサファリで見てました。それだとセンターに来てるけど背景が白。
IEだと、左にずれてるけど、背景はピンクでした。

む、難しすぎます、私には。。。いろいろありがとうございました。
23. Posted by junike   2005年03月05日 22:46
>ボンボンさん
すれ違ってる意味がわかりました。
Macで見るとそうなるんですね。
Macでの見え方、それもブラウザごとに違ってたりするので、それをきちんと見えるようにするには難しいです。それをきちんとやろうとするとここはMac用の記述、それ以外はこういう記述というように分けなければなりません。
そうするにはWindowsPCとMacPCの両方を持っている環境で見比べながらやらないとできないので、ぼくはできないです。Macがあればいいんですけどね。

上のコメントの実験用BlogのURLは削除しました。
24. Posted by kick   2005年03月18日 01:22
初めまして。最近よく見かける3カラムとはなんぞやと思い、検索してたどり着きました。
頭悪いくせに興味津々でいじったらもう大変なことになってしまいました(´・ω:;.:...

自己解決できないくせに手を出した罰なのでしょうか(汗
どなたか助けてください・・・_| ̄|○
25. Posted by junike   2005年03月18日 11:56
>kickさん
「3カラムにする手順[整理版]」 http://junike.livedoor.biz/archives/33322.html も読んだ上でのことだとは思いますが、具体的にどこがどううまくいっていないのかがわかりませんとアドバイスもしようがありません。
26. Posted by kick   2005年03月18日 16:03
>junikeさん
すみませんでした。もう一度最初からやり直したら無事にできました。
上手くいかなった箇所は右カラムが下になってしまい、幅が画面いっぱいに

なってしまった事でしたが、途中で再構成したのがわるかったみたいです。
ありがとうございました(*_ _)ハズカシィ・・・
27. Posted by junike   2005年03月18日 20:30
>kickさん
とりあえずできてよかったです。
そうでしたね。うまくいかなかったときはもう一度最初からやり直すというのが鉄則ですね。
28. Posted by ユーゴ   2005年04月01日 16:29
はじめまして、junkieさんの記事を参考に3カラム化にして
ちょこちょこ修正したりはしているのですが、
個別記事を表示するときに記事によっては
両サイドのカラムが途中で切れてしまって表示されないのですが、
これはどういった箇所を修正すればよいか
よかったら教えていただきたいと思っています。
よろしくお願いします。
29. Posted by junike   2005年04月01日 22:12
>ユーゴさん
個別記事の3カラム化自体、ぼくのところではやったことがないのでわかりません。
おそらく真ん中の記事(コメントやトラックバックを含む)の長さが短すぎるとそうなるのではないかというようなことはユーゴさんご自身でも気づいているかと思います。
だとすればちょっとだけバランスは悪くなりますが、左サイドバーを少し意識して長めにしてみたらどうでしょうか。
そのくらいしかわかりません。
30. Posted by ユーゴ   2005年04月02日 01:44
お返事どうもです。いろいろ調べて試してみますね。
見当違いな質問にもかかわらずありがとうございました。
31. Posted by junike   2005年04月02日 10:30
>見当違いな質問にもかかわらずありがとうございました
いえ、とんでもないです。

>いろいろ調べて試してみますね
わかりましたら、教えてください。
32. Posted by まつもと由季   2005年04月10日 11:17
はじめまして、junkieさんの記事を参考に3カラム化に成功しました。リンクも貼らせて頂いてます。
私はflower_messageを使っているのですが、IE以外のブラウザで見ると、背景が上の部分だけ2重に出てしまうのです。(全体的に左によっているし)自分でもいろいろ試してみたのですが、どうもうまくいかなくて・・junkieさんに見ていただこうと思って書き込みしました。よろしくお願いいたしますm(_)m
33. Posted by ひよこ   2005年04月14日 03:49
はじめまして。
何度やっても、うまくいきません><デザインはnewyearbird04を使っています。

まず初めにプラグインからの設定をしてみました。
が、プラグインの枠の部分だけが真ん中にきてしまい、プラグインのタイトル文字、中身は左に残されたままで、記事の一番下、空白になっているあたりから、ちょっとだけ右に出ている程度。

それでcssでもチャレンジしたんです。
するとプラグインが透過され、記事の部分だけが全体にびよんと伸びてしまい、プラグインの下にも表示されてしまっていたり。

このデザインでなくてもうまくいかず、CSSの知識もないので万事休すの状態です。
もし原因がわかりましたら、教えていただきたいのですが、よろしく御願い致します。
34. Posted by あきら   2005年04月14日 16:00
あきらです。
35. Posted by junike   2005年04月16日 11:04
>まつもと由季さん
<コメント書き込みが復活したようなので再掲します>
そうですね。Operaなどで見るとどうしてもずれますね。
いろいろ試したのですが、どつぼにはまってどうしても一致させることができませんでした。
せめていま見えているよりはずれを小さくする方法として、bodyを以下のようにすると全体が左端にくっつきます。

body{
margin:0;
text-align:left;
background:transparent url('/_img/flower_message/base.gif') repeat-y 0px;
}

36. Posted by junike   2005年04月16日 11:04
(つづき)現在の由季さんのところはIEで見たときにブラウザの幅を変えると幅に合わせて全体が真ん中になっていますが、これはIEでしか有効ではないんです。(というかそういう動きをするIEの方が本来ではないようです)

bodyを上のようにするとIEでも左端にくっつきますが、枠がずれることはありません。
IE以外でのずれが直せなくて申し訳ないですが、ぼくの今日のところの限界です。

ところで、由季さんのブログのお弁当はどれもおいしそうですね。なんて言ってる場合じゃないのですが。。
37. Posted by junike   2005年04月16日 11:18
>ひよこさん
上記のような現象は実際にそうなっているところを見ないとわからない部分もあるのですが、そのまま放置しておくこともできないでしょう。
フリーエリアのプラグインとCSSは両方とも設定しなければなりません。
そのデザインでなくてもうまくいかないとのことですが、とりあえずいちばんクセのないスタンダードの「citrus」で3カラム化の手順を最初から落ち着いてやってみてください。
それでうまくいってもう一度 newyearbird04 でやってもうまくいかなかった場合、 newyearbird04 のCSSにクセがあるかもしれません。今日は時間がないので見ていませんが、それでもうまくいかなかった場合はまたここにコメントください。週末にでも試してみます。

>あきらさん
確認ありがとうございました。
コメント本文の長さが原因だったようです。
いつから制限がついたのでしょう?
38. Posted by norishi   2005年05月30日 01:46
はじめまして!
こんなに親切なブログに出会って感動しています。
私のブログも3カラム化完成!!と思いきや、いまいち修正が必要そうです。もうかれこれ3時間格闘中!!

これ、タイトルの絵を画面真ん中にするにはどうしたらいいのでしょう?
また、真ん中のブログ部分の幅が最新記事とその前のものが違うのは何故でしょうか。
最新記事の幅に全部合わせて(記事最後のカテゴリー名が改行みたいになってしまうので)、クリーム色の部分の幅をもう少し広くしたいんですが、できなーい!!
39. Posted by junike   2005年05月30日 20:12
>norishiさん
タイトルの絵を中央に持ってくるには

#banner,#subbanner {
BACKGROUND: url(http〜.jpg) no-repeat center;
WIDTH: auto;
POSITION: relative;
HEIGHT: 167px;
TEXT-ALIGN: left;
}
としてください。

そして、.blogtitle と .description の両方に text-align: center; を追加すればいいでしょう。

最新記事にだけ広告が表示されているので、他の記事と幅が異なってしまいます。
「Blogの設定」画面で広告表示を「表示しない」にしたらどうなりますか?
あるいは左サイドバーと真ん中のカラムの間が少し開いているので、content の margin-left の数値をもう少し小さくしてみてください。
40. Posted by norishi   2005年06月04日 05:20
junikeさん!
早速のご指導ありがとうございました。
無事タイトルの絵が真ん中になりました。本当に感謝しております

コメントする

名前
 
  絵文字
 
 
お知らせ
★データの入れ替え作業で全記事が二重存在します。修正前のものと後のものが混在しています。
(2007/11/14以前のもの)

■画像について
個別ページで画像が表示されていないページでは記事右上の「次の記事」リンクをクリックすると同じ内容の記事で画像が表示されます。(「ImgRedを利用した引用」の画像はリンクが切れました
プロフィール
中年男性、北関東在住、未婚。05年5月にうつ病発症。現在も療養中。17年11月より午後だけの勤務。補聴器使用者。

Blogカスタマイズネタはこちらにまとめました。

自己紹介 兼 足跡帳

小春日和の意味:「晩秋から初冬にかけての暖かく穏やかな晴天」(こちら[外部リンク]が詳しいです)


※記事やこのブログに関係のないトラックバックやコメントはこちらで削除することがあります。
近況報告
19/3/21up

08年3月よりうつ病。
いくつかの職を経て、17年11月より午後だけの4時間勤務。事務。

最新コメント
月別
カテゴリー別
検 索
Google

WWW ThisBlog
記事検索