「3カラム化する手順」にいただいたコメント
livedoorBlogで3カラムにする手順[整理版]」にいただいたコメント
コメント数が多くなり表示が重たくなったのでこちらに移しました(Q&Aで対になっているものは元の記事にも残し、こちらにも移してあります)。
これから少しずつこちらに移動します。
もし万が一リンク先が間違っていましたら元の記事の方にコメントください。

この記事へのコメント
livedoor Guide以上の丁寧な説明ですねぇ。
ごくろうさまでした。

アフィリエイトな方だと、空いている"#footer"領域もうまく活用できるといいですね。
Posted by kyorecoba at 2004年01月06日 12:43
とても詳しく説明されていて参考になりました。
ありがとうございました。
まだCSSに手を付けたばかりなので、
これからがんばってやっていきたいと思います。
Posted by ケンジ@smokin' at 2004年01月28日 17:47
とても参考になりましたありがとうございました。
Posted by のりすけ at 2004年02月11日 09:05
すいませんミスってトラックバック4回も同じの送っちゃいました。
わざとじゃないんでよろしくお願いします・・・
Posted by のりすけ at 2004年02月11日 09:24
のりすけさん、3つトラックバックを消しました。
Posted by junike at 2004年02月11日 13:01
ども、雅楽多blogのぐっちです。

先日、こちらの記事と「パンパでガウチョ」を参考に3カラム化したのですが、私の知人で右サイドバーと真ん中が重なってしまうという人がいたので御報告します。
その人の環境はMAC OS X IE5.21 1280x960 です。

雅楽多blog(今は3カラムは休止してます)、小春日和の陽射しの中、パンパでガウチョで確認してもらいましたが、いずれも右サイドバーと真ん中が重なってしまうそうです。

知人の環境のせいなのかもしれませんが、いちおう御報告しておきます。
Posted by ぐっち at 2004年02月16日 00:03
> junikeさんへ
こんばんは、eNOTEのBaySkyです。
私の「フリーメモ」プラグインを利用した3カラムを紹介いただき感謝します。
Posted by BaySky at 2004年02月18日 20:23
今晩は、hrak13です。
トラックバックにて、連絡ありがとうございました。

近くにMacのマシンを持っている人がいたので、自分のblogをチェックしてみたところ、
「真ん中のカラムが右サイドバーあたりまで伸び、表示が崩れる」ことはありませんで、
ちゃんと上手く表示していました。

自分の所では、真ん中のカラムは可変幅でなく、固定幅なのですが、そのせいでしょうか??
ちなみにMacOS9、IE5.1です。
Posted by hrak13 at 2004年02月18日 21:37
たびたび、すみません。
パンパでガウチョさんのエントリーでも、中央のカラムの固定幅のこと書かれていましたね。
http://blog.livedoor.jp/kyorecoba/archives/132041.html
申し訳ない。。
Posted by hrak13 at 2004年02月18日 22:08
3カラムに挑戦したくてやっとここにたどりつけました。
とてもわかりやすい説明で、大変参考になりました。
ありがとうございました。
Posted by nikoji at 2004年03月13日 23:36
先日コメントをいただき、ありがとうございました。
お言葉に甘えて、また聞きに参りました。
3たび挑戦しましたが、やはり画像が表示されていません。(;>_<;)
ALTでコメントは表示されてるのですが、なぜでしょう?
Posted by ワッキャン at 2004年03月20日 10:35
初めまして。
3段コラムをやりたくて、あれこれ試行錯誤でやっておりましたが、なかなか思うようにいきませんでしたが、こちらのサイトに紹介されている手順道理にやりましたところ、いとも簡単にできました。
感謝感激です。
どうもありがとうございます。
Posted by 緒栖川 at 2004年03月22日 05:58
はじめまして!
こちらを参考にさせていただいて、あこがれの3段カラムに変更しました。
とってもわかりやすく書いてあって、超初心者の私でも簡単にできました。
ありがとうございました。
Posted by micio at 2004年03月23日 17:37
junikさん
ありがとうございました。感謝しています。CSS初心者でわからない事ばかりで今後勉強します。
Posted by zacky at 2004年03月25日 12:17
はじめまして。
3カラムに変更するため、こちらを参考にさせて頂きました。
ありがとうございました。
Posted by ICHIKEI at 2004年03月27日 13:08
コメント頂き感謝です♪
何とか私も3カラムに出来たなんて感激です。最初読んだ時は
難しそうなのでどうしよう。。。とちょっとビビッたのですが。
でもまだまだ知りたい事一杯〜なので、今後も色々参考にさせて
頂きます!!
Posted by みっしぇる at 2004年03月29日 19:04
いや〜、僕のblogをチェック頂いているとは思ってもみませんでした。アドバイス有難うございました。また、BlogPeopleにも登録頂きまして光栄です。
また、今後もアドバイス宜しくお願い致します。
Posted by zackyblog at 2004年03月30日 13:34
前からずっとしたかったけど、挫折していた3カラム化がやっと出来ました!
ほんとにいい記事をありがとうございました〜。
Posted by 武魚 at 2004年04月07日 23:14
はじめまして。手順を参考にさせてもらい何とか3カラム化
できました!ありがとうございましたー。
今後とも参考にさせていただきま〜す。
Posted by taka at 2004年04月16日 19:55
はじめまして、モダチョキと申します。
こちらの3カラムの記事を参考にさせて頂きました。
とてもわかりやすい説明で無事3カラムにする事が出来ました!
また参考にさせて頂く事があるかと思いますので、
今後とも宜しくお願い致します。
Posted by モダチョキ at 2004年04月17日 04:31
コメント&チェックありがとうございました。m(_ _)m
さっそく修正してみました。
リンクの確認したつもりでしたが、してなかったみたいです…。
すいません…。p(. . ;
また参考にさせて頂く事もあるかと思いますので、
その時はよろしくお願い致します。
Posted by ribbit at 2004年04月19日 23:46
はじめまして、marukといいます。
影ながら(失礼ですが)、たびたびブログを覗かせて貰ってました。
特に、3カラムの記事は大変参考にさせて頂きました。
今頃になって、お礼を言うのは失礼ですが、ぜひコメントを残したくて
こちらに書き込んでいます。
どうもありがとうございました!
これからもいろいろと参考にさせて貰うかもしれませんが、
よろしくお願いします。それでは。
Posted by maruk at 2004年04月21日 08:22
はじめまして。
こちらの記事を参考にさせていただき、なんとか3カラム化することができました。
本当にありがとうございました!!!

BlogPeopleにも登録させていただきました。
これからもいろいろ参考にさせていただくことがあるかと思いますが、どうかよろしくお願いいたします。
Posted by bonfauteuil at 2004年04月25日 13:53
Blog初心者の私でも、3カラム化できました。
ありがとうございました。
勝手ながら、うちの「お役立ちリンク」に登録させていただきました。
これからも、便利な技を楽しみにしております。
先達はあらまほしきことなり。
Posted by 親バカ父さん(仮名) at 2004年04月30日 23:11
はじめまして。
こちらの記事を参考に3カラム化出来ました。
ありがとうございました。

ただ、livedoorのテンプレートvivaceをもとにしたCSSなのですが、
ここにある手順で3カラム化すると、日付と記事のタイトル下のボーダーが反復されて、
記事本文中にボーダーがかかってしまいました。
元のテンプレートvivaceをそのまま3カラムにしても、同じ現象が出ました。
このテンプレートのCSS内の
.dateのborder-bottomが反復します。
サイドバーを2つに分けるJavascriptが作用しているんでしょうか。
素人なので、単なる推測です。

とりあえず

.blog{
   padding:15px 0 15px 0;
   border:solid 1px #fff;
   }

と、真ん中部分をボーダーで囲んだら、解決しました。
厚かましくも、ご報告まで。
Posted by タロウの飼い主 at 2004年05月04日 23:18
ご指摘ありがとうございました。
たしかにタロウの飼い主さんのCSSを利用して上記の border の部分をなくすと
日付と記事の下の部分のボーダーが反復することが確認されました。
しかし、元の vivace でも試してみましたが、こちらではそのような
反復は確認されませんでした(反復されずにうまく3カラムになった)。
なぜだかはよくわかりませんでした。ごめんなさい。
.blog を border で区切ることによって反復が抑えられたというイメージみたいですね。
Posted by junike at 2004年05月05日 00:23
わざわざご確認いただき、ありがとうございます。
お手数をおかけしたようで、かえって申し訳ありません。
Posted by タロウの飼い主 at 2004年05月05日 01:39
ブログ3カラム化してみましたなんとかできました。
junikeさんのブログ「小春日和の陽射しの中で」大変参考になりました。
junikeさん、ありがとう。
Posted by ラクープ at 2004年05月08日 06:53
こんにちは
訪問ありがとうございます
ご指摘いただいてもう一度こちらを読み直して
#containerを入れてみたのですがどうしてもうまくいかず、
(違う崩れ方をしてしまいました)
このテーマでは3カラムは無理なのかな?と思い別のテーマに
してみました。
その結果うまくいきました。
(今回は職場のWindows版IEのみで確認)

もう少しがんばってみれば、できたかもしれないけど
へなちょこですので 断念してしまいました。

ご指摘感謝です。
お世話になりました
Posted by ちぇりあす at 2004年05月13日 21:47
初めまして!!
3カラム参考にさせていただきました。
大変分かりやすかったです。
あとBLOGタイトルを中央に寄せたいのですが・・・
悪戦苦闘しております(^^;
Posted by ひだりうみ at 2004年05月22日 18:21
こんにちは!
遅ればせながらトラックバックさせて頂きました。
content部分を固定にするか可変にするか悩んでます・・・
また寄らせて頂きますね!
Posted by hiroxhiro at 2004年05月22日 19:07
初めまして!
今日、3カラム、ここをかなりかんなり参考にさせていただき、
なんとか両サイドに分けることはできましたm(__)m
あと・・欲を言えば・・
。贈味錬妊織ぅ肇襪鬟札鵐拭爾砲靴燭ぁ
記事の幅をもう少し狭くしたい。
のですが(><)
どこをどう触ればいいのかさっぱりなのです。
もし解決できるようであれば、お教え願いませんか?
よろしくお願いします!
Posted by ゆうこ at 2004年05月22日 23:10
>ひだりうみさん
Blogタイトルを中央に寄せるには

.blogtitle {
TEXT-ALIGN: center
}

を追加すれば中央になります。

>ゆうこさん
Blogタイトルのセンター化は上記のとおりです。
記事の幅を狭くするには
#content の width を 440px などの数値にすれば
固定化されます。
記事の部分をウィンドウの幅に合わせて可変のままで記事部分を狭くするなら
#content の PADDING を
 PADDING: 0px 30px 0px 30px;
などしてみたらどうでしょうか?
(上、右、下、左の順なので記事部分の内側左右に30pxの余白を入れています)

教員採用試験、がんばってくださいね。
(ぼくは今年の3月末までバイトで情報教育アドバイザーとして小学校にいました)
Posted by junike at 2004年05月23日 00:29
junikeさん、ありがとうございます。
さっそくやってみました。
BLOGタイトルは中央に来ましたが、
左のサイドバーまで中央に来ちゃいました・・・
どうしたらいいですか?
ほんと素人ですいません。
Posted by ひだりうみ at 2004年05月23日 00:53
.blogtitle{<HR SIZE="1" style="border-color:#66cc00;border-style:solid;" WIDTH="300">
color:#000;
font-size:30px;
font-weight:bold;
text-decoration:none;
margin:55px 0 0 15px;}
の中に入れればよいのでしょうか?真ん中に行きません・・涙
あと、幅も変わらないんです(><)
難しいです〜
Posted by ゆうこ at 2004年05月23日 02:44
>ひだりうみさんとゆうこさん
ごめんなさい。2つ前のコメントは flower_message テンプレートで
幅が固定化されているときにためしてうまくいったのでそれを書いたものでした。
真ん中のカラムが可変でBlogタイトルを真ん中に持ってこようとして
.blogtitle の TEXT-ALIGN を center にすると
ひだりうみさんのおっしゃるように左サイドバーまでいっしょに中央に来てしまいます。
Blogタイトルだけ中央にもってくるのをどうやるか少し試しましたが
全体の幅を固定させるしか方法がわかりませんでした。

#container{
position: relative;
width: 800px;  /*←ここを好きな幅に数値で固定*/
margin:0 auto 0 auto;
padding: 0;
text-align:left;
}

こうしてから.blogtitle の TEXT-ALIGN を center にすると
左サイドバーは左にあるままBlogタイトルだけ中央に来ます。
「.blogtitle の TEXT-ALIGN を center にする」とは、下のように
'{' と '}' の間に入れることです。

.blogtitle {
PADDING-RIGHT: 60px;
PADDING-LEFT: 0px;
FONT-WEIGHT: bold;
FONT-SIZE: 24px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 135px;
TEXT-ALIGN: center; /*←こういう具合に*/
}
固定幅のやり方は↓の記事を参考にしてください。
http://junike.livedoor.biz/archives/609550.html

>ゆうこさん
真ん中のカラムの幅を狭くするなら margin や padding の数値を
調整すればできると思うのですが、上記の固定幅のやり方でやるなら
仮に #links(左サイドバー) の幅が 180px で左marginもpaddingも 0px だとしたら
#content {
left: 200px; /*←左サイドバーとの差が20px分、間があく*/
width:440px; /*←ここを好きな幅に*/
LINE-HEIGHT: 140%;
PADDING-TOP: 0px;
POSITION: relative
}
としてもいいのではないでしょうか。右サイドバーの始まりの位置も調整して。

Blogタイトルをおもいきって画像でつくってやるなら
↓「パンパでガウチョ」さんの「Blogのタイトルをロゴに」
http://blog.livedoor.jp/kyorecoba/archives/84102.html
にするといいでしょう。すきな位置に置けると思います。

あとは、「livedoorブログ掲示板」で聞いてみるとか。
http://messages.livedoor.com/board/?s=138

Blogタイトルセンター化はもしかしたらうまくいく方法があるのかもしれませんが、ぼくの知識ではここまでです。
Posted by junike at 2004年05月23日 11:39
junikeさん
ご親切にありがとうございました。
CSSもっと自分でも勉強してみようと思います。
これからも宜しくお願いします。
Posted by ひだりうみ at 2004年05月23日 12:06
ありがとうございます!!!
でも・・やっぱり無理みたいですT−T
なにかの情報が邪魔をしているのでしょうか・・

でも、いろいろと知識がつきました!!

今日はこれまでにして、勉強します〜(><)
Posted by ゆうこ at 2004年05月24日 10:29
はじめまして。Macユーザーのまることいいます。
5月からblogに乗り換えして、今回、3カラムに挑戦してみました。
画像付きでの説明、本当に助かりました。
また「コピペ用」とまで、かゆいところに手が届いたので嬉しかったです。
ありがとうございました。
Posted by まるこ at 2004年05月25日 21:26
せっかく3カラムにしたんですけど・・
なんだか表示がおかしくなってる人がいるとのことで
いったん、元に戻しました 涙★(T-T)
Macの人でも見れるはずですよねー?
XPのIE6.0もだめだったみたいで。
あたしにはちゃーんと見えてるのに・・
なんででしょう!?
Posted by ゆうこ at 2004年05月26日 23:16
3カラムにするにあたって本当にこちらにはお世話になりました。
まだまだ改善するところがたくさんあるのですが、自分なりに初めてカスタマイズ的なことができてうれしかったです。
本当に基本的なことは何も理解していないのですが、自分の画面と見比べる事が出来たり、コピペ用の記述があったり大助かりでした。
どうもありがとうございました。(仕事に出かける寸前に慌てて書いた記事ゆえTBが遅くなりました。ごめんなさい。)
Posted by yotsuba at 2004年05月27日 21:09
潮風と申します。
当方の拙作ブログを3カラム化した際にたいへんお世話になり、TBもさせていただきました。
また当ブログにTBのご返答までいただきまして、本当にありがとうございます。

CSSの書き換えは死ぬほど面倒ですが、その達成感たるや。(^-^)/
また次回の変更では中央の固定化も試してみようと思っています。
でも、現在の「可変」の形も結構気に入ってしまいましたので、いつになることやら。(汗)

これからもよろしくお願いします。
Posted by 潮風 at 2004年05月29日 00:58
junikeさん。お世話になります。
どうにか落ち着きました。というか・・これ以上、無理^_^;。
色々と参考にさせて頂いてわからないながらもお勉強できました。
本当にありがとうございました。
Posted by まるこ at 2004年05月29日 23:07
こちらのHP参考にさせて頂きまして、何度かTRYしたのですが
何度やっても右コラムが真っ白になってしまいます・・・。
(HPそのままにしてます・・)
そしてInvalid CharactorというIEもメッセージもページがロードする時に出てきます。
どうしてこのようになるかお分かりになりますか??
お手数ですがご教授頂けたら幸いです。

Posted by Sistah at 2004年05月31日 05:55
>Sistahさんへ
左カラムの最後プラグインのあとに入れるjsファイルですが、
たった一行
 document.write('</div><div id="links2">');
とだけあればいいのですが、拝見したところこれの前後にごちゃごちゃ
いろいろなものがついているようです。
それらをなくしてもう一度トライしてみてください。
何で作られたかわかりませんが、メモ帳のようなもっとも単純な
テキストエディタで開いてみてください。
おそらくワードパッドで作って、rtfというリッチテキスト形式で保存して
拡張子をjsにしたのではないでしょうか。
ためしにやってみたら同じようなものができたのでたぶんそうでしょう。
メモ帳でやってみてください。
Posted by junike at 2004年05月31日 19:56
うわああ!!
出来ましたあああ!!(すいません感激してまして・・)

Junikeさんどうも有難うございます!
もう数週間TRYしてボロボロになってたので
この喜びは言い表せないです。

本当に有難う御座いました。
Posted by Sistah at 2004年05月31日 22:40
いいえ、どういたしまして。
喜んでいただけてこちらとしてもうれしいです。
Posted by junike at 2004年05月31日 23:14
はじめまして。
こちらのブログで、3カラムの方法を勉強させていただきました。
とても分かりやすかったです。ありがとうございました。
(BlogPeopleにもいれさせていただきました。)
Posted by mis at 2004年06月06日 21:23
junikeさん、ありがとうございました。
どうしてもわからなかった所が良くわかりました。
本当にありがとうございます。感謝感激(嬉泣
Posted by gee at 2004年06月08日 00:35
ブログ作ってみようと思ってまだ2日。
スタイルシートも良くわからないまま
どうしても3カラムにしたくて
1日中ガチガチガチガチ頑張ってたんですけど
このページを見ながらやったら
3カラム出来ちゃいました!!とっても解りやすかったです。
本当にありがとうございました。
Posted by なっちょん at 2004年06月08日 16:50
このページのおかげで、自分も3カラムにすることが出来ました。
どうもありがとうございました!
Posted by 祐一郎 at 2004年06月09日 04:46
こちらのわかりやすい説明のおかげで、スムーズに3カラムに移行することができました。ありがとうございました!
Posted by mui: at 2004年06月15日 01:55
僕もこちらの記述をコピペさせて頂きました。
ありがとうございます!!
Posted by z_rahen at 2004年06月16日 19:44
大変参考になりました!
ただいま大学の授業でブログを作っているのですが、
授業ではCSSとかほとんど知らずにやってる人たちが多いので、
なかなか質問できなかったのですよ。
(もっと基本的なことを少しずつ消化している--文字の色の変え方とか(^^;。。)
私はCSSもJavaScriptも一応わかるので、
こちらのサイトの説明で、理屈から理解することができました。
かなり満足のいくレイアウトになりました。
本当にどうもありがとうございました!!
Posted by すい at 2004年06月18日 15:51
>すいさん
ここでは手順本位で理屈はほとんど書いてないのですが、
参考になったようでよかったです。
しかし、大学の授業でブログをやっているとは。。
ぼくの学生時代は情報処理の授業ではFortran(←こんなつづりだっけ?)でしたから。。
Posted by junike at 2004年06月18日 23:12
よかったらMiniVOTEの設置方法も教えてくれるとうれしいです。
しかし、このブログは可能性が広がってます。
ブログがとてもいいものだと感じさせてくれます。
Posted by lonely boy at 2004年06月19日 02:52
3カラムへのカスタマイズ、とてもわかりやすかったです。
ど素人なんでそれでも苦労しましたが、
ここでわからなければ諦めようって思いました。(笑)

激しく感謝です。ありがとうございました。
Posted by テヘアキ at 2004年06月21日 20:47
はじめまして、ここのおかげで
やっとうちも3カラムが出来ました。
それと、3カラムでは済まずにここみたいに
左右サイドバーを固定にして記事(content)をスクロール上に
したくてこの項を見てもそれらしき事に関しては載ってなかったんで
困ったんですが、いやはや、4カラムの項に載ってたんですね(^^;

それでは失礼しました。
Posted by ayase at 2004年08月01日 22:11
こんにちは。7月28日にトラックバック
させていだだいた者です。
すいません、せっかくコメントして下さったのに
見落としてました。あれから何とか頑張り、
それなりの形になったと思います。
アドバイスありがとうございました。m(__)m
Posted by koko at 2004年08月04日 17:07
はじめまして。
ここに書かれている通りにやったつもりなのですが、
→御覧になっていただければわかると思いますが、
バグっています。

どう直せばいいですか?
Posted by みっつ〜 at 2004年08月10日 00:30
みっつ〜さんへ
まずスタイルシートがlinks2のところで終わっています。
そこまでで終わりにしてそれより下は真っ白なのではなくて、
該当する行だけを上の手順のとおりに「置き換える」ようにしてください。
(links2の下に続きがある。links2はもともとのlinksの下あたりに
わりこませる感じ)
それからJavascriptファイルの中身がスタイルシートのlinks2が途中まで
のものそのままとなっておりました。
Javascriptファイルには上の手順にもあるように
「document」で始まる1行だけです。
そこに注意してもう一度最初からやってみてください。
Posted by junike at 2004年08月10日 19:40
やってみたんですけど、だめでした。
スタイルシートは、link2以下もちゃんといれました。

document.write('</div><div id="links2">');

は、どこに入れればいいんですか?

ベース的に僕が気に入っていて目指しているものは
http://blog.livedoor.jp/instyle/
のブログです。

これをもう少し、爽やかな感じにしたいのです。

わからないことが多すぎてすいません。
よろしくお願いします。
Posted by みっつ〜 at 2004年08月11日 15:12
みっつ〜さんへ
まずスタイルシートの方は
#countainer
の1行上にある { が余計なので削除してください。
そしたJavaScriptファイルですが、
document.write('</div><div id="links2">');
は1行目に入っていますがそれだけでいいんです。
2行目以下はいらないので全部削除してください。
それをもう一度アップロードしてください。
そのJavaScriptファイルをBlogの管理画面上で
1カラムと2カラムの境目にあたる部分にくるように
順番を変更してください。
デザインについてはここでは触れません。
Posted by junike at 2004年08月11日 20:20
できました!!
こんな感じでいいんですか?
本当にありがとうございます。

あとは、上の画像を変えるだけですか?
お手数ばかりかけて申し訳ないのですが、
画像の変え方と、もし、まだ、間違っているところがあれば
ご指摘願います。
Posted by みっつー at 2004年08月12日 04:04
この記事を参考にして3カラム化ができました。ありがとうございました。
Posted by Alberto at 2004年08月12日 12:28
ヤフオク恋愛マーケティングの熊野です。
先日はありがとうございました。
おかげさまで3カラムもできました☆

一つ質問なのですが、
3カラムにすると表示に時間がかかる
(特に右サイドバーがなかなかでてきません)
のですが、表示スピードを上げるには
どういった方法があるでしょうか?

お時間があるときにでもご回答いただけると
幸いです。
Posted by 熊野 at 2004年08月12日 13:40
>みっつーさん
よかったです。できて。
トップの画像は画像ファイルをlivedoorblogにアップしたとすると
スタイルシートの中の #banner,#subbanner に background-image
として、以下のような感じで指定すればできます。
例:

#banner,#subbanner{
background:#ffaf32 repeat;
border-bottom:1px solid #bd8023;
background-image: url(http://blog.livedoor.jp/mi2/XXXXXXX.jpg);
}

もし高い幅の画像を使った場合、contentやlinks、links2のtopの数値を調整してみてください。

>Albertoさん
3カラム化ができてとりあえずよかったです。
「来訪者数」のJavascriptがおそらく記述間違いでエラーとなっています。

>熊野さん
表示スピードが遅いのは、その右サイドバーに重い処理のものをたくさん
載せていれば遅くなるのはわかると思います。
Javascriptファイルや別のサーバーにある情報を読みに行くような
コンテンツ(amazonやBloglistなど)など。
それらをはずすか数を減らすかすればその分早くなるのかと思うのですが
そのような答えを期待しているのではないと思います。
それ以外の方法でどうすればいいのかは、ぼくにはわかりません。
ぼくのところのBlogの表示も遅いと思うので。
ぼくが受けた感じなんですが、
無料版のURL(http://blog.livedoor.jp/junike など)が
ぼくの書いたやり方で3カラム化すると表示が遅いような気がしてます。
根拠はないのですが。。
ためしに
http://blog.livedoor.jp/junike/  と
http://junike.livedoor.biz/ を比べてみてください。
有料版にしても遅いのには変わりないかもしれませんが気のせいか少し早い気がします。
Posted by junike at 2004年08月12日 22:45
ご回答ありがとうございます。

これからちょこっといじってみます
Posted by 熊野 at 2004年08月13日 01:35
初めまして
3カラムにしたくて、検索したら
こちらのサイトにたどり着きました。
無事に3カラムに成功しました〜
ありがとうございます♪
Posted by しーた at 2004年08月18日 23:32
とても参考になりました☆
javascriptの設定方法がわからなかったんですけど
解りやすく説明されてたので良かったっす!
Posted by 焼豚@アダルトブログ☆エログ at 2004年08月19日 13:35
3カラム、無事に成功です。
JavaScriptっていろんなことができるんですね。

コピペでしかカスタマイズできない私には、こちらの説明がとっても分かりやすくて助かりました。

ありがとうございました。
Posted by ミッチ at 2004年08月20日 12:32
3カラムに挑戦してみました.

トラックバックさせていただいた記事のほうでも書きましたが,ウィンドウのサイズを小さくした時に,カラムが重なってしまいます.
CSSについてもっと勉強しないといけませんね,あたしは.

とりあえずはいい感じです.ありがとうございました.
Posted by masayanZ32 at 2004年08月21日 17:39
カラムが重なる件につきまして,アドバイスありがとうございました.

.dateの画像について,repeatにしてみましたが...ダメでした(iдi)
もう少し自分でも勉強してみますレ(゜゜レ)

何かお気づきの点がありましたら,またご教授いただけると助かります.
本当にありがとうございました.
Posted by masayanZ32 at 2004年08月23日 15:19
>masayanZ32さんへ
countainer と content の width がpx値で固定されているからでしょう。
そこが上記のとおりにやって可変になると、幅に応じて真ん中の列も
自動的に幅が変わるように見えると思います。
いろいろ研究してみてください。
Posted by junike at 2004年08月23日 15:49
いろいろ試した結果,

containerのwidthをauto,
contentのwidth指定の代わりにleftとrightを指定,
またpositionをabsolute

とすることでうまくいきました.

アドバイスありがとうございました.
Posted by masayanZ32 at 2004年08月24日 15:27
はじめまして!
こちらのサイトを参考に3カラムにさせてもらいました!!
分かりやすかったです☆
ありがとうございました<(_ _)>
Posted by よし at 2004年08月25日 02:26
初めまして、3カラムにしたくて検索したら
こちらのサイトにたどり着きました。
無事に3カラムに成功しました。
ありがとうございます♪

若干重くなってしまいましたが、
これはしょうがないことなのでしょうかね!?
できればもう少しすらすら行きたいのですが…
Posted by 小僧 at 2004年08月26日 14:30
>小僧さん
いまそちらのBlogサイトを見にうかがいましたが、パッと表示されて重くはなかったです。
時間帯によっては重いかもしれないですね。
またJavaScriptを使っている分、若干表示が遅くなるということもあります。
Posted by junike at 2004年08月26日 20:30
はじめまして(^_^)v
報告が遅れましたが小春日和の陽射しの中でサマのサイトかなり参考にさせてもらってます。
3カラムにもなんとか成功しました!!まだBlog作り中の初心者ですがよろしくおねがいします!
Posted by tp☆ryu at 2004年08月27日 07:31
はじめまして
前から3カラムにしたかったのですが
できずにあきらめてましたが
こちらのサイトにたどりつくました。
ありがとうございます。
上のトラックバックごめんなさい。
トラックバックいっぱいつくっちゃいました(汗)
わざとではないんです
ほんとにごめんなさい。
Posted by ちえ蔵 at 2004年08月29日 07:53
はじめまして、ブログの3カラムの参考にいたしました。
大変分かりやすく参考になりました、ありがとうございました♪
(記事を紹介させていただいたのであわせてTバック送らせていただきました)
Posted by たけし at 2004年08月31日 13:17
3カラム 
ずっと、どうやるのか悩んでいました。
でも、このサイトを見つけて簡単に出来ました。

とてもわかりやすい説明です。
感謝です。
Posted by yutaka at 2004年09月02日 20:57
トラバさせていただきました〜。
・・・が!全然問題が解決しません(TT;)グスン
ちびろぐさんのテンプレを利用しているのですが
直リンク(って言うのかな?)のせいか、サーバーエラーでこちらにも影響が出ているようです。
で、自分のテキストエディタに一旦保存して
アップロードしてプラグインの設定をして・・・という作業を手順どおりやったのですが、全然元にもどりません(TT;)グスン

document.write('</div><div id="links2">');
これってアップロードするファイルに追記するんですよね?
どこに追記するんですか?
それが間違ってるのかも?(;^_^A
素人なのでよろしくお願いしますm(__)m
Posted by ますみ at 2004年09月03日 16:31
あ、もうひとつ、3カラムが崩れてから
自分のブログを開いた時にかならず
ステータスバーの上に「ページでエラーが発生しました」ってメッセージが出るんです。
これって何が関係あるのでしょうか?
スクリプトを受け入れない環境になってるとか??
Posted by ますみ at 2004年09月03日 16:38
はじめまして。
3カラムに挑戦してみました。
とてもわかりやすい説明で感謝しています!
ありがとうございました!
Posted by kana* at 2004年09月03日 17:10
>ますみさん
フリーメモプラグインを利用して解決したようですね。
よかったです。
Posted by junike at 2004年09月03日 20:33
お騒がせしました(;^_^A
なんとか元通りにできました。
私ってば・・・
興奮してしまって↑の態度めっちゃ悪いですよね〜ゴメンナサイ!
知識不足でできないことが多いですが
カスタマイズってやりだすと完成するまですっごく集中して結構楽しいですよね。できた後の達成感とか(^┰^;)ゞ
これからも楽しみにしてます!
ほんとにありがとうございました〜m(__)m
Posted by ますみ at 2004年09月03日 20:59
始めまして!
こんにちは。

ずっと3カラムやってみたいと思っていました^^
すごくわかりやすく解説していただいて感謝感激です!
僕のような初心者でも無事できました〜♪

これからもよろしくお願いいたしますm(__)mぺこ
Posted by seiG at 2004年09月15日 09:46
こんばんわ。
3カラムをやってみようと思いいろいろ調べていたら
こちらに行き着きました。
大変丁寧な解説で、なかなか大変ではありましたが
おかげさまで3カラムにすることができました。
ありがとうございました!
Posted by オレ at 2004年09月16日 03:03
こん**わ。
ちびたさんところのテンプレを利用していたのですが、いろいろお忙しいらしくて直リンクしていたところが、表示が見事に崩れてしまっていたので、こちらのページを参考にして3カラムにしてみました。

とても分かりやすかったので、思ったより早く出来ました(^_^)v
本当に有難うございました。m(__)m
Posted by すとれいしーぷ at 2004年09月16日 11:48
はじめまして。
こちらのサイトを参考に3カラムに挑戦してみました。
大変分かりやすい説明で、特別な知識を持っていない
私でも3カラムにすることができました。
すごく嬉しいです。
ありがとうございました。o(^▽^)o わーい
Posted by WINママ at 2004年09月17日 21:30
はじめまして、
3カラム、大変お世話になりました。
見事3カラム化に成功しました♪

今回3カラムにすることで
CSSでよくわからなかったところも、
微調整していると意味がわかるようになりました。
ありがとうございました♪
Posted by ヨリベビ at 2004年09月18日 18:29
3カラム化できました!!
Posted by g56 at 2004年09月19日 17:13
なんども、カレンダーのことで
足を運ばせてしまい、恐縮でした;

MARGIN: 0px 50px 10px 50px;
で、なんとか中央に寄せることができましたー!

MARGINっていうのは、そうゆう意味だったのですね<勉強不足;

3カラム化、及びカレンダー修正に
大変お世話になりました!!

ありがとうございました!

☆まことに勝手ながら、Bloglistに登録させていただきましたv
m(__)m
Posted by ミッチ at 2004年09月20日 07:59
junikeさん、初めまして♪Blogの3段組、junikeさんの
こちらの手順を参考にさせていただき、やっとできました!!
ありがとうございましたぁ!!!感激。。夢の3段組です♪
あまり嬉しかったので私のBlogでも紹介させていただき
たいと思います♪^^
Posted by とも at 2004年09月20日 23:22
初めまして、こんばんは。
先日、こちらの手順を参考に「3カラム」化が実現しました。
ありがとうございました♪
Posted by まゆ at 2004年09月22日 02:17
こんにちわ!
先日はトラックバックありがとうございましたm(__)m

今日、こちらを参考にして3カラムに挑戦したのですが
上手く調節できず困ってます…。
いろいろやってみたんですが、何度やっても上手くいかず
どこをいじったらいいのかさっぱりわかりません…。

直したいところは、以下の3点です。
・左側のサイドバーをもっと左に寄せたい。
・サイドバーと記事の部分がひっつかないように少しあけたい。
・サイドバーの位置がが記事の部分よりも少し下がっているので、同じに揃えたい。

お忙しいとは思いますが、どうしたらいいのか教えていただきたいです。
よろしくお願いします!
Posted by アヤ。 at 2004年09月24日 16:23
junikeさん、御丁寧に教えてくださって
本当にありがとうございましたm(__)m
感謝感謝です♪

My blog listに登録させていただきました!!
今後ともよろしくお願いします☆
Posted by アヤ。 at 2004年09月24日 23:01
はじめまして。
こちらの記事を参考にして3カラムを作ってみました。
なんとなくバランス悪いかも・・・ですが、憧れの3カラムに満足!です。
ありがとうございました。

TB&Mybloglistに登録させていただきました。
今後もこちらで色々と学ばせていただきますね。
Posted by ろば at 2004年09月26日 00:49
はじめまして。
こちらの手順を参考に3カラム化成功しました。
ありがとうございました♪
Posted by roxy at 2004年09月27日 12:21
はじめまして。

うまくいかなくって・・・。
みていただくと分かるんですが、
サイドが、本文とかぶってしまって。
私は、MacのOSxなんですけど。。。

どうしたらいいのか教えていただけませんか?
Posted by eveve.-_-macha@jcom.home.ne.jp at 2004年10月03日 20:16
>eveve.〜さん
そちらにもコメントしましたが、
#linksが2箇所あるうえに、#countainerがありませんでした。
そんへんを確認してみてください。
Posted by junike at 2004年10月03日 21:00
ありがとうございました。

もう、何点か・・・・.
タイトルが表示出来てないんです。
それから、本文のところとサイドがくっつき過ぎてて・・・。
右左に分かれないし。プラグインは書いてる通りにしてみたんですが。
Posted by eveve at 2004年10月03日 21:20
こんばんわ。

連絡遅れてしまって。
会社のパソコンからだとうまくできました。
たぶん、スクリプトの保存名が原因だと思います。
jsでは、保存できなかったので。つけ直すとエラーがでました。

画像の件は、httpから始まるものを言われたところに1画像ペーストしてあるんですが
アップできないんですよね〜。
元のバナーは、繰り返しになったり消えたりは、いじるとなるんですがね。

なんとかやってみます。ありがとうございました。
リンク良かったらさせて下さい。
Posted by eveve at 2004年10月04日 21:03
さっきコメント書いたんですが、載ってませんでした…。

画像なども出るようになりまして、よくなったんですが…。
今度は、かなり困ってまして。

会社のウィンで直すと自宅のマックでは崩れてしまうんです。
毎日、直してるんですがどっちでもちょうどいい具合にならないんです。
どうして、こんな感じになるのでしょうか?

サブタイトルも色が変わりません。
お手数ですが、もう一度見ていただけませんか?
よろしくお願いします。
Posted by eveve@会社 at 2004年10月07日 12:24
ありがとうございます。

ずれると言うのは、具体的にウィンで直した後にMacで見ると両サイド、本文などに
タイトルや上の画像が重なってしまうと言う事です。

それは、逆でも同じ事が起こります。
Macでは上の画像が1つしかなかったのにウィンでは2つあった。とか。

先ほど来ていただいた時には、どんな風に見えてたのでしょうか?
教えていただけるとうれしいです。

書いていただいたのをコピーしていれてみます。
Posted by eveve at 2004年10月07日 20:46
ずれました・・・。
少し見づらいのですがMacからの見え方載せました。
再度、見ていただけたらうれしいです。
Posted by eveve at 2004年10月07日 21:22
アップするのに時間が経ってしまって。
先ほど、教えていただいたものをコピーした後のものが
やっとアップ出来ました。

もう少し頑張ってみます。
ありがとうございます。
Posted by eveve at 2004年10月07日 23:23
junikeさま。
はじめましてsyaranと申します。

3カラムの記事にトラックバックさせて頂きました。
難しそうとあきらめていましたが、こちらの解説を見てなんとか3列にすることができました。
私自身Macを使っているので、Mac対策などもして頂いているのがとてもうれしかっったです。
本当にありがとうございました!




Posted by syaran at 2004年10月08日 01:59
はじめまして。
こちらの記事を参考に3カラムに挑戦しました。
まだ微調整がうまくいってないのですが、これから
ボチボチとこちらのサイトで勉強させていただきます。
TBさせていただきました。ありがとうございました。
Posted by 夜更かしママ at 2004年10月08日 21:41
3カラムは、うまくいったけど、最新記事とかをクリックして拡大表示になると
左側に寄りすぎて、見にくくなってしまったんですぅ〜 (¥¥)
左側に枠を作りたい、というか(u)クリックして表示された(/U)記事をセンターに寄せて表示させるのってどうすれば、いいのでしょうか?教えて下さい。。
Posted by team_kai at 2004年10月09日 09:54
>eveveさん
countainer の width が 900 もあるので右サイドバーが隠れてしまいそうですが、
それ以外はだいたいできてきたようです。

>team_kaiさん
トップページと同じ幅でいいのなら
#content の左右の margin を
MARGIN: 0px 10px 0px 10px;
と小さくして、.blogに左右のマージンを追加して
.blog {
MARGIN-TOP: 12px;
margin-left:200px;
margin-right: 210px;
}
こんなふうにすればできます。
個別記事(team_kaiさんのいう拡大表示)だけ左右の余白の部分を別の
幅にしたいというのは、どうやればいいかわかりません(できないような
気もします)。
Posted by junike at 2004年10月09日 12:29
アドバイスありがとうございました。
出来ました!見やすくなればいいんです。
助かりました。。(ペコリ)
Posted by team_kai at 2004年10月09日 15:08
junikeさん、こんばんわ。

コメントありがとうございました。
お礼が遅くなってすいません。
アドバイス頂いた通りにwidthを100%にしてみました。
自分のMacで見ると右サイドバーが重なってしまったのですが、右側のmarginを
少し調整してなんとか普通になった・・・と思います。
とても勉強になりました。
本当にありがとうございました。
Posted by syaran at 2004年10月10日 04:08
3カラムの事では、無いのですが・・
カレンダーのことで、聞きたいのですが・・
よくカレンダーで(翌月>>)・(<<前月)
の付いてあるのを見るのですが、どうやったら
付けられるのですか?カレンダーのデザイン
だけ変えたいし・・教えて下さい。
Posted by team kai at 2004年10月13日 14:39
>team_kaiさん
それはlivedoorBlogでは用意されていません。
カレンダーのすぐ横ではなくて、月別アーカイブになったときの
画面の上部に前の月、後の月などを出すJavaScriptなら
http://blog.livedoor.jp/kyorecoba/archives/7905516.html
↑こちらに紹介されています。
Posted by junike at 2004年10月13日 20:23
とても詳しく説明されていて参考になりました。
勝手にLinkさせてもらいました。
ご迷惑でなければいいのですが...
Posted by micchy at 2004年10月24日 05:09
間違えて3回もTrackBack してしまいました。ご免なさい。
Posted by Leitgeb at 2004年10月24日 11:44
私も無事3カラム成功です。
ありがとうございました。。。
Posted by uiui_2004_uiui at 2004年10月25日 22:23
3カラム化を目指していろいろなところを周ったのですが、どうにも飲み込めず悩んでいたところで流れ着きました。
ほんとにコピペだけで出来てしまい、大助かりです。結果苦手意識を持っていた少しスタイルシートにもなじめました。
ありがとうございました〜。
Posted by しょーだ at 2004年10月25日 23:28
ブログ始めて3日目お陰様で3カラム成功です!
本当に有り難うございました!
Posted by デューク東郷 at 2004年10月27日 21:55
3カラムに無事成功しました。
大変参考になりました。
どうもありがとうございました。
Posted by ゴロゴロ at 2004年10月29日 12:36
3カラムのやり方が全然わからなくてここに迷い込みました。
おかげで3カラムにすることができました、ありがとうございました。
でも、カレンダーと月別アーカイブ、それにカテゴリー別のアーカイブが
サイドバーと投稿記事がかぶってしまいおかしくなります(T_T)
Posted by じる at 2004年10月31日 23:16
適当にいじってたら治りました。
その月の投稿を再保存をすることによって反映されるみたいです。
ありがとうございました。
Posted by じる at 2004年11月01日 01:19
3カラムの方法、わかりやすく丁寧に書いてくださっていて、
とても助かりました!
どうもありがとうございます。
これからもお世話になるかと思いますが、どうぞよろしくお願いします。
Posted by ぶれたん at 2004年11月02日 07:34
3カラムについてあれこれ検索したのですが一番わかりやすい説明でした。ありがとうございました。
Posted by あひる at 2004年11月03日 20:56
はじめての投稿で質問です。どなたか教えていただければ幸いです。ブログ再構築しても、削除したはずのファイルが残るのでCSSの読み込みをやりなおしたり、HTMLをデフォルトして再設定してみたのですが、どうも過去のファイルが残るようです。(また一部、修正しても更新されないようです)。
みなさんこんなことありませんか?考えられることは全てしてみたのですが・・・。

更新できたトップページ
http://blog.livedoor.jp/kohnoh2003/

更新されないページ
http://blog.livedoor.jp/kohnoh2003/archives/cat_398864.html


Posted by 転職相談室 at 2004年11月03日 23:33
現在、カテゴリー別の再構築のメニューがなぜかないので
全ページで再構築をかけてみてもだめでしょうか。

またはファイルの削除については9/10の情報ですが、以下のようなことになっています。
全ページで再構築してもだめなら問い合わせてみては。

http://blog.livedoor.jp/staff/archives/6671134.html

「削除したファイルが消えない件につきまして
いつもlivedoor Blogをご利用いただきありがとうございます。

現在、管理画面からファイルの削除を行った場合に反映されない、などの現象が起きています。原因はファイル削除処理中の混雑などが原因でファイルそのもの削除と、所有情報が合わなくなっていることが考えられます。

もし、削除したはずなのに消えないなどの現象が起きた場合、そのURLを添えてお問い合わせからお寄せいただけますようお願いいたします。状態を確認した上で、この不具合が原因とわかり次第こちらで削除を行います。」
Posted by junike at 2004年11月04日 12:56
ごあいさつに伺うのが遅くなってしまってすいません><
3カラムにするのに、大変お世話になりました。
とってもわかりやすかったです。
どうもありがとうございました☆
Posted by チヒロ at 2004年11月04日 17:38
すいません、早速コメントいただいたようでありがとうございます。問題解決しました。たぶん・・・、パソコンに削除したはずのキャッシュが残っていて、それが表示されていたようです。お騒がせしてすみませんでした。こういうコミュニティあると本当に助かりますね。これからも宜しくお願いします。
Posted by 転職相談室 at 2004年11月04日 22:02
お手数をお掛けして済みませんヽ(´Д`;)ノ
後からまたにらめっこしてみますー。
Posted by Yuz at 2004年11月09日 22:38
おかげさまでなんとか3カラム化に成功しました。ありがとうございました。CSSの知識0の私にでもできてしまうこの記事の分かりやすさ!感服します。それにしてもだいぶ重くなってしまった…。これってどうにかならないものでしょうか。
Posted by sei at 2004年11月12日 03:25
たびたびすみません。とりあえず一度元に戻すことにしました。
ご迷惑かけてすみません。
Posted by sei at 2004年11月12日 03:57
初めまして。何回か今まで拝見させていたのですが、今回は
質問させて頂きたくて記入させていただきました。
実は前から何度か3カラムに挑戦していたのですが
(そのときはうまくいっていました。)、今回新デザインに
したところ、IEのお気にいりとがサイドにほかの表示をする
と、右側のサイドバーが本文と重なってしまうのをなくしたい
のですがどのようにしたらいいでしょうか?
Posted by はちぷー at 2004年11月13日 21:00
>はちぷーさん
.blog の width に数値が入っていますがそれを auto にすれば
右サイドバーが重ならずに可変になります。
ただ、日付のところやタイトルの背景には画像を使っているので
ブラウザの横幅を広げすぎると画像の幅を超えてしまうので切れたような
感じになってしまいます。
.date や .title の background のところを no-repeat から repeat-x
とすれば切れるようなことはなくなりますが、日付の方は星のマークが再び出てしまうので、.title だけにするかどちらもそのままかはお好きな方でいいかと思います。
Posted by junike at 2004年11月14日 00:37
junikeさんありがとうございました。
何とか解決出来ましたのでホットしました。
これからもよろしくお願いします。

あとリンクさせて頂きましたので、もし不都合等
ありましたら、連絡いただければと思います。
Posted by はちぷー at 2004年11月14日 17:32
いつもお世話になっております。

自分の今使っているPCではちゃんと幅が保たれてきれいに見えていますが、ノートPC(画面が小さい)で見るとサイドバーが真ん中の記事部分にくっついてしまいます・・
「固定」をすればいいとのことなのですが。
デザイン設定でどこの部分を「固定」にすればいいのでしょうか?
あとその方法を・・
お時間があれば教えてください!!

よろしくお願いしますm(__)m
Posted by ゆうこ at 2004年11月19日 11:56
3カラム化に際し、参考にさせていただきました。
画像つきのわかりやすい解説で何やら簡単に出来てしまいました。感謝です。
ありがとうございました。
Posted by 羅刹○ at 2004年11月19日 17:23
>ゆうこさん
いまのゆうこさんのCSSからだと
#countainer と #content に

 position: relative

を追加してください。サイドバーと真ん中のカラムが少しかぶるのは
#contentのマージンを

 MARGIN: 0px 220px 5px 190px

などとすればいいでしょう。
Posted by junike at 2004年11月19日 20:44
はじめまして。
こちらの方法を使わせていただいて3カラムにすることができました。
ありがとうございます。

「個別記事」とか「月別記事」なんかも設定してみたんですが、こちらは3カラムにならないんです。
どうしてなんでしょう??

でもサイドバーが付いたので良し!としています。
ほんとうにありがとうござました。
Posted by me-mi at 2004年11月21日 15:49
>me-miさん
この方法では3カラムになるのはトップページだけです。
個別記事や月別記事も3カラム化するには「地獄変OO」さんの
http://blog.livedoor.jp/jigokuhen00/archives/4417904.html
↑こちらを参考にしてみてください。
Posted by junike at 2004年11月21日 16:25
junikeさん
お返事ありがとうございます!
参考にさせてもらいます。

私のブログ、動きがかくかくするのは画像が重いからなんでしょうかね?
amazonの画像貼りたくて3カラムにしたのに。
Posted by me-mi at 2004年11月21日 21:07
>me-miさん
動きがかくかくするのは、#countainer と #content にある
 position: relative;
が影響しているらしいです。
これはMac版IEでも見れるようにとつけたものですが、それをはずして(削除してみて)崩れずに見られるかとうか検証できていません(手元にMacがないので)。
ためしにはずしてみてかくかくしなくなったら(かくかくしてたらそもそもそれが原因ではなかったということですが)、MacのIEを持ってる人に確認してもらうとか。
relative というのは相対的な位置をそのつど再計算していると聞いたことがあります(レイアウト上の位置関係を)。それがなければそのつど計算する必要もないのでするするスクロールできるんじゃないかなと思います(正確でなくてすいません)。
Posted by junike at 2004年11月21日 22:59
はじめまして。
今回、私のブログの3カラム化を行ったのですが、その際にこちらの記事を参考にさせていただきました。ありがとうございました。
Posted by うた at 2004年11月23日 01:34
はじめまして!
こちらの記事を参考にさせていただいて、やっと3カラム化に成功しました。
本当にありがとうございます。

ただ、1つ疑問があるのですが…
たとえば、こちらの記事の方法ですと
「サイドバー」「本文」「サイドバー」
と表示されますが、
「サイドバー」「サイドバー」「本文」
とか、
「本文」「サイドバー」「サイドバー」
と表示させることは可能なのでしょうか?

もしよろしければ教えていただけるとうれしいです。
よろしくお願いします。
Posted by コトリ at 2004年11月23日 11:27
>コトリさん
それをするならHTML編集となります。
HTML編集の「トップページ」で
 <div id="links">
から checkers を閉じる div タグまでをセットにして
 <!-- Loop Start -->
の前に移動すれば「本文」より先にサイドバーが表示されると思います。
ただ、これはちょっと間違えるととんでもないことになりますので
もし行うのならば必ず変更前にバックアップを取って下さい。

「サイドバー」「本文」「サイドバー」という表示順はここで紹介している方法ではそうならないと思うのですが、どうでしょう。(links2をここで紹介しているようなJavascriptファイルをプラグインとして挿入する方法ではなくて、HTML編集で組み込めばそういった表示順も可能だと思うのですが)
Posted by junike at 2004年11月23日 11:49
3カラムやってみました。とても親切でわかりやすく簡単に出来ました。ありがとうございます。
Posted by kenken at 2004年11月23日 11:50
junikeさん
色々教えていただいてありがとうございました。
position: relative;
をはずしたところ、かくかくしなくなりました。
そして、Mac版IEでは表示が崩れました(笑)

3件ほど確認とったら文字が重なってる箇所を手直したらちゃんと見えてるらしいです。

まだまだ各環境やブラウザで表示が違うようなのですが(肝心の自分のところでサイドバーが3カラムになってない)
みんなが文章読める状態であればこれでいこうかと思ってます。

本当にお世話になりました。
ありがとうございました。
うちのトップからリンク張らせてもらいました。
Posted by me-mi at 2004年11月23日 15:27
 挑戦したところ見事3カラムできました。
Posted by motorcycle_life at 2004年11月23日 20:21
はじめまして。

junikeさんのおかげで念願の3カラムにすることができました。
本当にありがとうございましたm(__)m

バランスがいまいちなので、これからCSSを勉強しながら調整
していくとして、早急に解決したい問題が一つあります。

それは、画像が見えなくなってしまったこと。

記事には、
--------------------------------------------------------------
★「3カラムにしたら画像が消えた」とか「他のテンプレを当て
はめたら画像が消えた」という場合、
blogbodyクラスで
 BACKGROUND-COLOR: #ffffff
などを指定していたら、jpeg画像が消えてしまったように見えます。

CSSに以下の記述を入れたら出ると思います。

DIV.main IMG{
position: relative; z-index: 1;
}
--------------------------------------------------------------
と書かれてあったのですが、どうやってもうまくいきません。

具体的にどこの部分に記述を入れたらいいかなど、もしできましたら
アドバイスいただけたら幸いです。

初歩的な質問で申し訳ありませんが、何卒よろしくお願いします。
Posted by ギフタツ at 2004年11月24日 00:14
>ギフタツさん
どこでもいいのですが、迷ったらいちばん最後でもいいです。
最後は checkers だと思うのでそれを閉じる「 } 」の次の行にでも
入れてみてください。
↓こんな感じ
 
.checkers {
MARGIN-TOP: 10px; FONT-SIZE: xx-small
}
DIV.main IMG{
position: relative; z-index: 1;
}

これで画像が表示されるようになります。
Posted by junike at 2004年11月24日 20:04
junikeさん、ありがとうございました。
無事画像が表示されるようになりました(^o^)/
これからサイドバーの高さの調整や真ん中カラムの固定化などに
挑戦していきたいと思います。
これからも色々と勉強させていただきます。
今後ともよろしくお願いいたしますm(__)m
Posted by ギフタツ at 2004年11月25日 00:15
シトラスのテーマで3カラムにしようとしたのですが
3列にはならず、サイドバーは左だけのまま
ページ中ほどくらいからページ前面にサイドバーの
項目部分のストライプが延びてしまい反映できませんでした。
お手数ですが何が原因か教えていただけたらうれしいのですが。。

上のほうのコメントにあった
.blog{
   padding:15px 0 15px 0;
   border:solid 1px #fff;
   }
をやったらいいのかと思い、修正してみましたが
それでもだめでした。。
Posted by baaaaagel! at 2004年11月25日 21:34
>baaaaagel!さん
拝見しましたが、うまくいかなくなったので元に戻されたのでしょうか?
サイドバーが左だけというのはサイドバーを分ける links2 のJavaScriptファイルを作ってアップしていないか、それをプラグインとして入れていないかが考えられます。
countainer、 content、 links、 links2 などもう一度最初から見直していただけますか。
それでだめな場合、だめなままの状態にしておいてもう一度ここにコメントしてください(大きく崩れて読めないというのではなさそうなので)。
その状態で見て見ないとどこがまずいのかわかりません。
Posted by junike at 2004年11月25日 22:43
>junikeさん
レスありがとうございました。
さっきはできないので戻してありました。
もう一度よく読んで挑戦したところうまくいきました!
お騒がせしました。
おかげで見やすいブログができそうです!感謝です。
Posted by baaaaagel! at 2004年11月25日 22:58
たびたびごめんなさい。。
できたと思ったのですが、ウィンドウサイズによって
ブログの部分にはってある画像とかが右サイドバーに
飛び出してしまうのです。。。
お手数ですがアドバイスお願いできまでしょうか。
右にとびでないように。。
Posted by baaaaagel! at 2004年11月25日 23:19
>baaaaagel!さん
画像が右側に飛び出して見えるのは右のサイドバーの背景が透明だから重なって見えるためです。
たとえば links2 に background-color: #fff; を入れると、画像が途中で隠れるような感じになります(「【pointage(ポワンタージュ)】麻布十番」の3枚の画像のある記事など)。
もともと全体の背景が白なのでサイドバーの背景が白で同じになりますから、背景をあわせて見かけ上そうすることはできます。

3カラムにすると真ん中の記事の部分の幅はどうしても狭くなりますから、こういうことも考えてあまり幅の広い画像は置かない、または右側に続くように連続して置かないようにするしかないです(あるいは大きい画像は「続きを読む」のあとにしてトップページには置かない)。
テキスト文字のように3枚目の途中で右端になったら自動的に3枚目だけ「改行」してくれるようになればいいのですが、どうやればそうなるかわかりませんでした。
Posted by junike at 2004年11月26日 21:11
たびたびありがとうございます。
とりあえず教えていただいたとおり、右サイドバーの背景を白くして
画像が映りこまないようにしてみました。

が、できるのであれば、こちらのページのように
真ん中の記事の欄の幅を固定して、左右のスクロールバーを
出すようにしたいのです。
↓このサイトのように(勝手にURL書いてごめんなさい)
http://yellowblog.livedoor.biz/

ご教授いただけないでしょうか。ちょうどこれくらいの幅にしたいです。
Posted by baaaaagel! at 2004年11月26日 21:48
>baaaaagel!さん
それであれば↓こちらを参考にしてみてください。
http://junike.livedoor.biz/archives/609550.html

#content に width:440px; など数値を指定して
margin によって両サイドをあけるのではなく
#content で left:200px;
#links2 で left:600px;
など左からの位置を指定するようにすればできるでしょう。
真ん中のカラムの幅は #links2 の数値をどのくらいにするかによって調整できます(同時に #content の width の数値も変える)。
Posted by junike at 2004年11月26日 23:27
3カラムにしようといくつかサイトを見たのですが、
ここが一番わかりやすかったです。
手順を言われるままに履行したと言う感じなのですが、
無事成功しました!
どうもありがとうございました!!
もしよろしければ自分のサイトからリンクを貼りたいのですが、
いかがでしょうか?
Posted by こはる at 2004年11月28日 12:35
>こはるさん
リンクはいいですよ。
ハンドルネームがここのブログ名と同じですね。
Posted by junike at 2004年11月28日 13:50
またまたお世話になります。。
色々といじっていたら右サイドバーの右側にスペースがなくなってしまいました。
前までは左のサイドバーからページの一番左端までと
同じくらいのスペースが出ていたと思ったのですが。。。
どうやったらなおりますでしょうか。。
右にスクロールしても、サイドバー自体が画面の右側に
くっついてしまっていて見づらいのです。。
お助けくださいませ。
Posted by baaaaagel! at 2004年12月03日 23:04
>baaaaagel! さん
サイドバーが画面の右端にくっついたのではなくて、links2での左端からの位置が大きいからそのように見えるのだと思います。
baaaaagel! さんのパソコンの解像度がどの程度かわかりませんが、ぼくの環境から見るとブラウザの右端を広げてみるとスペースは画面があるかぎり、あきます。
おそらく、content の width を50pxくらい小さくして、470px、
links2 の left も同じく50px小さくして670pxとすれば少し左につまって右端にスペースがあくかと思います。
まだあかないようでしたらもう少し60pxずつ小さくするとか。
Posted by junike at 2004年12月03日 23:24
レスありがとうございます。
変えてみたのですがやはり症状は変わらないです。。
というかそもそもあの数値でも最初は右側にスペースが少しあって
そこまでスクロールできるような状態だったのですがなぜでしょう。。
確かに画面サイズを広げてみれば右側にスペースはでてくるのですが
どうも見づらくて・・。何か他に方法があれば教えてください。
Posted by baaaaagel! at 2004年12月04日 10:29
>baaaaagel! さん
では
#content で
 PADDING-RIGHT: 220px;
 WIDTH: auto;

#links2 ではleftに変えて
 right: 10px;
とし、またMARGINの右も少しスペースをとってみて
 MARGIN: 15px 20px 0px 0px;
としてみたらどうでしょう。
真ん中の幅は可変になりますが、contentのPADDINGで右サイドバー分のスペースをとるようにしてみました。
また、これだと画像が横に並んでいても幅が狭くなると自動的に改行されるようになってます。(前回コメントしたときにはこれができなかった)
Posted by junike at 2004年12月04日 14:36
はじめまして。
お陰さまで無事に3カラムにできました。
ただ、左右のサイドバーがタイトル部分に飛び出してしまうのですが、これはどうしたらいいのでしょうか。
それと、個別記事カテゴリー別アーカイブでの3カラムにしてるのですが、サイドバーに表示されるコンテンツがトップ画面と違ってしまうのですが、これは何が原因なんでしょうか?
ご教授をお願いいたします。
Posted by グッチ at 2004年12月04日 21:14
>グッチさん
サイドバーが左右のタイトル部分に飛び出るのは、 link と links2 の top のところの数値をもう少し大きくすれば解決します。

個別記事での3カラムのときにサイドバーがトップページと違うというのは、個別記事にもサイドバーを出したことがないのでわからないのですが、おそらくGoogleAdsをサイドバーに表示させるときにJavaScriptを利用しているのではないですか?(GoogleAdsをどのように設置するのか知りませんが)
だとしたら個別記事にサイドバーを出そうとするときにすでにJavaScriptを使っているうえにその内側にもう1つJavaScriptが使われている(GoogleAdsのこと)のでこのようになるのだと思います。
なのでGoogleAdsの部分は1つの独立したHTMLファイルにしてしまってそれをアップロードし、サイドバーに表示させるのはフリーメモプラグインでiframeタグを使ってそのHTMLファイルを指定するようにすればいいと思います。
↓こちらを参考にしてみてください。
http://junike.livedoor.biz/archives/123647.html
Posted by junike at 2004年12月04日 22:26
早速のお返事ありがとうございました。
サイドバーがタイトル部分に飛び出るのは、お陰さまで解決しました。
GoogleAdsはフリーエリアにHTMLで書き込むようになってるんです。
試しにGoogleAdsを削除しても結果は変わりませんでしたが、アドバイスありがとうございました。
Posted by グッチ at 2004年12月04日 23:18
感動です。大変わかりやすい説明のおかげで、念願の3カラムに成功しました。
ココに辿り着けてよかったー!本当にありがとうございました!
フト、疑問に思ったので、質問させて下さい。
もしも、この先、規定のテンプレートにしたい場合(今だけクリスマスのテンプレにしたいとか)、どうしたらいいのでしょうか・・?
今迄のように、ポチっとデザイン変更→再構築だけではすみませんよね・・?
(追加したカテゴリの3カラムをはずすのかな・・と想像はしているのですが)
更に、その、今だけクリスマスを、元のカスタマイズした3カラムに戻したい時・・。
折角できた3カラムがダメになるのが怖くて、迂闊に試せません・・。
ド素人にどうか教えてください・・。

また、個人的な希望ですが、左サイドバーにある、「style changeの‘文字を大きくする’」というのが、大変羨ましいので、今回のように、また記事で説明していただけないでしょうか・・!
(あ、‘初心者にはちょっとムリ’な超難題なら諦めます…(>_<、))

はじめまして、なくせに、長く、しかも質問&要望攻めしてしまい、申し訳ありませんでした。
とりいそぎ、感謝のキモチまで。ありがとうございました♪


Posted by イチゴ at 2004年12月09日 17:56
>イチゴさん
お役に立ててよかったです。
他のテンプレに変更するときに何もしなければ3カラムではなくなります。
そのときは2カラムになります。
他のテンプレに変更する前に、3カラム化したときのCSSをテキストファイルで保存しておけば、他のテンプレ(2カラム)からその保存しておいたCSSに置き換えればまた3カラムに戻ります(3カラム化するときにプラグインとして挿入したJavaScriptファイルはそのまま存在するものとします)。

他のテンプレでも3カラムにしたいときは、そのテンプレを元にまた3カラムのために必要な編集(CSSファイル:links2などを作ったりすること)をしなければなりません。JavaScriptファイルはそのままでかまいません。

「文字を大きくする」については、このブログの右サイドバーのamazonのところにあるBlogHacksという本の中の1つのネタを元にしています。
ちょっとめんどくさいですが、そのうち記事にしてみます。
記事にしたらそちらの何かの記事にトラックバックしてお知らせします
Posted by junike at 2004年12月09日 20:50
ああ・・・!早速のお答え、ありがとうございます・・!
今迄通り、ポチっとでいいのですか・・!
安心しました。これで今日はぐっすり眠れます(笑)
こんなにご丁寧に教えていただき、本当にありがとうございました。
これからも、マイ教本とさせて頂きます。
文字を大きくする・・は、ちょっと面倒なら結構です。
欲張りすぎました、ごめんなさい。
(junikeさんの意思で記事になさるのならいいのですが、
いきなり頼まれちまったことは忘れて下さい。)
本当に本当にありがとうございました!
Posted by イチゴ at 2004年12月09日 21:36
>イチゴさん
「ちょっとめんどくさい」というのは記事にするのがという意味ではなくて、その作業自体が手間がかかるという意味でした。
なので、記事にするとしてもあとで気が向いたときにすることにします。
Posted by junike at 2004年12月10日 11:58
お初です。貴サイトの丁寧な説明で3カラム化成功致しました!
本当にありがとうございますm(__)m 今は唯一横幅が違うカレンダー
をどうやってサイズ変えるんだろうと思案中です。

ただメチャメチャ重いんですよね。やっぱりプロにすると早いですか?
しちゃおうかな〜♪
Posted by スポーツバカ at 2004年12月11日 11:37
>スポーツバカさん
カレンダーをサイドバーと同じ幅にするならたとえば
.calendartable {
BACKGROUND-IMAGE: none;
MARGIN: 0px 0px 10px -4px;
WIDTH: 100%;
TEXT-ALIGN: center;
}
とWIDTHを上のようにすればできます。180pxなどとすれば任意の幅にできると思います。(MARGINはお好み)

ナローバンドだと重いかもしれません。当方はADSLで実質1MB/bbs程度だと思いますが貴ブログを見てもそれほど重くは感じないので。
PROにすると本当に早くなるかどうかはわかりません。
PROにしてURLが無料版の「http://blog.livedoor.jp/livedoorID/」よりは 「http://livedoorID.livedoor.biz」 となったものが経験的に早く表示されているような気がしているだけです。
Posted by junike at 2004年12月11日 17:27
こんばんわ!今日一日かけてやっていましたが、出来ないとこにjunikeさん
のコメントが!!さっそく試してみると・・、出来ました!!感謝・感激で
す。ありがとうございます。

プロにしてもさほど変わりはないようですね。昨日の時点ではTOPの記事表示を20件にしていたので異常な重さでしたよ。なんとか軽量化することが出来ました☆

ちなみにリンクの色などを変える場合はどうするんですかね?色の表示が#xxxなどなのでよくわからないんです ( p_q) うっうっ
Posted by スポーツバカ at 2004年12月11日 18:38
トップページの記事の数の影響は大きいです。
記事を先に読んでからサイドバーを表示するようになっていますので。

色については↓こちらのようなものを利用するといいでしょう。
http://www.ushikai.com/colchk/chart21/chstart.htm
Posted by junike at 2004年12月11日 19:45
こんばんわ。スポーツバカです。

さっそくのお返事ありがとうございます。やはり、記事の数は多大なる
影響があるんですね〜。勉強になりました^^
そして色の方もいろいろとお気遣いありがとうございます。
それを見てがんばっていきたいと思いますね。

リンクの色など変えられたらまた報告に来ます。
ありがとうございました^^v
Posted by スポーツバカ at 2004年12月12日 23:44
 はじめまして!

 微調整に苦労しながらも無事3カラム化に成功しました!分かりやすい解説、本当にありがとうございました!

 ただ、一点だけどうしても解決できないトコロが・・・

 トップページ http://blog.livedoor.jp/tsukasa2/
 では、投稿の日付が小さな画像と共にちゃんと表示されているのですが、
 個別記事 http://blog.livedoor.jp/tsukasa2/archives/10709012.html
 では、画像も消え背景の色指定も効いていないんです。

 CSSは
.date{
color:#e4556b;
font-size:x-small;
font-weight:bold;
padding:10px 10px 5px 35px;
margin:20px 0 0 0px;
background:#fdf2f6 url('/_img/20040809/umi3_date.gif') no-repeat;
}
 ・・・この様になっている箇所です。

 どなたか心当たりのあるポイントがございましたら、是非ご教授下さいませ。
Posted by マドモアゼルはお年頃。 at 2004年12月13日 22:14
 確認してみたら、IEではその症状が出るものの、Operaでは普通に表示されますね・・・。
 IE特有の症状なのかなあ。。
Posted by マドモアゼルはお年頃。 at 2004年12月13日 22:28
なかば強引ですが、dateの画像のパスを以下のように絶対パス指定にしてみて、かつ H2.date というのをつくって、POSIRION:relative というのを入れてみてください。これをやるとなぜか出るということがよくあります。IEのバグっぽいかもしれません。

.date {
  BACKGROUND: url(http://image.blog.livedoor.com/img/usr/20040809/umi3_date.gif) #fdf2f6 no-repeat;
}

H2.date {
Z-INDEX: 1; POSITION: relative
}
Posted by junike at 2004年12月13日 23:11
 早速のご返答、ありがとうございます!

 やってみました!完璧です!!
 今回、初めてスタイルシートを弄くってみて、ちょっと楽しさも感じられました。近いうちに本でも買って、もっと勉強したいと思います。

 本当にありがとうございました!
Posted by マドモアゼルはお年頃。 at 2004年12月14日 00:35
わざわざ足を運んでいただいて、うれしい限りです(TдT)(感動
おかげさまでデザイン完成しましたぁ^^♪
トラックバックできてたんですねヨカッタですぅε-(´∀`*)(安心
ブログのこと何も知らないものでスイマセーン┏оペコリ
このブログはイロイロいじれるところがあって楽しいですね^^
ほんとありがとうございましたぁ<○>
Posted by えーすけ at 2004年12月21日 10:29
こんにちは。
みごとに失敗してしまいました。。
document.write  …うんぬんをメモ帳に作って保存するところでつまずきました。
アップしてみたら、日記と外枠が重なってしまい、無残。。
ログアウトしてもう一回やり直しです・・・

がっかり。
Posted by Kaoru Urizane at 2004年12月21日 14:33
>Kaoruさん
もしかしてファイル名が「3column.js.txt」とかになっていませんか?
(Windowsの場合)エクスプローラーでファイル名を表示するときに「.txt」などの拡張子を表示しないようにしていた場合、そんなふうに保存されることがあるかもしれません。
そうでないとすると、document.wirte〜の後ろに「改行」が入っているとか。念のため改行はしないで保存したものをアップして、試してみてください。
Posted by junike at 2004年12月21日 20:24
初めまして、最近blogを始めたyunと申します
3カラムにする方法を求めて色々と検索し、こちらへたどり着きました。
3カラム化、無事成功しました。
とても分かりやすく解説されてあって、blog初心者の私にも簡単にできました。
ありがとうございました!

それであのぅ、・・・3カラムとは関係ないことで大変恐縮なのですが・・・
どうしても分からなかったので質問させてください(><;;

私の方の記事でも書いていますが・・・
「続きを読む」で、個別記事ページを開くと、記事が左側に
寄りすぎているのです。
これを、上部にある背景画像の左端と同じ位置くらいまで右にずらしたい
のですが・・・
もう、どこをいじればよいのか分かりません(汗)
アドバイス等ありましたら、よろしくお願い致します<(_ _;)>
Posted by yun at 2004年12月23日 23:23
>yunさん

.blog に padding-left: 20px; 
を追加してみれば少し左側が空くと思います。
でもそうするとトップページの左サイドバーと記事本体部分(content)の間もあいてしまうので、 content の左のマージンを20px分小さくして
 MARGIN: 0px 250px 0px 210px;
としてみればいいでしょう。
トップページの記事部分が右サイドバーとかぶっているのは.blogにWIDTHを500pxとっているからです。その行を削除してマージンを上記のとおりにすればいいように思います(その500pxに意図があるならそのままでいいですが、右サイドバーとかぶってるのが気になったので)。

Posted by junike at 2004年12月23日 23:58
まさかこんなに早くお返事を頂けるなんて!
ありがとうございます><

アドバイスどおり、.blogにpadding-left: 20px; を追加してみたところ、
最初の時より隙間を開けることができました

右サイドバーの件ですが、私の環境ではかぶっていないのです・・・
(ブラウザは、Sleipnirというのを使用、1024*768です)
500pxを削除してみましたら、個別記事ページの日付と、記事右下の
「Posted by yun at 22:44 │Comments(0) │TrackBack(0)
このBlogのトップへ │前の記事」
の部分が、おもいっきり右に行ってしまうことが分かり、もとに戻しました(汗)
これはこのままにしておくしかないようです・・・

丁寧に教えていただきありがとうございました<(_ _*)>

*申し訳ないのですが、もし可能でしたら私の最初のコメントの名前をyunに変更して、その下のコメントを削除して頂けないでしょうか(滝汗
すみません(><;;
Posted by yun at 2004年12月24日 00:39
>yunさん
解像度の環境の違いですね。幅が1024もあれば十分かと思いますがそれより狭いとかぶってしまいます。個別記事の見え方とどちらの見え方を優先するかですね。
名前は変更しておきました。
Posted by junike at 2004年12月24日 20:19
こちらを参考に3カラム化することができました。
とても分かりやすくてスムーズにできました。
ありがとうございます!
Posted by peace at 2004年12月31日 23:33
3カラムの作り方を参考にさせていただきました。
ありがとうございました。
TBも送らさせていただいたのでどうぞ一度見に来てみて下さい。
お待ちしております。
Posted by kei at 2005年01月04日 00:06
3カラム成功しました。ありがとうございます。
せっかく成功したのに肝心な画像表示ができなくなってしまいました。。

個別記事でも3カラムをするためいろいろいじりすぎたのかもしれません。。
画面を縮小さして見ていただくとわかるように記事のうしろに画像があるようなんです。。記事の上では画像は空白でクリックすると初めて見れます。

このような場合はどこをどう治せばよいのでしょうか??(><)
Posted by くみ at 2005年01月08日 22:01
>くみさん
CSSに以下の記述を追加してCSSの再構築をすれば表示されるようになるでしょう。

DIV.main IMG{
position: relative; z-index: 1;
}
Posted by junike at 2005年01月09日 00:29
早速のお返事ありがとうございます!
CSSに貼るだけで無事表示されるようになり、感激しております。

勉強不足ですね・・・。

とても助かりました。(^^)ありがとうございます!!
Posted by くみ at 2005年01月09日 12:46
おかげさまで念願の3カラム化ができました。
ありがとうございます。
Posted by ヤフオクは稼げる。ブログは儲かる、 at 2005年01月10日 15:44
3カラム化の具体的な方法、ありがとうございました。参考にさせて頂きました。まだ修正が必要そうですが、いろいろやってみたいと思います。
Posted by moukotanemnjp at 2005年01月10日 16:54
こんにちは。質問なのですが
StyleSwitcherで2カラムにしたり3カラムにしたりしたいのですが
3カラム用のスタイルシートをこちらの通りにしたのに
2カラムのほうも3カラムのように左右に分かれてしまい
デザインが崩れてしまうのですが・・・

こちらでは、キレイにできていますよね。
StyleSwitcher使用では何かコツがあるのでしょうか?
Posted by Daisy at 2005年01月14日 13:30
>Daisyさん
2カラム用のCSSファイルの中のlinks2のtopの数値をものすごく大きくして(ここでは5300px)、rightの代わりにlinksと同じ値のleftを指定しているだけです。
つまり、右サイドバーの始まりの位置を左サイドバーの下の方に固定しています。
左サイドバーのプラグインコンテンツのうち高さが変わってしまうものが含まれていると、もっとも長い場合と短い場合とで左サイドバー全体の高さが変わってしまいます。
それでも左サイドバーの下に持ってきた右サイドバーに相当していた部分の開始位置は固定ですから、元々の左サイドバー全体のもっとも長い場合を想定してlinks2の高さを決めています。
その証拠にこのBlogで2カラム表示にすると、左サイドバーの最後のプラグインと右サイドバーにあった最初のプラグインの間がちょっと間延びしています。左サイドバーがもう少し長くなったときのことを考えてのことです。
Daisyさんのところはプラグインのほとんどをチェックボタンによる開閉式にしているのでこのやり方はあまりおすすめではないかもしれませんね。

links2の位置をtopやleft、rightで指定している以上、そうするしか思いつきません。
(わかりずらい文章なので、また何かあれば質問してください)
Posted by junike at 2005年01月14日 22:42
はじめまして。ただいま3カラムチャレンジ中です。
下記文章について、ど素人なので教えて頂きたいのですが…

メモ帳で
document.write('</div><div id="links2">');
の一行だけを書いて、拡張子を「.js」にして適当な名前で保存します。(ワードパッドのリッチテキスト形式はだめです)
「拡張子を「.js」にして保存」というのは、たとえばメモ帳でいえば、メニューから「ファイル-名前をつけて保存」で開いた画面の「ファイル名」のところに「*.txt」とありますが、それを「3column.js」などに書き換えて保存すればOKです。

とありますが、普通のワードでダメなんですか?WIN98なのか『メモ帳』が見当たらないので、他の方法がありましたら教えて頂ければと思います。宜しくお願いします。
Posted by パパ at 2005年01月15日 00:22
>パパさん
Wordでは保存するときにファイルの種類で「書式なし(*.txt)」というようなものを選んで保存すれば大丈夫かと思います。
メモ帳はWindowsのスタートボタンの中に「ファイル名を指定して実行」があればそれを選択して「notepad」と入れれば起動されます。
だいたい「スタート-プログラム-アクセサリ」の中にあるかとは思いますが。
Posted by junike at 2005年01月15日 11:14
早速の回答有難うございます。なんとか3カラムになりました。ちょっといじらないといけないですが、ちょこちょこやってみます。本当に有難うございます。m−m
Posted by パパ at 2005年01月15日 21:28
はじめまして。

3カラム化にしてみようと色々と設定をしてみたのですが、左側にコンテンツが表示されません…「最新トラックバックの表示」と「頑張れ受験生の」のコンテンツの間にjavascriptで3カラム化をいれてみたんですけど…
アドバイスをお願いします。
Posted by すがし at 2005年01月16日 14:39
左側にコンテンツが表示されません
ではなくて
左側にしか…のマチガイでした(@_@)すいません。
Posted by すがし at 2005年01月16日 15:43
>すがしさん
「「最新トラックバックの表示」と「頑張れ受験生の」のコンテンツの間」のソースを見てみましたが、1行だけのJavascript文が入っていませんでした。
JavascriptプラグインでURLを指定するところで、自分が名前をつけてサーバーにアップしたそのままのものを指定していませんか?
ファイルは通常はアップすると不規則な名前のファイル名に変換されてしまいます。そのファイル名を指定するようなURLにしてください。
それでもだめな場合は作ったJavascriptファイルの保存形式か拡張子がおかしいかなどが考えられます。
Posted by junike at 2005年01月16日 16:49
このブログをみて、ブログの3カラム化を実施しました。
大変役に立つ情報提供ありがとうございました。
Posted by 亀太郎 at 2005年01月16日 17:23
アドバイスありがとうございます!3カラム化に成功しました(^o^)丿
Posted by すがし at 2005年01月17日 15:00
はじめまして^−^
コチラの記事を参考にさせていただいて,3カラム化に成功しました。
画像解説つきでとても分かりやすかったです。みなさんが利用されるのが良く分かります♪
本当にありがとうございました。
また,ご都合がつきましたら3カラム化がこれでよいかアドバイスいただけるとうれしいです。よろしくお願いします。


Posted by らぶ at 2005年01月19日 19:22
地獄変00さんのところから来ました。
親切な解説のおかげで簡単に出来ました!
ほんとうにありがとうございます。
Posted by サクラ at 2005年01月20日 15:42
友達のページからリンクをたどり、参考にさせていただきました。

ちょうど「flower_message」デザインだったのですが、キレイに出来ました。

ありがとうございます*・ω・)ノ
Posted by かるかる。 at 2005年01月21日 15:37
3カラムの方法をもとめてここに辿り着いたんですが、すごく参考になりました!
おかげで無事、3カラムに変更することができました。うれしいです♪
ありがとうございました(^^)
Posted by titatita at 2005年01月23日 14:29
お忙しい中,ブログを見に来てくださってありがとうございます。
コメントのお返事が遅くなってスミマセン(汗)
うまくいってるということでホッとしています^−^
これからの記事を楽しみにしています。
どうぞよろしくお願いします♪
Posted by らぶ at 2005年01月24日 07:41
Junikeさん はじめまして
あちこちのBLOGをみてまわって、
3カラム(カラムっていうのね メモメモ・・)のBLOGをちらほらみかけ
うちのBLOGはなんで2なのかなとなやんでおりました

デザインだけに依存するのかとおもいきや、そうではなかったんですね
この記事を参考に3カラムに挑戦させていただきます
ありがとうございました^^
Posted by themanwho at 2005年01月25日 12:20
Junikeさん はじめまして。
こちらの説明で行ったのですが、なかなか
うまくいかず、苦戦してます。

スタイルシートは素人なので、ただ単に
コピペしのたのですが、数値設定をする
必要があるのでしょうか?

よろしくお願いします。
Posted by amuse_master at 2005年01月27日 22:52
junikeさん、はじめまして。殿熊と申します。
早速質問で申し訳ないのですが、
3カラムにはなったのですが、ページ上のえべっさん
(タイトルというのでしょうか?)がうまく表示されません。
どうしても3カラムでいきたいので、
とりあえずこのままにして、自分でも考えてみますが、
ご指導お願いいたします。
3カラムの設定は2004.11.11のタイプでしました。

Posted by 殿熊 at 2005年01月28日 13:32
>amuse masterさん
まず、スタイルシートの編集がされていません。countainerとかlinks2とかがありません。
それからJavascriptファイルは記事に貼るものではありません。Javascriptファイルの名前が変わってしまうのと、その場所を知るためにURLをコピーしておけばいいので、記事そのものは保存しなくてもいいのです。
ちなみにJavascriptプラグインで指定するURLは
 h_ttp://blogmaster.livedoor.biz/70390d55.js
のようです(リンクがつかないように間に"_"を入れてます)。
基本的な部分ができていないので、もう一度この記事を最初から読みながらやってみてください。

>殿熊さん
返事が遅れましたが、その後試行してうまくいったのでしょうか?
いま拝見しに行きましたが表示されているようです。

Posted by junike at 2005年01月28日 20:36
junikeさん、ご回答ありがとうございます。
ご指摘頂いたcountainerとlinks2が入っていない
という点に着目して確認しましたら、デザインの
設定画面においてCUSTOMを選択し「変更する」を
実行してませんでした。

テーマの設定画面で保存するを押した後、すぐに
blog構築をしてしまったので、データは保存された
ものの、そのデータが反映されてなかった、という
こと。非常にお粗末なミスでした。

初歩的なミスでお手を煩わせてしまった事を
お詫び申し上げます。ありがとうございました。
Posted by amuse_master at 2005年01月28日 21:12
トラックバックの記事削除ありがとうございました。
なんせ初トラックバックになってしまいご迷惑お掛けしましたm(_ _)m

3段カラムにするのはとてもわかりやすく記載してあったので
すんなりできたのですが、ブログ自体をセンター寄せにするのが
なかなか悪戦苦闘でした。。。(^。^;)

今はなんとかできてブログ2日目を満喫しております(笑)

ありがとうございました。
Posted by TETSUYA at 2005年01月29日 17:17
junikeさん。殿熊です。
早速回答していただきましてありがとうございます。
タイトルが真ん中にこないので、
Blogの設定の「タイトル・説明」にスペースを入れて
真ん中にもってきました。
あの一番上のカラフルはえべっさんは移動できないのでしょうか?
左端が黄色くなってしまっているので
えべっさんを左端から右端までシッカリ表示すること(拡大??)
それか、センターに寄せる方法は無いのでしょうか?
Posted by 殿熊 at 2005年01月29日 21:35
>殿熊さん
タイトルは .blogtitle の PADDING-LEFT をたとえば 400px などとすればだいたい真ん中に来るのではないでしょうか(その前にタイトルの前に入れたというスペースを取って)。
タイトルの下の説明は .description ですのでそれの PADDING-LEFT をたとえば 100px にするとか。
タイトル部分の画像ですが、これは #banner と #subbanner の BACKGROUND の後ろの方にある
 no-repeat 50% 0px; を
 no-repeat 25% 0px; くらいにしてみればだいたいいい位置に来るのではないでしょうか。
それらの数値を試してみてください。

Posted by junike at 2005年01月30日 11:26
junikeさん初めまして((_ _*
こちらの記事を元に3カラムにしてみました。
画像付きでとても簡単に出来ました。ありがとうございます(*^-^*)
livedoorのテンプレではなく配布してらっしゃる方のテンプレートを使用していますが自分で2カラムのものを3カラムに変更したのでちゃんと表示されているか(サイドバーが落ちてないか,記事と被ってないかなど)心配です。もしwindowsで崩れていたら教えて下さいm(_ _)m
macでは大丈夫みたいです(本当はもうちょっと真ん中の記事を左に寄せたいんですが…)
Posted by ちび at 2005年01月30日 14:15
>ちびさん
Windowsでもきちんと見えてますよ(IE6.0で確認)
真ん中の記事をもう少し左に寄せるなら
#content の margin-left を 10px くらい小さくしてみたらどうでしょうか?
Posted by junike at 2005年01月30日 17:39
junikeさん見て頂いてありがとうございます〜!windowsでも崩れてないとわかり安心しました。
変にいじくると取りかえしのつかない事になるのでわからない部分は触れませんでした;
記事部分も真ん中に来てやっと完成しました。ありがとうございました(^-^*
Posted by ちび at 2005年01月30日 21:54
junikeさん。
親切な対応していただきまして、本当にありがとうございました。
スペースも今はずして、junikeさんの指示通り数値の調整をし、
無事移動しました。再構築する時、毎回ドキドキするけど、
思い通りになるととってもうれしいです。
早く、自分の殿熊のイラストを背景にしてみたいです。
まだ何も準備できてないけど・・。
Posted by 殿熊 at 2005年01月31日 23:15
はじめまして、sou と申します。
親切な説明でスタイルシートをいじったことのない私でも3カラム化できました。
ありがとうございます。
Posted by sou at 2005年02月02日 23:55
はじめまして。
わたくしのブログも念願かなって3カラム化することができました。
ありがとうございます。

しかしそれに伴って本文の画像が全く表示されなくなってしまいました。
これはブラウザのせいでしょうか?
みなさんは見られますでしょうか?

一体どういうことなのでしょうか。分かる方、教えてください。
Posted by 船橋染六郎 at 2005年02月07日 06:49
あ、注意書きに書いてありますね。
これやったら直りました。
たびたび感謝です。
Posted by 船橋染六郎 at 2005年02月07日 06:53
はじめまして!とっても参考になりました。でも私のサイトちょっと変なんですよね・・・。ブラウザの幅が変わると左サイドバーが思いっきりずれてしまます。「お気に入り」なんかをはずすとひどいものです。何故なんでしょう?
どなたかアドバイスいただけないでしょうか?
Posted by 諸葛亮 at 2005年02月07日 14:35
>諸葛亮さん
WindowsでIE6.0で見た限り、問題なさそうですかその後直ったのでしょうか?
Posted by junike at 2005年02月07日 19:40
見ていただいてありがとうございます!!
残念ながら直りません。画面の左の「お気に入り」
のところを外しで画面が大きくなったら、変な画面になります。
真中のコラムがながーくなって、左サイドバーがずれるんです。
どうすればよろしいのでしょうか???
Posted by 諸葛亮 at 2005年02月07日 23:34
>諸葛亮さん
「お気に入り」ツールバーをはずしてもはずさなくても
真ん中のカラムは長くなっています(2/1の記事まで)。その長さは変わりません。
左サイドバーがずれるというのはどういうことでしょうか?
WindowsのIEで見ている限りその様子がわかりません。
どんなふうにずれているのか、画面キャプチャ(画像)をご自分のBlogにアップしてもらえればわかるかもしれません。
また諸葛亮さんはどのような環境で見ていますか(WinかMacか、ブラウザは何か、画面の解像度は?)
(夜、家に帰ったらCSSを見てみますが)
Posted by junike at 2005年02月08日 12:55
家でも会社でもWinです。家は98、会社は2000です。またIEでもFIREFOXでも見てますが、やはり中カラムが長くなってその分サイドバーが左に行くって感じです。何とかタイトル(色のついた部分)内に中カラムも左サイドバーも収めたいのですが・・・。それから、PC初心者なので画像のアップ方法も?なんです。ごめんなさい。よろしくお願いします。
Posted by 諸葛亮 at 2005年02月08日 18:46
>諸葛亮さん
タイトルの幅に収めたいということとCSSを見てわかりました。
CSSファイル内に #container が2箇所ありました。
いちばん下につけた方を削除して、上の方にある#containerを
↓これに差し替えてみてください。

#container {
MARGIN: auto;
padding: 0px;
WIDTH: 750px;
TEXT-ALIGN: left;
position: relative;
}

これで意図するもになるのではないでしょうか?
Posted by junike at 2005年02月08日 20:38
ありがとうございます!!!3カラム完成しました!
ホント、何から何までPC初心者の私に親切丁寧に教え
ていただいてありがとうございました。今後ともよろ
しくお願いします。
Posted by 諸葛亮 at 2005年02月08日 22:25
はじめまして。

こちらを参考に数回ほど3カラム化を挑戦してみたのですが、
うまくいきません。よろしければご教授お願いします。

症状は、毎回同じで
左のサイドバーが、一番左に寄らず真ん中の記事の部分に含まれてしまっています。
(右のサイドバーは一番右にきちんと寄っています)

この原因がわかりません,,,

CSSの書き換えは、問題ないと思います。(おそらく)
で、あとは.jsファイルですが、これはメモ帳で一行だけコピペして
ファイル名を「〜〜.js」に変換すればよろしいんでしょうか?
ファイル名は「〜〜.js」に変わりますが、アイコンがメモ帳のままに
なっているんですけどこれはどうでしょうか。

で、このファイルをアップロードしてurlをJSプラグインに設定して
あとは書かれているとうりにやりましたがうまくいきませんでした。

よろしくお願いします。



Posted by wakadanna at 2005年02月09日 14:48
>wakadannnaさん
アイコンがメモ帳のままというのは、まだファイルがテキストファイルのままということではないでしょうか。
おそらく「3column.js.txt」などというファイル名になっていてそのうちの「.txt」の部分が見えないとか。
wakadannnaさんのエクスプローラーの設定が拡張子を表示しないモードになっているとそうなってしまうかもしれないので、エクスプローラのオプション設定画面で拡張子を表示するようにしてファイル名を「3column.js」で終わるようにしてからそれをアップして試してください。
(それにしても右サイドバーがしっかり表示されているのが変ですが。#countainerが2箇所あるなどのダブりがないかどうかも確認してください)
Posted by junike at 2005年02月09日 17:39
3カラム化の手順参考にさせていただきました。
とても整理されていて初心者の私にもわかりやすかったです。
Posted by Porter at 2005年02月09日 21:08
いつも拝見させていただいていますが、コメントするのははじめまして。
今回の容量増加に伴って、JavaSファイルがアップロードできなくなってしまいましたね(今のところ)
そうなると3カラムも、これからやる方は「sidetitle」「side」の装飾を考慮したテンプレートにして、フリーエリアで「links2」を設けなければならなくなってしまうのでしょうか。
こちらもテンプレート配布などしているので非常に困惑しています。
Posted by Noah at 2005年02月11日 03:50
こんばんは。はじめまして。
ライブドアのブログを3カラムにしようと参考にしていますが、
jsファイルがアップロードできないようです。
どうしたらいいのでしょうか?
教えていただけませんか?
Posted by takekyo at 2005年02月11日 23:18
>takekyoさん
jsファイルをつくってアップする代わりに、
フリーエリアプラグインを使ってそこに

</div></div><div id="links2"><div>

と書いたものを保存して左サイドバーの一番下のところにくるように順番を指定してください。
それだけだと何もタイトルも中身もないプラグインがあるだけなので何か文章なりリンクなりを書いて、その最後に上のタグを入れておくと見た目はそれなりになるでしょう。
Posted by junike at 2005年02月12日 10:40
>Noahさん
はじめまして。
さっそくファイルのアップができないと戸惑う方が出てきたので、フリーエリアを利用する方法に記事の内容を変更しました。

>「sidetitle」「side」の装飾を考慮した
の部分がどの程度されなければならないのか、いろんなテンプレートがありますからわかりませんが、とりあえず side を border で囲ってても大丈夫なようなのでこれで様子を見てみます。
Posted by junike at 2005年02月12日 11:54
以前からこの方法で3カラムにしてるんですが、
自分が使ってる標準のテンプレートでは
containerとcontentのpositionをrelative;にすると
linksの制御が利かない自体が発生したんで

containerのpositionの指定なし。
contentのpositionの指定なし。
links、links2のpositionはabsolute;。
に今現在なってます。

なにか問題でもあるんでしょうか?
表示速度が遅くなる気もしないではないんですが。
Posted by sonyfan at 2005年02月12日 13:29
>sonyfanさん
countainer と content に position を入れているのはMac版IEで崩れるのを防ぐためです。
もしMac版IEでも崩れていないようなら問題ないと思いますが、ぼくはMacを持っていないので確認できません。
Posted by junike at 2005年02月12日 17:24
junikeさん。
3カラム化の時は大変お世話になりました。
あの〜2/10の開発日誌でのことで質問です。
現在、以前設定した3カラムは全然異常ないのですけど、
junikeさんの言う
>PROユーザーはFTPによりアップできます
と言うのをやりなおさないと、今の3カラムは崩れてしまうのでしょうか?

Posted by 殿熊 at 2005年02月12日 23:47
>junikeさん
記事の変更お疲れ様です。

>「sidetitle」「side」の装飾を考慮した
空のフリーエリアを考慮する方法(フリーエリアをひとつ作ってそこに「links2」生成の為のタグを書き込む)を想定して発言していました。
確かにjunikeさんの現在アップされている方法ならば、吐き出されるソースとしても特に問題はないようですね。大変失礼致しました。

3カラムの定番記事をおつくりになり、そのコメント、質問にひとつひとつお答えすること、お疲れのことと存じます。どうぞご自愛ください。
Posted by Noah at 2005年02月13日 00:06
>殿熊さん
今3カラム化してあるBlogはそのまま利用できますので崩れることはありません。したがってやり直す必要もありません。
もしデザインを他に変更しようとしても、一度アップしたjsファイルはそのまま残っていますので、3カラム化として挿入したjsプラグインはそのまま利用できます。
アップできるファイルの種類が制限されてしまった現在、jsファイルをアップできる方法はPROユーザーが利用できるFTPによる場合だけになってしまったということです。

>Noahさん
お気遣いありがとうございます。
ちょっと楽観的かもしれませんが、多分今回のファイルの種類制限は何らかの形でもう少し緩められるような気がしています。中の人には届くとは思うのですが。。
Posted by junike at 2005年02月13日 00:31
junikeさん。ご回答ありがとうございました。
いろんなところを見ても分からなかったので、
ついついjunikeさんを頼ってしまいました。
いつも親切に答えていただきまして、
本当にありがとうございます。
Posted by 殿熊 at 2005年02月13日 13:16
はじめまして。
3カラムにしようと思い、こちらのサイトや他のサイトを参考にして、
なんとか成功しました。

しかし、IEで確認したところ、最新の記事のタイトルの背景が表示されません。
(Oreraでは表示されるのですが・・・)

よろしければ教えて下さい。
お願いします。
Posted by さゆり at 2005年02月13日 16:51
>さゆりさん
CSSの .date に
 Z-INDEX: 1; POSITION: relative;
を入れてみてください。
出ると思います。
Posted by junike at 2005年02月13日 17:30
junikeさんありがとうございました。
正しく表示されるようになりました。
それと、OreraじゃなくてOperaでした。

こんなに早く対応してもらい、
本当にありがとうございました。
Posted by さゆり at 2005年02月13日 17:41
こんばんは。
メモスペースでの3カラム化。さっそく変更しました。
一度Java scriptで設定していたので、簡単に変更できました。
ありがとうございました!
Posted by しげ at 2005年02月13日 21:32
はじめまして。ド素人の私が今回3カラムに挑戦したのですが、(無謀ですよね)左側には並び順1のものしか入らないんです。順番の付け方がまずいのでしょうか?説明不足ですみません。教えてください。
Posted by りょうこう at 2005年02月14日 11:05
>りょうこうさん
2点あります。
まず、#countainer が見当たりませんので、これを入れてください。
次にフリーメモに入れたlinks2が2箇所にあります。1箇所だけにしてください。
これで大丈夫かと思います。
Posted by junike at 2005年02月14日 19:49
こんばんは。早速お答えいただきありがとうございます。
自分では説明いただいたようにやったつもりなんですが、
どうもうまくいってません。
それともう1点、本文がすべて繋がってしまうのです。
改行もしているんですが・・・。
かなり読みづらいですよね。解決策があるのでしょうか?
教えてください!
Posted by りょうこう at 2005年02月14日 21:20
はじめまして、いきなりなんですけど、自分のぺージを見てもらうとわかるんですけど右側の空白をなくしたいんですけど、どのようにすればいいですか?
Posted by o15 at 2005年02月14日 21:55
>りょうこうさん
#countainer は入りましたが、
 </div></div><div id="links2"><div>
が2箇所に入ったままです。とりあえず「Archives」のあとの「おすすめ」のプラグインを1つ削除してみてください。
そうするとカレンダーなどが左サイドに来て、Google検索の入った方の「おすすめ」が左サイドのいちばん下に来ると思います。そこでlinks2を入れているので右サイドバーにあるのはおそらくlivedoorBlogのロゴだけになると思います。
もし、たとえば「アフィリエイト本」を右サイドバーに持ってきたかったら、Google検索のある方の「おすすめ」のプラグインよりも後の番号をつけてプラグインの設定で並び替えてください。
本文が続いてしまうというのは、記事を書く画面の下の方に「フォーマット」という行があって、「改行を<br/>タグに変換」を選択した状態で保存すれば、改行を自動的にしてくれます。そこを確認してください。

>o15さん
右側の空白というのは「釣り日記」というBlogのタイトルやlivedoorのロゴのある部分の右側のことでしょうか?
だとして、そこをなくしたあとはどうしたいのでしょうか?
基本的にはBlogタイトルの部分は同じ高さの幅で左右いっぱいになっているものです。
それでもたとえば links2 の TOP をいまは 190px だと思いますが、それを 40px くらいにして「MYブログLIST」と「NEWS」の順番を入れ替えれば右上にニュースが入るような感じにはできます(ちょうどいい高さになるように数値は調整してください)。
Posted by junike at 2005年02月14日 23:29
junikeさん、はじめまして。
トラックバックさせていただいたところ、すぐにFTPを利用した
Javascriptファイルをアップする方法を教えていただきました。
おかげさまで、連休中にはなんとか3カラム化を達成すること
ができました。

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

お礼が遅くなってしまい、大変申し訳ありません。
これからもよろしくお願い致します。
Posted by roppyakuman at 2005年02月15日 00:22
junike様 早速のご返答ありがとうございます。
タイトルではなくて、ぺージ全体の右側なんですけど、右にスクロールさせると、本体の倍くらいの空白ができてしまっています。何しろ知識が薄いものですいません。
Posted by o15 at 2005年02月15日 10:20
はじめまして。
とても丁寧な説明でわかりやすかったです。
簡単に変更できました。

本当にありがとうございます!
Posted by とれたま at 2005年02月15日 12:18
>o15さん
家で見たらおかしくなかったのですが、会社で見たらおかしいですね。
もう一度家に帰ったらよく見てみますのでもう少しお待ちください。
Posted by junike at 2005年02月15日 12:43
junike様へ
なんだか色々いじくっていたら直ってしまいました。
おそらくトップページへの表示形式を20件としたためと思われます。(今までは、60件)
おかげで、ぺージも軽くなったみたいです。
いろいろご心配かけました。これからもjunike様のぺージを利用させていただきます。ありがとうございました。
Posted by o15 at 2005年02月15日 13:54
>o15さん
とりあえず直ったようなので見る手間がはぶけてよかったです。
表示件数60件はさすがに多すぎます。ただ、表示件数がそんなところに影響が出るのか初めてのケースですので、ちょっと頭の片隅に入れておきます。
Posted by junike at 2005年02月15日 20:41
JAVAを使用しない3カラム化を紹介中です!是非アクセスください!
Posted by 今日から始めるアフィリエイト作成中! at 2005年02月15日 22:32
junike様。
私のページ見ていただいたんですね。
ありがとうございます。
livedoorのロゴが重なっていたので
質問しようと思っていたのですが気づいてくださったんですね。
アドバイスいただいたとおりやるとできました!
junikeさんのおかげで、ド素人にも3カラム化できました。
ありがとうございました。
Posted by りょうこう at 2005年02月16日 07:01
初めまして。

他サイトで紹介していた3カラム化(Javascriptファイルを使用した方法)
を行い3カラム化は出来たのですが、Macで見るとデザインが崩れるという
報告を貰ったのでこちらで紹介しているMac対策を行ったところ画像が消え
てしまいました(対策を行う前は表示出来てました)。そこで同じく紹介されている

DIV.main IMG{
position: relative; z-index: 1;
}

をCSSに入れたのですがそれでも解消されません。
[blogbody]内の「BACKGROUND-COLOR: #ffffff」の記述を削除してみたの
ですがそれでも解消されませんでした。現在はMac対策前に戻しています。
身勝手かと思いますが何かアドバイスを頂ければ助かります。
Posted by リキ at 2005年02月16日 18:29
>リキさん
Mac対策前とされるCSSを拝見しました。
#countainer が2箇所ありましたので、どちらかを削除してください。
この段階でも表示されないのかどうかをまず確認してみてください。
それでもだめなら、拝見したところ画像はサイドバーにしか見受けられなかったので表示されない画像というのがそれだとするとCSSに

DIV.side IMG{
position: relative; z-index: 1;
}

を入れてみてください。main を side にしただけですが、main は記事本文中にあるIMGタグに対して有効なものなので、サイドバーの画像はまた別かなと思い、書いてみました。ぼくもこれは試したことがないし、有効かどうかわからないのですが、思いつくものとしてはそのくらいです。

結果が出たら、またここにコメントをお願いします。
(質問の仕方が的確で完璧だったので助かります)
Posted by junike at 2005年02月16日 20:38
アドバイスありがとうございました。

アドバイス通りやって上手くいきました。Macでも崩れずに観れる事も確認
しました。

とても助かりました。改めてありがとうございます。
Posted by リキ at 2005年02月16日 23:03
はじめまして。

この記事凄く参考になりました!!

設定次第で随分と見栄えも変わってくるんだなぁーと思いました。
Posted by かにみそ at 2005年02月17日 00:07
色々なブログを見ていて、3カラムっていいなぁと思っていたのですが、やり方がわかりませんでした。でも、junikeさんのページの説明でバッチリカラムにすることが出来ました!!blogのwidth所をautoにした時に写真が表示されなかったりまだまだ自分の努力が足りないところなどありますが、本当に感謝しています。もっと頑張ってみます。本当にありがとうございました!
Posted by まさ at 2005年02月17日 00:15
はじめまして
3カラムを導入しましたが、自分のサイトに入ると画面
がチカチカと点滅したような感じになります。サイト運営自体に支障
はないんですが、原因が分かる方はアドバイスお願いします。
Posted by ひで at 2005年02月17日 17:44
こんにちわ。はじめまして。
今日、3カラムチャレンジしました。すごく解りやすくて参考になったんですが、右の上にライブドアのロゴがきて移動しません。
まったくの初心者で申し訳ないのですがこの問題はどうすればいいのでしょうか?

Posted by エル at 2005年02月17日 23:50
>エルさん
「当ブログの画像について」の英文のあとにもlinks2のタグがあります。
それを削除してください。

>ひでさん
チカチカのことはよくわかりません。
Posted by junike at 2005年02月18日 12:45
トラックバックさせていただきました。
大変わかりやすい説明で3カラムにすることができました。

私のブログで小春日和の陽射しの中でさんの事を
紹介させていただきました。
カスタマイズの事これからも、参考にさせていただきます。
ありがとうございました。
Posted by ひでぼう at 2005年02月18日 13:57
はじめまして
3カラムをするのにこちらを参考にさせていただきました。
図解入りでわかりやすく、出来たときはニヤリでした。
トラックバックもやったことが無かったので
2重になって失礼かとも思いましたが、トラックバックさせていただきました。
これからも「Blogカスタマイズ」を参考にはげみたいと思います
本当にありがとうございました
Posted by 3日坊主 at 2005年02月18日 18:21
はじめまして!!
3カラムの勉強させて頂きました。
大変参考になりました。
まだまだですが・・・少しずつ
修正していこうと思います。
本当にありがとうございます。
Posted by ティーモ at 2005年02月19日 01:44
はじめまして。このたび3カラムにチャレンジする際、
たいへん参考にさせていただきました。
まだまだ初心者でわかりませんが、少しずつ勉強して
いこうと思います。ありがとうございました。
Posted by tomy at 2005年02月19日 11:25
非常にわかりやすくすんなりと3カラム化できました。
ありがとうございました。
Posted by 超拓 at 2005年02月20日 13:46
以前にもお世話になったんですけど、また疑問があったので、お願いします。
友達に「お前のブログ重くて読みにくい」 と指摘がありました。

写真が沢山貼ってある訳でもない と自分では思っているんですけど。

ちなみに友達は、WIN98 自分は、XP です

回線は 二人とも同じ会社のものを利用しています。
Posted by o15 at 2005年02月21日 01:53
>o15さん
ぼくが見る限り重くはないです。
そのお友達の環境では、livedoorBlogで3カラム化しているところはすべて重いのではないでしょうか?
回線の会社が同じで速度も同じだとしてもOSによる違いは多少あるかもしれません(詳しくはわかりません)。

少し補足すれば、HTML編集でいじっていない場合は
 真ん中のカラム→links2より前(たいがい左サイドバー)→links2より後(たいがい右サイドバー)
の順に表示されます。なので真ん中の記事のカラムの表示件数が60件などと多い場合はそれだけサイドバーが表示されるのが遅くなり、見た目に「表示が遅い→重い」ということになります。
またたとえば左サイドバーに、livedoorBlog以外のサーバーへ何かを読みに行くようなコンテンツプラグインがあるとその分、表示が遅くなります。そのコンテンツのあるサーバーが落ちてたりすると読み込めないのでさらに表示が遅れますので、links2より前にはあまり外部に呼びにいくようなコンテンツは置かないほうがいいでしょう(o15さんの場合は、RSSを表示していますがこれは数も多くないですし大丈夫だと思います)。

といったところです。
Posted by junike at 2005年02月21日 20:18
junike様へ

ありがとうございます。

自分のブログは、問題ないとの事なので安心しました。

広告を排除したらどうなるのか、友達と試してみます。

(あんまり変わらないかもしれないけど)
Posted by o15 at 2005年02月22日 20:33
はじめまして。
以前3カラムにする際、参考にさせていただきました。ありがとうございました。

実は今回真ん中の記事部分を固定から可変に変えたところ、ブラウザの幅を縮めると、画像(3枚並べた)がサイドバーと重なってします。
本文はうまくいくのですが、画像だけが下へずれません。。。
いろいろ調べましたがどうしても解決できず、、、アドバイスいただけたら嬉しいです。
よろしくお願い致します。
Posted by m&M at 2005年02月27日 03:09
>m&Mさん
いろいろ試しましたがわかりませんでした。
そもそも#countainerがないのでそれを入れて、#contentもそれにあわせて適切に入れてみても左サイドバー(links)が消えてしまったりして、うまくいきません。それらがうまくいったうえでなら、画像も折り返しができるという前例はあったのですが、それができないので#countainerなしでできないかいろいろ試したのですがわかりませんでした。
画像の2枚目のあとに改行を入れるなどするしかないでしょう(2枚目よりも幅を狭くしたら2枚目の画像が右サイドバーと重なりますが)。あるいは3枚目の画像が重なってしまうのをあきらめてもらうか。
もしうまくいったら教えてください。
Posted by junike at 2005年02月27日 12:00
junike さん
こんにちは。
結局もとの固定に戻すことに致しました。
いろいろ試していただいたようで、お手数おかけしました。。。
私も同様にcontainerを入れてみたのですが、やはりうまく動きませんでした。
そもそもコレはなくてもよいものなのでしょうか?

もうひとつよろしければご伝授願いたいのですが、表示画面全体をセンタリングするのにはどうしたらよいのでしょうか。

お世話になります、どうぞよろしくお願い致します。


Posted by m&M at 2005年02月27日 17:38
>m&Mさん
containerはMac版IE対策でcontentとあわせてposition:relativeで指定することによって崩れなくするために入れているものなのですが、全体幅固定のまま全体が中央に寄せられるというふうにするときにも使われます。その際はcontainerにwidthを指定します(contentではなく)。
しかし、こうすればできるはずという記述にしてもm&Mさんのページはなぜかできません。containerはページ全部を囲むいちばんの外枠にあたるのですがそれがきいてないのか何かがおかしくてできないです。containerなしで全体幅固定のまま中央に寄せるやり方がわからないので、この段階ではどうすればいいかわかりません。
これはオリジナルのテンプレートなんですか?ライブドアのテンプレートにありますか? 元にしたテンプレを最初から3カラム化してみればわかるような気もしますが。。

※追記
blogtitleでtextを-500で左の見えない方に隠している処理がありますね。これが影響していることが考えられます。
Posted by junike at 2005年02月27日 21:42
はじめまして、btrfと申します。
3カラムの記事、大変参考にさせて頂きました。ありがとうございます。
これからもいろいろと参考にさせて貰うかもしれませんが、よろしくお願いします。ありがとうございます。
Posted by betf at 2005年02月28日 12:37
junike さん こんにちは

ライブドアブログのポイントって投稿回数だけで増減するんですか?

全くjunike さん のブログと関係ない趣旨の質問ですいません。
Posted by o15 at 2005年02月28日 14:46
>o15さん
ライブドラブログのポイントの基準は二転三転して結局いまどうなっているのかわかりません。
投稿回数ではなくて、純粋にアクセス数をベースに何か重みをつけてるとかしてるのではないでしょうか。勝手な想像ですが。
Posted by junike at 2005年02月28日 20:01
junike様へ

ありがとうございます。

アクセス数ですか。一番難しいですよね。

釣りネタだけだと誰も見てくれないんですもん。

こつこつやりますか。
Posted by o15 at 2005年02月28日 20:40
junike さん
こんばんは、たいへんお世話になっております、m&Mです。
やっぱりうちのちょっと変?ですよね。
確かにこうすればOKという記述通りにしても、できないことが多いです。
テンプレートですが、まずdefaultを使いその後customで色等を変更し、現在の3カラムに到りました。

>blogtitleでtextを-500で左の見えない方に隠している処理がありますね。これが影響していることが考えられます。

あまりよく覚えていなくて申し訳ないのですが、左端にブログタイトルが表示されるようにする為に(というか今現在のタイトル表示)した処理で、どうして-500なのかは定かではありませんです。
そういえば、アクセス解析も本来ならば右上隅に表示されるはずなのに、3カラムにしてからちょっと下がってしまいました。

とりあえず、崩れることなく見れているようであれば、このままで行こうかと思っております。
何かお気づきになる点があるようでしたら、ご一報くださると助かります。
Posted by m&M at 2005年03月01日 03:02
junike さん 初めましてこんばんは。
a_la_nicheと申します。

私も3カラムにしてみたい!と思っていたのですが何をしていいかわからなかったので、
とてもわかりやすく書いてあって大変参考になりました。
これからも参考にさせていただきたいと思います。ありがとうございました。
Posted by a_la_niche at 2005年03月01日 23:15
javascriptなしでの3カラム化の方法を参考にさせていただきました。大変助かりました。リンクも貼らせていただきました。ありがとうございました。
Posted by ゆら at 2005年03月04日 14:04
3カラムにされてる方のブログを見て、ずーっとやってみたいと思っていたのですが、ついに3カラム化することができました。
とても参考になりました。感謝感謝です。ありがとうございました。
Posted by そら at 2005年03月05日 01:39
junikeさん、初めまして
ひでにぃと申します

こちらで"livedoorBlogで3カラムにする手順[整理版]"拝見させていただきました
おかげで念願の3カラム化へカスタマイズする事が出来ました
ブログを始めて10日程度でまさか3カラム化できるなんて感動です
この場がなければおそらく実現してなかったと思います

junikeさんのおかげです。本当にありがとうございました
Posted by ひでにぃ at 2005年03月06日 13:58
3カラムにする方法として参考にさせて頂きました.ありがとうございました.
また,本文中にも紹介させて頂きました.
Posted by realshibuya at 2005年03月07日 02:18
ご指摘ありがとうございました.
真ん中のカラムを修正してみました.

IEを使ってないので,気が付きませんでした.
Posted by realshibuya at 2005年03月07日 21:33
はじめまして。
この記事を参考に、無事3カラムにする事が出来ました!

ただ、私はMACなので、
WINDOWSでもちゃんと表示されてるか、わからないのがちょっと不安。
MACのIEでちゃんと表示できたから、大丈夫かな?と思ってます。

説明がわかりやすくて、感謝の気持ちでいっぱいです。
どうもありがとうございました☆


Posted by kzakuo at 2005年03月08日 01:47
さっそくの報告、とっても助かりました。
ちゃんと表示されている事が分かって、ひと安心です。
前のコメントに引き続き、
さらに感謝の気持ちでいっぱいです。

ありがとうございました!!


Posted by kzakuo at 2005年03月09日 01:44
ずいぶん前から3カラムに挑戦しようと思っていたのですが、
右側のタイトルバーが全体にのびてしまったり、うまく表示されなかったりで、
いつもくじけていたのですが、
こちらのコメントをずっと読んでいたら、テーマによってはうまく行かないのではないか、と思い、
テーマをかえて挑戦したところ、うまくいきました。
やっと念願の3カラムになり、うれしく思っています。

二つ気になることがあるのですが、
タイトル全体が左寄りになってしまっていることと、
ウィンドウの幅が狭くなると右のカラムが真ん中のカラムにかぶってしまいます。
真ん中の行数を幅に合わせてかえることは可能ですか?
また、難しい技術が必要になるのでしょうか。
Posted by Nao at 2005年03月13日 19:19
>Naoさん
まず #countainer が2箇所ありますので最初の方を削除してください(width:743px;がある方)。

>タイトル全体が左寄りになってしまっていること
これは #banner と #subbanner の中の width を
WIDTH: auto; 
にして、.description 内に
TEXT-ALIGN: center;
を追加すれば幅を変えると一緒に動くと思います。

>ウィンドウの幅が狭くなると右のカラムが真ん中のカラムにかぶってしまいます。
真ん中の行数を幅に合わせてかえることは可能ですか?

これらは .blog の width の行を削除すれば同時に解決すると思います。
Posted by junike at 2005年03月13日 22:58
はじめまして。奥ヒダツヨシと申します。
こちらの記事を参考にブログを3カラムにすることが
出来ました。
どうもありがとうございました。
また参考になる記事をお願いします。
Posted by DRAGONS★VICTORY at 2005年03月13日 23:24
>junikeさん。
教えていただいたように変更いたしました。
これで大丈夫ですよね?
ありがとうございます。
Posted by Nao at 2005年03月14日 14:20
>Naoさん
大丈夫です。
Posted by junike at 2005年03月14日 19:38
 突然、失礼します。jeanneと申します。junikeさんのサイトをはじめ、色々な方の所見を参考にさせて頂き、3カラム化にチャレンジしている者です。狭義の意味では一応成功していますが、どうしても分からない点があり、悩んでいます。もしアドバイス頂ければと思いコメント欄を利用させて頂きました。ご快諾頂くことが出来る様でしたら、以下ご教示お願いします。

「経過」
 上記に習いCSS等を書換、変更し、自分のデザインに合わせ微調整。3カラム化に成功(環境:OS→WinMe、ブラウザ→IEのSP1?)。なおこちらのサイトでは説明がなかったのですが、containerについては当方使用しているデザイ ンに元々書かれていたものを上記コピペ用に書換する策をとりました。また、links及びlinks2のtopはデザインに合わせ117px→146pxに変更。上記環境下では不具合なく表示されています。
 
 別のPC(環境:OS→XP HOME、ブラウザ→IEのSP2)で閲覧すると、左右のサイドバーが微妙に上昇、サブタイトル部分と重なる現象が発生する事が判明しました。また、記事部分の幅が狭くなり、かつ左方向にずれる?状況も確認しました。

「疑問」
 ブラウザの種別やVer、環境設定に左右され、回避できない問題であれば、諦めもつくのですが、確認したところ上記2つのPCそれぞれで、不具合なく表示に成功されているサイトもあります。このことから、やはり私のCSSの組み方に問題があると推測しています。

 成功している中のひとり、tonosama0707さん(http://blog.livedoor.jp/tonosama0707/archives/14155895.html)
 にも現在アドバイスを頂戴している所ですが、氏の設定と私の設定では何が異なるのか、今一つよく分かりません。

 問題のひとつ、サイドバーとサブタイトルの重なりの件については、TOPのPXを大きくすれば解決しますが、この方法では閲覧するPC、ブラウザの違いでサイドバーのレイアウトが異なることになってしまい、なんだかすっきりしません。サブタイトルのフォントサイズを小さくする、または文字数を減らすことにより行を減らせば、とりあえず重なりは無くなり(実際には重なっていますが表示上は問題ない)体裁は整いますが、この方法も出来れば避けたいです。

 素朴な疑問なのですが、3カラムにする前の初期レイアウトでは、どんな状況下でも必ず記事部分とサイドバーの縦横先頭位置が揃うのに、3カラム化後のTOPのPXを設定したとたん環境に影響を受けるのは、どうしてなのでしょうか?

当方まだBlogを始めてから2週間もたっていない初心者で、HTMLやらCSSやらに関する知識は全く皆無と言ってもよい状況です。稚拙なものですが、私のサイトをご覧頂き(もし上記2つのPCで確認出来る環境でしたら比較して頂くと、違いがよく理解いただけると思います)、御指南いただければと思っています。

ちなみに上記XP HOME、IE→SP2のPCでjunikeさんのサイトのトップページを閲覧したときにも、右サイドバーの「amazon」以下のプラグインが左にずれ、記事部分と重なります。何故なんでしょう?一応ご報告致します。

それでは、よろしくお願いします。
Posted by jeanne at 2005年03月16日 14:30
>jeanneさん
残念ながら当方の環境はWin2000でIEは多分SP2ですので、右サイドバーが左にずれて記事部分と重なるというのが確認できません。

その環境から現在のjeanneさんのところを見ても何も不都合はなさそうに見えています。
ただ、ブラウザの幅を狭くすると右サイドバーが真ん中の記事に重なってしまっています。これは .blog で WIDTH: auto; にすることにより真ん中の記事の幅も可変となり重ならなくなります。

サブタイトルとサイドバーの重なりについてはわからないですが、真ん中の記事とサイドバーの位置がずれるのはサイドバーの開始位置をTOPで指定するとどうしてもいくらか差が出てしまうようです。

http://blog.livedoor.jp/smo/archives/74417.html
↑こちらに IEとNNBOXの計測方法を同じにする為 というので

{box-sizing: border-box}
{moz-box-sizing: border-box}

を入れるというのがあります。
http://www.keynavi.net/ja/bugh/css_misc.html
でも縦位置ではなく幅のことだけかもしれないので、おまじない程度に入れてもいいかもしれませんが、これも解決にはならないかもしれません。

ブラウザごとのずれをすべて対応させるのは難しいです。それらをすべて検証できる環境でもないですし、これにMacでどう見えるかまで含めると持っていない自分にとってはどうしょうもないです。

残念ですがその点についてはお力になれません。
Posted by junike at 2005年03月16日 21:04
はじめまして。
今まで色々なページを見て3カラムにチャレンジしてたのですが、中々うまく行かず、ここのページを見てなんとか成功しました。超初心者でも分かる説明、ありがとうございました!
ただ、見た目的にサイドの部分をもう少し狭くしたいのですが、widthを200px以下にすると、「Categories」とかカレンダーの「S M T W T F S 」って書いてある後ろの濃いピンク色のバーの部分が無くなってしまいます・・・
無くってもいいのですが、薄いピンクのバックに白文字じゃ読めなくて・・・

DIV.main IMG{
position: relative; z-index: 1;
}
DIV.side IMG{
position: relative; z-index: 1;
}
コレ↑も入れたのですが、やっぱり消えてしまいます。

どうすればうまく出来るんでしょう??
教えてもらえるとうれしいですm(__)m
Posted by くろみき at 2005年03月17日 13:23
>くろみきさん
こちらでも試してみましたがwidthを200px以下にしても濃いピンク色のバーが消えることが確認できませんでした。
この部分は画像を指定しているので幅を狭くすると、バーの左端は丸みを帯びているのに右端が角張っているという変な感じになるので、いっそのこと画像の指定をやめて同じ色を背景色として指定するようにしたらいいかと思います。
 .sidetitle の background のURLが指定してある行を丸ごと
  background-color:#f89a7b;
に差し替えればバーの両端は角張ってしまいますが色は同じものになります。
ついでにカレンダーだけ他と幅が異なっているので
 .calendartable に WIDTH: 100%; を追加すると他のサイドバーコンテンツと同じ幅になります。
試してみてください。
Posted by junike at 2005年03月17日 20:53
お世話になっております(*^-^*)
ここの説明を見て、3カラム化がやっと出来て喜んでいます。

もし良かったら、ひとつ教えていただきたいのですが、
ブログタイトルの部分の背景が、左によってしまって、右側が空白になっているので
もし、この背景を画面の幅に合わせて伸ばすことが出来る方法があれば
是非とも教えていただきたいです。
http://blog.livedoor.jp/sea_and_sky/ ←です。
ワガママ言ってすいませんm(_ _)m
自分でアレコレいじってみましたが、まったく動じません(;^_^A
宜しくお願いします!
Posted by mimi at 2005年03月17日 22:13
>mimiさん
試してませんが、
#banner と #subbanner にある background の no-repeat を repeat-x にしてみたらどうでしょう。
横方向に同じ画像が繰り返されるので白いスペースはなくなるんじゃないかと思うのですが。
Posted by junike at 2005年03月17日 23:11
すごい!!出来ました!!嬉しい〜〜(≧ε≦)
本当に助かりました!!
ありがとうございましたm(_ _)m
Posted by mimi at 2005年03月17日 23:22
>junikeさん
言われたとおりにやってみました!
こっちの方が全然好いです♪ありがとうございました。
ただ、ページを開くときに、画面の下に「ページ・・・を開いてます」って出ますよね?
そのとき、一瞬「黄色の三角の中にびっくりマーク」が出て、エラーが発生しましたになるんです・・・
今度は何が悪いんでしょう?(T_T)
Posted by くろみき at 2005年03月18日 22:31
お世話になっております(*^-^*)

またまた質問なんですが・・・
今回の3カラム化をしてから、すごくページが重たくなってしまったんですけど
どうしてなのか原因がわからず・・・
何か対策法があれば教えてくださいm(_ _)m

いつも質問ばかりですいません(;^_^A
Posted by mimi at 2005年03月19日 02:54
>mimiさん
たしかに重いですね。というか表示が遅いというのが正確ですか。
3カラム化する前はもっと表示が速かったですか?
サイドバーにいろいろなコンテンツ、特に外部サーバーにあるものを読み出しに行ってくるようなもの(広告やカウンターなど)が多数あるとそれらを読み出してくるのに時間がかかります。
でもそれなら3カラム化するしないにかかわらず同じではないかと思うので、もし3カラム化する前が格段に表示が速かったとすると右と左のサイドバーに何をのせるかのバランスを考えるくらしか思いつきません。

ふつうのやり方をしていれば通常links側(たいがい左サイドバー)が真ん中の記事の次に表示されるのでこちら側にはライブドアブログ内のプラグイン(トラックバックやコメントなど)など外部サーバーを読みにいかないものにすれば、とりあえず真ん中の記事と左サイドバーはすぐに表示されるようになり、見た目は早くなった気がします。
amazonのコンテンツが左サイドバーだけで2つもあるので、現状左サイドバーを表示させるのだけでも遅くなっているのはそういうことにも原因があると思います。

アフィリエイターの方はなるべく多くそういうものを載せたいとは思いますが、見せ方やバランスの兼ね合いでしょう。あとはうまく表示されている他のアフィリエイターの方のを参考にするとか相談してみてください。
Posted by junike at 2005年03月19日 11:59
>くろみきさん
回答の順番が逆になってしまいました。

>「黄色の三角の中にびっくりマーク」が出て、エラーが発生しましたになるんです

これは広告かJavascriptを使ったようなコンテンツか何かの記述が不十分だからだったかと思います。
3カラム化する前はそういうのは表示されませんでしたか?
「blogpet」のところに何も表示されていませんが、表示されるものが表示されていないことはないですか?(何かソースが変わったけど対応していないとか)

その辺の心当たりを当たってみて、見直してみてください。
Posted by junike at 2005年03月19日 12:07
初めまして!
3カラムの方法を参考にさせて頂きました。
初心者で全然理解できていませんが、とても分かりやすかったです。
どうもありがとうございました。
Posted by rob at 2005年03月19日 15:04
>junikeさん

回答ありがとうございました。
blogpetはメッセージ機能やアクセス解析機能のついたブログに住むペットで、Javascriptです。
時々blogpetにログインできない時があって、その時はブログのペットも表示されないようです。blogpetの方のサーバーの調子がおかしいせいかなーと思ってるのですが、そのせいでエラーマークが出たのかも・・・
ちょうど3カラムにしたばかりだったので、つい、そのせいかと思ってしまいました。
ごめんなさーいm(__)m
Posted by くろみき at 2005年03月19日 16:54
junikeさん

先ほどは、本当にありがとうございました!
早速修正してみました。
Posted by rob at 2005年03月19日 18:47
おっしゃった通りで、
レイアウトを変えて、少し広告を減らしたらかなり軽くなりました。
欲張ってはいけないということですね・・・(;^_^A
とても勉強になりました!
いつも丁寧なアドバイス、本当に感謝しています。
ありがとうございましたm(_ _)m
Posted by mimi at 2005年03月19日 19:35
とても参考になりました。
これから僕もHTML勉強しようとおもいます。
Posted by 28万円 at 2005年03月21日 07:03
はじめまして。

私も3カラムに挑戦しようと思い、「#countainer」「#content」をそれぞれ書き換え、「#links2」を作り、</div></div><div id="links2"><div>を入力したフリーエリアを追加したのですが、
結果は、右サイドバーに行くべき項目が左サイドバーに重なって表示されてしまいます。
デザインのテーマも変えてみたのですが、結果は同じです。
右側にはサイドバーが入るスペースが確保されているようなのですが、フラグインが右側に行ってくれません。左側に重なった状態で表示されてしまいます。
何処かに間違いがあるのでしょうか?
Posted by たかし at 2005年03月21日 23:34
>たかしさん
links2 には right:5px; とありますか?
そうしてもだめならためしに left:530px; (数値はサイトにあわせてください)
などとしてみてください。
これ以外にも考えられることは実際におかしくなっている画面のソース(CSS)を見てみないとわかりませんから、まだおかしい場合はURLを教えてください。
Posted by junike at 2005年03月22日 12:03
>たかしさん
追記です。
トップページの再構築を忘れないでください。
左サイドバーのいちばん下のプラグインとしてきちんと
 </div></div><div id="links2"><div>
が入っているかを確認してください(ソースの表示などで)。
これが有効になっていないとそのようになります。
Posted by junike at 2005年03月22日 12:18
junikeさん、早速ありがとうございます。

>links2 には right:5px; とありますか?
有ります。

>そうしてもだめならためしに left:530px; (数値はサイトにあわせてください)
>などとしてみてください。
「left」での指示は出来ました。
しかしこの場合は、巾を全て固定にしないと閲覧する解像度によって変わってきますよね?

何故「right」指定が出来ないのでしょうか?ヨロシク御願いたします。
Posted by たかし at 2005年03月22日 13:00
junikeさん、お騒がせしました。出来ました。感動です。

原因は、他のフリーエリア内に可笑しな<div>ダグが入っていたんです。
いろんな所を構っていた自分が原因でした。
申し訳有りませんでいた。

これをベースにもう少しカスタマしていこうかな・・と考えています。

本当にありがとう御座いました。
Posted by たかし at 2005年03月22日 16:45
>たかしさん
解決できてよかったです。
そうですね。他にフリーエリアを使っている場合にそうした余計なdivタグの存在というのもありがちでした。
今後似たようなことがあったときのアドバイスの参考にします。
Posted by junike at 2005年03月22日 19:51
はじめまして。ブログ初心者の者ですが、こちらを参考にさせて頂いて
3コラム化に成功しました!!まだまだ出来上がってないのですが^−^;

本当に助かりました!ありがとうございました!
ゆくゆくは、全ページ3コラム化したいものです♪
Posted by artemiswhispers at 2005年03月23日 23:28
はじめまして

3カラムの説明が大変参考になり無事完成しました。
これからは、いろいろと応用していきたいと思います。

有難うございました。
Posted by おくまん at 2005年03月27日 20:17
はじめまして。

3カラム化するにあたって
こちらの記事を参考にさせて頂きました。
大変わかりやすい説明でとても助かりました。
ありがとうございました!
Posted by しろくま at 2005年03月28日 02:17
はじめまして。じょーじです。

3カラム化にする手順が大変参考になりました。
HTMLに対する知識が全くないにも関わらずできました。
ありがとうございました。

mimiさんと同じ質問で申し訳ないのですが、repeat-xに変えても背景が繰り返されません。何か他に変更するところがあるのでしょうか?

お暇があればお願いします。




Posted by じょ〜じ at 2005年03月29日 12:54
>じょ〜じさん

#banner と #subbanner の width:750; を auto か 100% にしてみたらどうでしょう。
Posted by junike at 2005年03月29日 20:06
ありがとうございます!見た目もかなりよくなりました。
これからもjunikeさんのカスタマイズ・ツールを参考にさせていただいて、よりよいブログをつくるために励みたいと思います。
Posted by じょ〜じ at 2005年03月29日 23:35
はじめまして、livedoorのBlogの検索からたどり着きました。
3カラム化の方法がとても魅力的だったので参考にさせて頂きまして、無事できました。

これでまた新しい機能とか追加していけるので楽しみです。
本当にわかりやすい説明の数々ですごいです。
これからも頑張ってください、応援してます。
Posted by asian_dream at 2005年03月30日 03:54
はじめまして。

こちらを参考にさせていただき、
無事3カラム化を実現できました。
わかりやすい解説で大変助かりました。
本当にありがとうございます。

それでは、今後ともよろしくお願いいたします。
Posted by みかずき at 2005年03月30日 20:35
はじめまして。こんばんは。
3カラムの化の参考にさせて頂きました。
大変わかりやすい説明で、初心者でも、どーにか形になりました。
ありがとうございました。
Posted by ゆきじ at 2005年03月31日 20:51
はじめまして。
ワシめのブログも、ここの記事で3カラムに出来ました!
けっこーアンポンタンなので、
最初 根本的なトコでつまづきまくりましたが
高さ調整も出来るほどカシコになりました(笑)。

本当に有り難うございました〜♪
Posted by 青いパン at 2005年04月01日 18:37
初めまして、質問なのですが
redframeの3カラム化について
細かい設定数値を教えて頂けないでしょうか?
Posted by あいぼ at 2005年04月01日 23:22
説明不足でした。
何度やってもリンクを分けた部分が
全て左側に重なってしまいます。
この場合は、どの数値を調整すればいいのでしょうか?
Posted by あいぼ at 2005年04月02日 00:57
>あいぼさん
リンクを分けた部分が左側に重なるというのはフリーメモプラグインに入れた
</div></div><div id="links2"><div>
が機能していないということが考えられます。
トップページを再構築したあとにトップページのHTMLソースに上のタグが入っているかをかくにんしてください(IEならメニューから「表示-ソース」)。

入っていてもまだ左側に重なる場合、左サイドバーのほかのプラグインコンテンツにフリーメモプラグインを使っていませんか?他のフリーメモの中でdivタグの閉じ忘れなどがないかどうか確認してください。

なお、redframeの3カラム化は難しいので、あとで注意書きか別記事を書きます。
Posted by junike at 2005年04月02日 10:37
>あいぼさん
redframeの3カラム化について難しい部分もあったので記事にしました。
http://junike.livedoor.biz/archives/17824386.html
こちらも参考にしてみてください。
Posted by junike at 2005年04月02日 12:58
はじめまして!何にもわからなかった私がこちらの記事を参考にさせていただいて、なんとか3カラムに出来ました。
とても分かりやすかったです。
本当にありがとうございました〜。
Posted by エリ at 2005年04月03日 03:18
3カラムできました!!
初心者にもわかりやすい画像入りの解説で
何とか完成しました。
ありがとうございましたっ!!
Posted by はじめまして at 2005年04月04日 01:20
はじめまして、livedoorのブログ検索からたどりつきました。
しばらくはlivedoor提供のいろんなデザインで楽しんでいたんですが、そろそろ飽きてきたころにこのblogを見て、昔htmlをいじってHPで遊んでいた血が騒いできました。

このページの解説のおかげでなんとか3カラムにできました。
まだまだ調整が必要な段階ですが、かなりうれしいです。
CSSって面白いですね。

これからも頑張ってください。
ちょくちょく遊びにきたいと思います。
Posted by asian_dream at 2005年04月04日 04:57
はじめまして。今日やっと3カラムができました。
とってもわかりやすく10分くらいで出来ました。
本当にありがとうございます。
Posted by moneygame1 at 2005年04月07日 22:19
はじめまして!こちらの記事を参考に初めて3カラムに挑戦して、何日かかかってやっと自分のPCからは見られるようになりました。
本当にありがとうございましたっ!
勝手ながら、今日の自分の記事にリンクを貼らせていただきました m(_ _)m
Posted by なつ at 2005年04月08日 01:17
はじめまして!
初心者の自分がjunikeさんの記事を参考にさせていただいて、3カラム化出来ました。
最初かなり手間取ったんですけど、理解してしまえば
簡単に出来るんですね。
junikeさんのページはほんと写真入りで
とてもわかりやすかったです。
勝手ながら、リンク貼らしていただきました。
不都合等ありましたら、連絡いただければと思います。
本当にありがとうございました。
Posted by まさ兄さん at 2005年04月09日 18:50
画像つきで、とてもわかりやすかったです。
おかげで、3カラムできました。
今後も参考にさせて頂きたいと思います。
Posted by NANA at 2005年04月09日 21:25
3カラム出来ました!
前々からやりたかったのでめっちゃ嬉しい♪
また遊びに来ますのでよろしくお願いします(o^∇^o)ノ
Posted by たっくん at 2005年04月13日 12:39
はじめましてこんばんは。
念願のサイドバーの振分けができました。
とても参考になりました。
ありがとうございました。
また勉強させてもらいに来ます。
Posted by coboo at 2005年04月15日 21:03
☆⌒Y⌒Y⌒Y⌒Y⌒Y⌒Y⌒Y⌒Y⌒Y⌒☆

こんにちわ♪
おかげさまで3カラム出来ました〜
(ノ≧▽≦)ノ
パソコンオンチの私にも出来ました!
わかり易いテキストのおかげです
(ッ_ _)ッ
他のPC環境からちゃんと見れるか
不安なんですが(笑)
どうもありがとうございました

☆⌒Y⌒Y⌒Y⌒Y⌒Y⌒Y⌒Y⌒Y⌒Y⌒☆
Posted by miki助 at 2005年04月17日 14:01
初めまして。

検索にてこちらの3カラム化の方法を見つけて早速実行さして頂きました!
とてもわかりやすく、
『できたぁー!』・・・っと思いきや、
左サイド欄がなぜか一番下にズレ落ちてしまってます。。

ヒヨコに毛が生えた状態の初心者ですので、
どこをイジっていぃものやら・・・(^^;)

ご指導宜しくお願い致します。
Posted by a-ya at 2005年04月17日 14:22
>miki助さん
とりあえずWindowsのIEからはちゃんと見れますよ。
Macはないのでわかりませんが。

>a-yaさん
linksの前に # がぬけていました。
これをつければ大丈夫かと思います。
Posted by junike at 2005年04月17日 16:21
εミ(o_ _)o ドテッ!

早速の回答有難う御座います!
この3時間色んなサイトに訪問しては四苦八苦してましたが、
『 # 』つけて簡単に完了したしちゃいました。。。
ヾ(;´▽`A アセアセ。。

まぁ、これもいぃ勉強になりました。
色んなサイト訪問により、自分なりにスキルアップできたと思います。。
2・3日経ったらアウトプットしてたりして・・・(^^;)

ともあれ、3カラムにできた事に嬉しく思います!
有難う御座いました。
m(_ _*)m
Posted by a-ya at 2005年04月17日 17:13
はじめまして。
3カラムで検索してこちらにたどり着きまして、
おかげさまで無事設置できました。
とても参考になりました。感激しています。
本当にどうもありがとうございました。(^-^)
Posted by いちごっち at 2005年04月18日 12:03
はじめまして。

わかりやすい説明で、念願の3カラムにすることができました!

ところが、スクロールがカクカクするようになってしまって、
原因がよくわかりません。
何度もやり直してみたのですが…。
どこか設定でおかしなところがあるのでしょうか?

頼ってばかりで申し訳ありませんが、
アドバイス、よろしくお願いします。
Posted by かや at 2005年04月23日 14:15
はじめまして、こんにちは。

とてもわかりやすくて、アホな私にもできました。

いろいろ追加するたびに縦長になるのがイヤだったので、ものすごく助かりましたヽ(^。^)ノ

ありがとうございましたm(__)m
Posted by ずれずれぐさ at 2005年04月23日 17:31
>かやさん
動きがかくかくするのは、#countainer と #content にある
 position: relative;
が影響しています。
それをはずせば(削除すれば)するするになります。
しかし、これはMac版IEでも見れるようにとつけたものなので、これをするとMacのIEで見ている方の表示が崩れるかもしれません。手元にMacがないので確認できませんが。
relative というのは相対的な位置をそのつど再計算していると聞いたことがあります(レイアウト上の位置関係を)。それがなければそのつど計算する必要もないのでするするスクロールできるんじゃないかなと思います。
Posted by junike at 2005年04月23日 18:53
こんばんは!
はじめまして。

おかげさまで、3カラムにすることができました。

パソコン全くの素人で、ブログはじめたばかりのぼくにもできたこと、
心より感謝もうしあげます。
ほんとうに、ありがとうございました♪


Posted by とおちゃん at 2005年04月24日 02:06
はじめまして。とても参考になりました。3カラムにはできたのですが、
記事の外枠の幅がサイドバーに重なってしまいます。1日中検索して探したのですが,
分かりませんでした。サイズは規定で変えられなくなっているのでしょうか?
両サイドを縮めたいのです。
もし宜しければご指導お願い致します。
Posted by dpf at 2005年04月24日 05:02
>dpfさん
「記事の外枠の幅」というのは BODY の BACKGROUND で指定している「絵」ですので、それを同じデザインで幅を小さくするのならそういう絵を用意してそちらを参照するように指定すればいいでしょう。
それはめんどうだという場合は、とりあえず  BODY の BACKGROUND のうしろにある url(〜) の部分を削除してみてください。背景が消えます。それだと字が読めないので同じ行の #333 で色を変えれば背景全面に色がつきます。
ちなみに今の背景と同じ色であれば #eff0f0 とすれば同じになります。
Posted by junike at 2005年04月24日 11:32
さっそくの回答ありがとうございます!
「position: relative;」を削除すると、
カクカクがなくなりました!

僕も手元にMacがないので、Macの確認まではできませんが、
当面はこの状態でいこうと思います。

これを機に、自分でも少しずつ勉強して、
カスタマイズして行こうと思います。
本当にありがとうございました!
Posted by かや at 2005年04月24日 12:43
どうもありがとうございます。同じようには出来たのですが、
記事が載る場所自体を縮める事は可能でしょうか?僕が検索したのでやると
記事事態が小さくなってしまいます。記事の白い部分の余白を少なく出来たら良いなと思います。
たびたびで、申し訳ありませんが、お願い致します(汗)
Posted by dpf at 2005年04月24日 15:24
たびたび申し訳ありません。出来ない訳がやっとわかりました。
コメントが載るバックは画像で指定されているんですね。どうりで幅が変わらない訳です。。。
junikeさんが画像をお作りになられていたのですね!素晴らしいです!
大変,お手数おかけ致しました。とても,参考になり、どうもありがとうございました。
Posted by dpf at 2005年04月24日 15:48
>dpfさん
いま拝見しましたが、結局色を変えたんですね。それが一番楽です。
画像はぼくが作っているわけではないです。livedoorの人ではないですから。
Posted by junike at 2005年04月24日 16:09
こんにちわ^^

DionのLovelogユーザーですが
ブログの3カラム化で参考にさせて頂きました。

とても解かりやすく、3カラム化に成功しました。
ほんとうにありがとうございました。
Posted by RISA at 2005年04月24日 17:09
3カラム化、参考にさせていただいた内容で
実現することができました。
ありがとうございました。
Posted by Childhood at 2005年04月25日 01:43
やったー!!
超初心者の僕にも出来たジョー!!!

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

Posted by jazzsoul at 2005年04月25日 12:26
junike様
先日は、3カラム化できまして、ありがとうございました。(喜)
その後、自分なりに試行錯誤して、調整したのですが、どうしても真ん中の幅を広くすることができませんでした。
#linksと#links2のwidthの値をいろいろと変えてはみたのですが、うまくいきません。
お忙しいところ恐縮ですが、ご指導いただければ幸いです。m(_ _)m
Posted by とおちゃん at 2005年04月26日 10:46
junike様

こんにちわ^^
初めまして。すごく参考にさせていただいてます><
実は3カラムになったのはなったのですが
上にあるタイトルの画像と両サイドのメニューとか
カレンダーが画面端っこ両サイドにぴったりくっついてしまって
センターに寄せることができません。。。

使ってるテンプレートはjunikeさんのTOPにある夕暮れの空と全く同じなのですが、
サイドのメニューとかの枠も表示されなくなってしまって><。。

もしよろしければご教授よろしくお願いします<(_ _)>
Posted by ちゃび at 2005年04月26日 13:11
アドレスを貼るのをわすれてました(TдT)
すいませんです<(_ _)>
Posted by ちゃび at 2005年04月26日 13:56
>とおちゃんさん
#linksが2箇所にあります。下の方にあるものがおそらくとおちゃんさんが試行錯誤したものだと思います。
とりあえず下の方のものを削除して、上の方のlinksを width を 175px 、左にぴったりくっつきすぎが気になれば、links に margin-left:10px 、そして
#conten の margin を MARGIN: 0px 200px 0px 160px; とすれば
とりあえずの目的は達成すると思います。
ただ、linksのwidthが175pxなのに、MARGIN の左側が160pxでちょうどいいというのがおかしいです。IEで見ていますが他のブラウザだとちょっとおかしく見えるかもしれません。
どこがおかしいのかまではわからないので、とりあえず上記のところだけでも試してみてください。
Posted by junike at 2005年04月26日 22:30
>ちゃびさん
#container の width をたとえば 850px とかにすればできます。
IEであればブラウザの幅に合わせて全体が常に中央になるようになりますが
IE以外では左端にくっついたままです。IEと同じような動きにはできません(というかぼくにはわかりません)。
Posted by junike at 2005年04月26日 23:07
 Sachi-netのSachiと申します。
 ものすごくいろいろなカスタマイズ技術が多く感激しています。とても勉強なさっているんですね。
 今後も参考にさせていただきたく思います。事後連絡で申し訳ありませんが、Topにリンクを貼らせて頂きました。

 今後ともよろしくお願いいたします。
Posted by Sachi(学習塾講師のブログ通信Sachi-net) at 2005年04月27日 01:21
ありがとうございましたヽ(‘ ∇‘ )ノ
なんとか端っこから離すことができました!!

これからもっと勉強してバランス良くしていくつもりです♪
本当にどうも有り難うございました<(_ _)>
Posted by ちゃび at 2005年04月27日 06:28
junike様
できましたー!
おかげさまで、真ん中の幅が広くなりました。(嬉)
本当にありがとうございました♪
心より感謝申し上げます。m(_ _)m
Posted by とおちゃん at 2005年04月27日 12:39
こんばんは!
はじめまして。
3カラム化したくて検索してこちらにたどり着きました。
とっても丁寧な説明で全く知識のない私にもできました(*´∇`*)
どうもありがとうございました!
こちらへのリンクを貼って記事を書かせてもらおうと思っています。
これからもよろしくお願いします(*^-^)ニコ
Posted by かのん at 2005年04月28日 18:42
おはようございます。3カラム化参考にさせて頂いております。突然で大変申し訳ございませんが質問がございます。私のブログでは中央カラムと左カラムが一体となり、離れなくなってしまいました。色々な方からアドバイスを頂き、切り離しに挑戦しているのですが、なかなか上手くいきません。なにか良いアドバイスございませんでしょうか。是非よろしくお願い致します。お忙しいところ、誠に申し訳ございません。
Posted by nanapapa2 at 2005年04月29日 05:47
>nanapapa2さん
一度回答を書き込んだのですが文字数が多かったようで反映されていませんでした。
今現在上記の問題は解決したようですが、IE以外のブラウザOperaやFireFoxで見ると右サイドバーが記事本文にかぶっています。
linksのleftを-215pxとしているのが影響しているのではないかと考えられます。そもそもそのようにしてIEで正常に見えていること自体おかしいのですが、それも含めて正常に表示できないかCSSを見てみましたが、原因はわかりませんでした。
IE以外での見え方が解決できませんでしたが、IEでは見た目は大丈夫ですのでその点をご承知おきください。
Posted by junike at 2005年04月29日 20:55
こんにちは、がく@うつログ。ともうします。
お陰様で、3コラムにできました。
ありがとうございます。

ところで、Windows IE だと 真ん中のコラムの写真が、
画面左端に表示されてしまいます。

http://u2blog.livedoor.biz/

こちらはHTMLのpadding値でしょうか?
詳しくないので教えていtだけないでしょうか。

どうぞよろしくお願い致します。

がく@うつログ。
Posted by がく@うつログ。 at 2005年04月29日 21:08
>がく@うつログ。さん
それはIEでなくてもどのブラウザでも左端に表示されています。
記事を書くときに挿入したimgタグの最後の方に
align="left"
というのがあると思いますが、それを right にすれば右になります。
HTMLのタグの書き方の問題です。
それとも別の違う部分のことを言っているのでしょうか。
Posted by junike at 2005年04月29日 22:23
ご回答、ありがとうございます。
私はsafariとMac IE でブログ運営しているのですが、
記事中の写真は記事中にちゃんと収まっています。

しかし、複数のWindows IE からブログhttp://u2blog.livedoor.biz/を
見てみたところ、記事中の写真が、左サイドバーと全く重なってしまっているのです。。。

そちらからは普通に見えるのでしょうか?
何度も恐縮ですが、どうぞよろしくお願い致します。

Posted by がく@うつログ。 at 2005年04月29日 22:48
はじめまして。
3カラムで検索して、辿りつきました。
わかりやすく、とても参考になりました。
ありがとうございました。
Posted by ヒロ at 2005年04月30日 01:29
>がく@うつログ。さん
現象が分かりました。最初に開いたときに1つ目の記事の写真のみ左サイドバーにかぶって、2つ目以降の写真は記事中にありましたが、そこからブラウザの幅を広げると2つ目以降の写真も左サイドバーにずれました(WindowsIE)。

.blog の width を auto にしてみてください。
こちらのテストではこれで正常な位置に表示されました。
Posted by junike at 2005年04月30日 09:15
はじめまして。
3カラムの参考にさせて頂きました。
ありがとうございます。
Posted by don at 2005年04月30日 21:57
こんばんは、がく@うつログ。です。
CSSの,blogwidth を auto にしてみました!
これでIEから普通に見えるのですね!

本当にありがとうございます!

どこかでWindowsから見てみますね
Posted by がく@うつログ。 at 2005年05月01日 03:31
おはようございます。

うつログ。ではありがとうございます。
ところで、別ブログ 杜の都 仙台の不動産屋さん 『MTホーム』 
http://mthome.livedoor.biz/ も3カラム化にチャレンジしているのですが、線が左右サイドバーとかぶってしまっています。

これはどうにかなるのでしょうか?
それとも、サイドバー画像を変えるしかないのでしょうか。。。
Posted by がく@うつログ。 at 2005年05月01日 04:48
>がく@うつログ。さん
ご推察のとおりですが、変えるというよりは消してしまってもいいんじゃないかと思います。
BODY の BACKGROUND のうしろにある url(〜) の部分を削除して、#ffffffだけにしてみてください。背景(左右の縦の線)が消えます。
どうしても真ん中の記事とサイドバーの間に線を入れたいのであれば
#content に
 border-left: 1px solid Gray;
 border-right: 1px solid Gray;
など入れれば入ります(色は任意で)。
 PADDING-RIGHT: 10px;
 PADDING-LEFT: 10px;
も入れれば記事と線の間が少し開きます。
Posted by junike at 2005年05月01日 09:48
参考にさせていただき、私のブログも改造させていただきました。
Posted by 投資倍増計画 at 2005年05月01日 10:07
ありがとうございます!
線は消えました!!

。。。が。
IEだと何故か背景が真っ青に。。。
safariだと#FFFFFFなのですが(泣)

ウインドウズIEからアクセスすると、
「エラー:IDがないのでデバックして」
など出ます。

これはHTMLかCSSがむちゃくちゃだからでしょうか。。。
それにしても、せっかく線が消えたのに青背景はショックです。
何度もすみませんが、お教えいただければ幸いです。
どうぞよろしくお願い致します。

がく@うつログ。
Posted by がく@うつログ。 at 2005年05月01日 18:41
「IDがない」のIDはCSS内でいうと#countainer などの # で始まっているもののことなので、
それのどこかの「}」などの閉じカッコを誤って消してしまったとかそういうのはありませんか?
あるいは、BODYの
 BACKGROUND: #ffffff;
の最後にある「;」が抜けていたとか。
その辺を確認してみてください。
Posted by junike at 2005年05月01日 22:50
お世話になっております。
確認してみました。
しかし、問題はないようです。

いちばんの問題が、http://mthome.livedoor.biz/の、線かぶりなのですが
>BODY の BACKGROUND のうしろにある url(〜) の部分を削除して、#ffffffだけにしてみてください。背景(左右の縦の線)が消えます
すると、確かに線が消えるのですが、IEでは背景が真っ青になってしまいます。
これはなぜでしょうか?
Posted by がく@うつログ。 at 2005年05月05日 22:50
>がく@うつログ。さん
いま現在WindowsのIEで見てみると線が消えていて背景も真っ白です。

ただ、まだ BACKGROUND: #ffffff;
の最後にある「;」が抜けています。
これが抜けていて正常に見えるのもおかしいのですが、それをつけてみてください。
CSSの { } で閉じた中身の行ごと(スタイルの要素ごと)の区切りには「;」をつけます。閉じる } の直前の最後の要素のみ「;」がなくても大丈夫です。
それでもまだ真っ青になってしまうとしたらわかりません。(WinIEですよね?)
Posted by junike at 2005年05月06日 09:02
>トラックバックをいただいた「インターネットだけで年収800万円超!!」さん
個別ページになるとサイドバーが記事にかぶってます。
このコメントを書き込もうとしても書き込みのボタンがサイドバーと重なって押せないので、見てるかわかりませんがこちらに書きます。

HTML編集の個別記事で
<div id="links"> を入れる位置を間違っている可能性があります。 
Posted by junike at 2005年05月06日 10:13
3カラム化する際に、参考にしてTBさせていただきました。また、アドバイスもいただいて、大変感謝しています!ありがとうございました。

現在「かまぼこ」現象はおかげさまで改善されましたが、個別記事になると本文・コメントなど文字がすべて左よりになってしまいます…。
これはどのようにしたら直るのでしょうか?

教えていただければ幸いです。
よろしくお願いします。
Posted by マリー☆ at 2005年05月06日 20:25
↑のコメントについてですが、こちらの記事などを参考に自力で解決できました。
お騒がせいたしました。

改めて、junikeさんの知識に感動です!!
ありがとうございました。
これからも寄らせていただきます。
Posted by マリー☆ at 2005年05月07日 01:04
はじめまして、オジサンと申します。

3カラム化、案外簡単でよかったです。

それで、ブログで紹介させていただきました。

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

それでは、また。
Posted by 49歳 セミリタイアへの道 at 2005年05月08日 22:31
junike様

はじめまして。今回こちらの記事を参考にして3カラム化に成功する事が出来ました。
ブログを始めてまだ日も浅いのですが、憧れの3カラムに出来て非常に嬉しく思っています。
本当にありがとうございました。

そこで…こんな事をお訊きするのは心苦しいのですが、一つどうしても分からない事があります。
今回、個別記事やカテゴリ別など、全てが3カラムになってしまいましたが、
「トップページだけを3カラムにして、個別記事やカテゴリ別・月別などは2カラムにする」のにはどうしたら良いのでしょうか?
何らかの方法をご存知でしたら、ご教授頂けると幸いです。
Posted by sakuya at 2005年05月10日 11:39
>sakuyaさん
それはできなくはないですがかなり面倒です。
そもそもプラグインの中にJavascriptにしろフリーメモにしろ「links2」を入れるやり方ではムリです。
個別記事にサイドバーを出そうとするときに
<script language="JavaScript" src="<$BlogUrl$>plugin.js"></script>
↑こんなようなのを入れたと思いますが、そのplugin.jsは最初のプラグインから最後のプラグインまでを1くくりにして扱われているのでその中にlinks2を入れている限り左右に分割されます。(続きはつぎのコメントへ)
Posted by junike at 2005年05月10日 21:19
(前のコメントの続き)
プラグイン内で分割せずに、自分で右サイドバーに相当するコンテンツを用意してそれを表示するようなタグを個別記事のHTML編集内に記入すればできます。
自分で用意しなければならないので「トラックバック」や「最新記事」などプラグインでしか出せないようなものは右サイドバー相当場所には出せません。バナーなどに限定されるでしょう。
言ってることが難しいかもしれないので、簡単ではないと思っていいと思います。
Posted by junike at 2005年05月10日 21:20
お忙しい中、丁寧な返答を頂きましてありがとうございます。
やっぱり難しいのですね…。
プラグインを全て表示させるようにしている、という所までは理解出来ていましたので
多分かなり難しい事をやりたがっているのだろうなとは思っていました。
とはいっても、その後どうしたら良いのかが分かりませんでしたので、こちらで質問をさせて頂いたのですが…。

しかしせっかく出来た3カラムを崩すのも惜しいですし、やはりこれからも全て3カラムのままでいくことにします。
junike様、本当に色々とありがとうございました。
これからも参考にさせて頂きたいと思います。
Posted by sakuya at 2005年05月11日 01:02
こんにちは。はじめまして。

buena suerte!さんのところから飛んできました。
カスタマイズ=難しいのイメージがあったのですが
大変丁寧に書かれてあり、難なく完了することが出来ました。

blog中で紹介させていただきました。
本当にありがとうございました。
Posted by LaLaLa at 2005年05月11日 13:01
>sakuyaさん
右サイドバー分がまったく表示されないで左サイドバーだけになるのでよければ1つ思いつきました。
現在のCSSファイルを丸ごとコピーしてlinks2だけ
#links2{ display: none;}
に変更したものを css_kobetu.css など別名のファイルにしてそれをサーバーにアップします(PROユーザーならlivedoorBlog内に可ですが、そうでないならどこか別のところ)。
個別記事のHTML編集で
<link rel="stylesheet" href="<$CSSUrl$>" type="text/css" />
という部分がありますが <$CSSUrl$> の部分を http://〜[アップしたcssのURL] とすれば、個別ページだけlinks2を表示させないCSSが適用されて見えなくなります。チェッカーズやBlogロゴなども消えてしまうのでそれのタグも個別記事の方に追記すれば出ます。再構築を忘れずに。
参考までに。
Posted by junike at 2005年05月11日 20:39
はじめまして、こんにちは。

「livedoorBlogで3カラムにする手順[整理版]」
すごく解かりやすかったです。速攻できました(感動)
初心者ですが、これからも参考にさせていただいて、
ブログいじりしたいと思っています。

ありがとございました。
Posted by 山ちゃん at 2005年05月12日 13:13
>sakuyaさん
もはや見に来てないかもしれませんが、個別記事などだけ2カラム化する方法として
「3カラムと2カラムの併用そのほか」
http://trialblog.livedoor.biz/archives/15994634.html
という記事を見つけました。
なるほどcontentをもう1つ用意するのね。
Posted by junike at 2005年05月14日 00:08
これ以上コメントのせられるのかしら?と不安になるぐらいのコメント数ですが、お礼がいいたくてレスしますね。TBもさせていただきました。ありがとうございました!
ただ、スクロールバーはすることができませんでした。
ライブドアプロにしなくてはだめなのでしょうかTT
いろいろ他のサイトを参考にしたりしたのですが、やはりできませんでした。残念です。
けれどほんとうに3カラムは簡単にできました。
多謝です!
Posted by 四季 at 2005年05月14日 01:03
>四季さん
スクロールバーはたとえばCSSに

.scrollbar{
overflow:auto;
height:350px;
}

を追加して、CSSのみ再構築してから「プラグインの設定」でフリーメモを使って

<div class="scrollbar">
〜スクロールさせたいもののタグ〜
</div>

とすればできると思います。heightで高さを調節してください。
最後にトップページを再構築します。
ただし、トラックバックとか最新コメントなどのプラグインはできません。
Posted by junike at 2005年05月14日 11:25