livedoorBlogで３カラムにする手順[整理版]

ここでは元々２カラム（２列表示）のテンプレを３カラム化する方法を書いたものです。新しく追加された３カラムテンプレに関する質問にはお答えできませんのでご了承ください。
また、以下の手順はライブドアブログの新環境移行前での手順です。テーマの選択方法やlinks、links2をleft、rightにするなど様々な変更があるので以下の方法は新環境後ではそのままでは使えません。新環境移行後の２カラムデザインの３カラム化の方法を記事にする予定はいまのところありません。考え方としては以下のものと同じだと思います。

【LOVELOGユーザー方へ】：05/12/10
LOVELOGでも基本的には同じ要領でできますが、URLなどはもちろLOVELOG仕様のものに置き換えて読んでください。また、LOVELOG絡みに関する質問にはお答えできませんのでご了承ください。

【お知らせ：2005/7/14】
病気療養中につき、質問に対するコメントが遅れることがありますのでご了承ください。

※現在のトップページは幅が固定されています。以下の内容は可変です。また、左右にカラムをわける部分にはHTML編集を利用する方法もありますが、以下の手順は右と左の間にフリースペースを利用してタグを挿入するやり方です。

livedoorBlogに用意してあるテーマ（デザイン）を元に３カラムにする手順を画像つきでつくりました。2004/1/6に作成したものは、その後追記を重ねわかりずらくなってしまったので、整理しました(2004/3/13) 。
これで実現するのは
・３カラムになる
・真ん中のカラムは可変で幅が変わる
・両サイドの幅は各自で変えられる（固定幅）
・Mac版IEでも表示がくずれない

Comments

1. Posted by ひだりうみ   2004年05月22日 18:21

初めまして！！
３カラム参考にさせていただきました。
大変分かりやすかったです。
あとＢＬＯＧタイトルを中央に寄せたいのですが・・・
悪戦苦闘しております(^^;

2. Posted by ゆうこ   2004年05月22日 23:10

初めまして！
今日、３カラム、ここをかなりかんなり参考にさせていただき、
なんとか両サイドに分けることはできましたｍ（＿＿）ｍ
あと・・欲を言えば・・
�。贈味錬妊織ぅ肇襪鬟札鵐拭爾砲靴燭ぁ�
��記事の幅をもう少し狭くしたい。
のですが（＞＜）
どこをどう触ればいいのかさっぱりなのです。
もし解決できるようであれば、お教え願いませんか？
よろしくお願いします！

3. Posted by junike   2004年05月23日 00:29

>ひだりうみさん
Blogタイトルを中央に寄せるには

.blogtitle {
TEXT-ALIGN: center
}

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

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

教員採用試験、がんばってくださいね。
（ぼくは今年の３月末までバイトで情報教育アドバイザーとして小学校にいました）

4. Posted by ひだりうみ   2004年05月23日 00:53

junikeさん、ありがとうございます。
さっそくやってみました。
ＢＬＯＧタイトルは中央に来ましたが、
左のサイドバーまで中央に来ちゃいました・・・
どうしたらいいですか？
ほんと素人ですいません。

5. Posted by ゆうこ   2004年05月23日 02:44

.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;}
の中に入れればよいのでしょうか？真ん中に行きません・・涙
あと、幅も変わらないんです（＞＜）
難しいです〜

6. Posted by junike   2004年05月23日 11:39

>ひだりうみさんとゆうこさん
ごめんなさい。２つ前のコメントは 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タイトルセンター化はもしかしたらうまくいく方法があるのかもしれませんが、ぼくの知識ではここまでです。

7. Posted by ひだりうみ   2004年05月23日 12:06

junikeさん
ご親切にありがとうございました。
ＣＳＳもっと自分でも勉強してみようと思います。
これからも宜しくお願いします。

8. Posted by ゆうこ   2004年05月24日 10:29

ありがとうございます！！！
でも・・やっぱり無理みたいですＴ−Ｔ
なにかの情報が邪魔をしているのでしょうか・・

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

今日はこれまでにして、勉強します〜（＞＜）

9. Posted by ゆうこ   2004年05月26日 23:16

せっかく３カラムにしたんですけど・・
なんだか表示がおかしくなってる人がいるとのことで
いったん、元に戻しました　涙★(T-T)
Macの人でも見れるはずですよねー？
XPのIE6.0もだめだったみたいで。
あたしにはちゃーんと見えてるのに・・
なんででしょう！？

10. Posted by まるこ   2004年05月29日 23:07

junikeさん。お世話になります。
どうにか落ち着きました。というか・・これ以上、無理^_^;。
色々と参考にさせて頂いてわからないながらもお勉強できました。
本当にありがとうございました。

11. Posted by Sistah   2004年05月31日 05:55

こちらのHP参考にさせて頂きまして、何度かTRYしたのですが
何度やっても右コラムが真っ白になってしまいます・・・。
（HPそのままにしてます・・）
そしてInvalid CharactorというIEもメッセージもページがロードする時に出てきます。
どうしてこのようになるかお分かりになりますか？？
お手数ですがご教授頂けたら幸いです。

12. Posted by junike   2004年05月31日 19:56

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

13. Posted by Sistah   2004年05月31日 22:40

うわああ！！
出来ましたあああ！！（すいません感激してまして・・）

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

本当に有難う御座いました。

14. Posted by ayase   2004年08月01日 22:11

はじめまして、ここのおかげで
やっとうちも３カラムが出来ました。
それと、３カラムでは済まずにここみたいに
左右サイドバーを固定にして記事（content）をスクロール上に
したくてこの項を見てもそれらしき事に関しては載ってなかったんで
困ったんですが、いやはや、４カラムの項に載ってたんですね(^^;

それでは失礼しました。

15. Posted by koko   2004年08月04日 17:07

こんにちは。7月28日にトラックバック
させていだだいた者です。
すいません、せっかくコメントして下さったのに
見落としてました。あれから何とか頑張り、
それなりの形になったと思います。
アドバイスありがとうございました。m(__)m

16. Posted by みっつ〜   2004年08月10日 00:30

はじめまして。
ここに書かれている通りにやったつもりなのですが、
→御覧になっていただければわかると思いますが、
バグっています。

どう直せばいいですか？

17. Posted by junike   2004年08月10日 19:40

みっつ〜さんへ
まずスタイルシートがlinks2のところで終わっています。
そこまでで終わりにしてそれより下は真っ白なのではなくて、
該当する行だけを上の手順のとおりに「置き換える」ようにしてください。
（links2の下に続きがある。links2はもともとのlinksの下あたりに
わりこませる感じ）
それからJavascriptファイルの中身がスタイルシートのlinks2が途中まで
のものそのままとなっておりました。
Javascriptファイルには上の手順にもあるように
「document」で始まる１行だけです。
そこに注意してもう一度最初からやってみてください。

18. Posted by みっつ〜   2004年08月11日 15:12

やってみたんですけど、だめでした。
スタイルシートは、link2以下もちゃんといれました。

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

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

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

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

わからないことが多すぎてすいません。
よろしくお願いします。

19. Posted by junike   2004年08月11日 20:20

みっつ〜さんへ
まずスタイルシートの方は
#countainer
の１行上にある　{ が余計なので削除してください。
そしたJavaScriptファイルですが、
document.write('</div><div id="links2">');
は１行目に入っていますがそれだけでいいんです。
２行目以下はいらないので全部削除してください。
それをもう一度アップロードしてください。
そのJavaScriptファイルをBlogの管理画面上で
１カラムと２カラムの境目にあたる部分にくるように
順番を変更してください。
デザインについてはここでは触れません。

20. Posted by みっつー   2004年08月12日 04:04

できました！！
こんな感じでいいんですか？
本当にありがとうございます。

あとは、上の画像を変えるだけですか？
お手数ばかりかけて申し訳ないのですが、
画像の変え方と、もし、まだ、間違っているところがあれば
ご指摘願います。

21. Posted by 熊野   2004年08月12日 13:40

ヤフオク恋愛マーケティングの熊野です。
先日はありがとうございました。
おかげさまで３カラムもできました☆

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

お時間があるときにでもご回答いただけると
幸いです。

22. Posted by junike   2004年08月12日 22:45

>みっつーさん
よかったです。できて。
トップの画像は画像ファイルを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さん
３カラム化ができてとりあえずよかったです。
「来訪者数」のJavascriptがおそらく記述間違いでエラーとなっています。

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

23. Posted by 熊野   2004年08月13日 01:35

ご回答ありがとうございます。

これからちょこっといじってみます

24. Posted by masayanZ32   2004年08月21日 17:39

３カラムに挑戦してみました．

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

とりあえずはいい感じです．ありがとうございました．

25. Posted by masayanZ32   2004年08月23日 15:19

カラムが重なる件につきまして，アドバイスありがとうございました．

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

何かお気づきの点がありましたら，またご教授いただけると助かります．
本当にありがとうございました．

26. Posted by junike   2004年08月23日 15:49

>masayanZ32さんへ
countainer と content の width がpx値で固定されているからでしょう。
そこが上記のとおりにやって可変になると、幅に応じて真ん中の列も
自動的に幅が変わるように見えると思います。
いろいろ研究してみてください。

27. Posted by masayanZ32   2004年08月24日 15:27

いろいろ試した結果，

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

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

アドバイスありがとうございました．

28. Posted by 小僧   2004年08月26日 14:30

初めまして、３カラムにしたくて検索したら
こちらのサイトにたどり着きました。
無事に３カラムに成功しました。
ありがとうございます♪

若干重くなってしまいましたが、
これはしょうがないことなのでしょうかね！？
できればもう少しすらすら行きたいのですが…

29. Posted by junike   2004年08月26日 20:30

>小僧さん
いまそちらのBlogサイトを見にうかがいましたが、パッと表示されて重くはなかったです。
時間帯によっては重いかもしれないですね。
またJavaScriptを使っている分、若干表示が遅くなるということもあります。

30. Posted by ますみ   2004年09月03日 16:31

トラバさせていただきました〜。
・・・が！全然問題が解決しません(TT;)ｸﾞｽﾝ
ちびろぐさんのテンプレを利用しているのですが
直リンク（って言うのかな？）のせいか、サーバーエラーでこちらにも影響が出ているようです。
で、自分のテキストエディタに一旦保存して
アップロードしてプラグインの設定をして・・・という作業を手順どおりやったのですが、全然元にもどりません(TT;)ｸﾞｽﾝ

document.write('</div><div id="links2">');
これってアップロードするファイルに追記するんですよね？
どこに追記するんですか？
それが間違ってるのかも？(;^_^A
素人なのでよろしくお願いしますｍ（__）ｍ

31. Posted by ますみ   2004年09月03日 16:38

あ、もうひとつ、３カラムが崩れてから
自分のブログを開いた時にかならず
ステータスバーの上に「ページでエラーが発生しました」ってメッセージが出るんです。
これって何が関係あるのでしょうか？
スクリプトを受け入れない環境になってるとか？？

32. Posted by junike   2004年09月03日 20:33

>ますみさん
フリーメモプラグインを利用して解決したようですね。
よかったです。

33. Posted by ますみ   2004年09月03日 20:59

お騒がせしました(;^_^A
なんとか元通りにできました。
私ってば・・・
興奮してしまって↑の態度めっちゃ悪いですよね〜ゴメンナサイ！
知識不足でできないことが多いですが
カスタマイズってやりだすと完成するまですっごく集中して結構楽しいですよね。できた後の達成感とか(^┰^；)ゞ
これからも楽しみにしてます！
ほんとにありがとうございました〜ｍ（__）ｍ

34. Posted by ミッチ   2004年09月20日 07:59

なんども、カレンダーのことで
足を運ばせてしまい、恐縮でした；

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

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

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

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

☆まことに勝手ながら、Bloglistに登録させていただきましたｖ
m(__)m

35. Posted by [e-mail]   2004年10月03日 20:16

はじめまして。

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

どうしたらいいのか教えていただけませんか？

36. Posted by junike   2004年10月03日 21:00

>eveve.〜さん
そちらにもコメントしましたが、
#linksが２箇所あるうえに、#countainerがありませんでした。
そんへんを確認してみてください。

37. Posted by eveve   2004年10月07日 23:23

アップするのに時間が経ってしまって。
先ほど、教えていただいたものをコピーした後のものが
やっとアップ出来ました。

もう少し頑張ってみます。
ありがとうございます。

38. Posted by syaran   2004年10月08日 01:59

junikeさま。
はじめましてsyaranと申します。

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

39. Posted by team_kai   2004年10月09日 09:54

３カラムは、うまくいったけど、最新記事とかをクリックして拡大表示になると
左側に寄りすぎて、見にくくなってしまったんですぅ〜　（￥￥）
左側に枠を作りたい、というか(u)クリックして表示された(/U)記事をセンターに寄せて表示させるのってどうすれば、いいのでしょうか？教えて下さい。。

40. Posted by junike   2004年10月09日 12:29

>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さんのいう拡大表示）だけ左右の余白の部分を別の
幅にしたいというのは、どうやればいいかわかりません（できないような
気もします）。

41. Posted by team_kai   2004年10月09日 15:08

アドバイスありがとうございました。
出来ました！見やすくなればいいんです。
助かりました。。（ペコリ）

42. Posted by syaran   2004年10月10日 04:08

junikeさん、こんばんわ。

コメントありがとうございました。
お礼が遅くなってすいません。
アドバイス頂いた通りにwidthを100%にしてみました。
自分のMacで見ると右サイドバーが重なってしまったのですが、右側のmarginを
少し調整してなんとか普通になった・・・と思います。
とても勉強になりました。
本当にありがとうございました。

43. Posted by team kai   2004年10月13日 14:39

３カラムの事では、無いのですが・・
カレンダーのことで、聞きたいのですが・・
よくカレンダーで（翌月＞＞）・（＜＜前月）
の付いてあるのを見るのですが、どうやったら
付けられるのですか？カレンダーのデザイン
だけ変えたいし・・教えて下さい。

44. Posted by junike   2004年10月13日 20:23

>team_kaiさん
それはlivedoorBlogでは用意されていません。
カレンダーのすぐ横ではなくて、月別アーカイブになったときの
画面の上部に前の月、後の月などを出すJavaScriptなら
http://blog.livedoor.jp/kyorecoba/archives/7905516.html
↑こちらに紹介されています。

45. Posted by 転職相談室   2004年11月03日 23:33

はじめての投稿で質問です。どなたか教えていただければ幸いです。ブログ再構築しても、削除したはずのファイルが残るのでCSSの読み込みをやりなおしたり、HTMLをデフォルトして再設定してみたのですが、どうも過去のファイルが残るようです。（また一部、修正しても更新されないようです）。
みなさんこんなことありませんか？考えられることは全てしてみたのですが・・・。

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

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

46. Posted by junike   2004年11月04日 12:56

現在、カテゴリー別の再構築のメニューがなぜかないので
全ページで再構築をかけてみてもだめでしょうか。

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

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

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

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

もし、削除したはずなのに消えないなどの現象が起きた場合、そのURLを添えてお問い合わせからお寄せいただけますようお願いいたします。状態を確認した上で、この不具合が原因とわかり次第こちらで削除を行います。」

47. Posted by 転職相談室   2004年11月04日 22:02

すいません、早速コメントいただいたようでありがとうございます。問題解決しました。たぶん・・・、パソコンに削除したはずのキャッシュが残っていて、それが表示されていたようです。お騒がせしてすみませんでした。こういうコミュニティあると本当に助かりますね。これからも宜しくお願いします。

48. Posted by はちぷー   2004年11月13日 21:00

初めまして。何回か今まで拝見させていたのですが、今回は
質問させて頂きたくて記入させていただきました。
実は前から何度か３カラムに挑戦していたのですが
（そのときはうまくいっていました。）、今回新デザインに
したところ、ＩＥのお気にいりとがサイドにほかの表示をする
と、右側のサイドバーが本文と重なってしまうのをなくしたい
のですがどのようにしたらいいでしょうか？

49. Posted by junike   2004年11月14日 00:37

>はちぷーさん
.blog の width に数値が入っていますがそれを auto にすれば
右サイドバーが重ならずに可変になります。
ただ、日付のところやタイトルの背景には画像を使っているので
ブラウザの横幅を広げすぎると画像の幅を超えてしまうので切れたような
感じになってしまいます。
.date や .title の background のところを no-repeat から repeat-x
とすれば切れるようなことはなくなりますが、日付の方は星のマークが再び出てしまうので、.title だけにするかどちらもそのままかはお好きな方でいいかと思います。

50. Posted by はちぷー   2004年11月14日 17:32

junikeさんありがとうございました。
何とか解決出来ましたのでホットしました。
これからもよろしくお願いします。

あとリンクさせて頂きましたので、もし不都合等
ありましたら、連絡いただければと思います。

51. Posted by ゆうこ   2004年11月19日 11:56

いつもお世話になっております。

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

よろしくお願いしますｍ（＿＿）ｍ

52. Posted by junike   2004年11月19日 20:44

>ゆうこさん
いまのゆうこさんのＣＳＳからだと
#countainer と #content に

　position: relative

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

　MARGIN: 0px 220px 5px 190px

などとすればいいでしょう。

53. Posted by me-mi   2004年11月21日 15:49

はじめまして。
こちらの方法を使わせていただいて３カラムにすることができました。
ありがとうございます。

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

でもサイドバーが付いたので良し！としています。
ほんとうにありがとうござました。

54. Posted by junike   2004年11月21日 16:25

>me-miさん
この方法では３カラムになるのはトップページだけです。
個別記事や月別記事も３カラム化するには「地獄変OO」さんの
http://blog.livedoor.jp/jigokuhen00/archives/4417904.html
↑こちらを参考にしてみてください。

55. Posted by me-mi   2004年11月21日 21:07

junikeさん
お返事ありがとうございます！
参考にさせてもらいます。

私のブログ、動きがかくかくするのは画像が重いからなんでしょうかね？
amazonの画像貼りたくて３カラムにしたのに。

56. Posted by junike   2004年11月21日 22:59

>me-miさん
動きがかくかくするのは、#countainer と #content にある
　position: relative;
が影響しているらしいです。
これはMac版IEでも見れるようにとつけたものですが、それをはずして（削除してみて）崩れずに見られるかとうか検証できていません（手元にMacがないので）。
ためしにはずしてみてかくかくしなくなったら（かくかくしてたらそもそもそれが原因ではなかったということですが）、MacのIEを持ってる人に確認してもらうとか。
relative というのは相対的な位置をそのつど再計算していると聞いたことがあります（レイアウト上の位置関係を）。それがなければそのつど計算する必要もないのでするするスクロールできるんじゃないかなと思います（正確でなくてすいません）。

57. Posted by コトリ   2004年11月23日 11:27

はじめまして！
こちらの記事を参考にさせていただいて、やっと３カラム化に成功しました。
本当にありがとうございます。

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

もしよろしければ教えていただけるとうれしいです。
よろしくお願いします。

58. Posted by junike   2004年11月23日 11:49

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

「サイドバー」「本文」「サイドバー」という表示順はここで紹介している方法ではそうならないと思うのですが、どうでしょう。（links2をここで紹介しているようなJavascriptファイルをプラグインとして挿入する方法ではなくて、HTML編集で組み込めばそういった表示順も可能だと思うのですが）

59. Posted by me-mi   2004年11月23日 15:27

junikeさん
色々教えていただいてありがとうございました。
position: relative;
をはずしたところ、かくかくしなくなりました。
そして、Mac版IEでは表示が崩れました(笑)

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

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

本当にお世話になりました。
ありがとうございました。
うちのトップからリンク張らせてもらいました。

60. Posted by ギフタツ   2004年11月24日 00:14

はじめまして。

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

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

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

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

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

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

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

初歩的な質問で申し訳ありませんが、何卒よろしくお願いします。

61. Posted by junike   2004年11月24日 20:04

>ギフタツさん
どこでもいいのですが、迷ったらいちばん最後でもいいです。
最後は　checkers　だと思うのでそれを閉じる「 } 」の次の行にでも
入れてみてください。
↓こんな感じ
　
.checkers {
MARGIN-TOP: 10px; FONT-SIZE: xx-small
}
DIV.main IMG{
position: relative; z-index: 1;
}

これで画像が表示されるようになります。

62. Posted by ギフタツ   2004年11月25日 00:15

junikeさん、ありがとうございました。
無事画像が表示されるようになりました(^o^)／
これからサイドバーの高さの調整や真ん中カラムの固定化などに
挑戦していきたいと思います。
これからも色々と勉強させていただきます。
今後ともよろしくお願いいたしますm(__)m

63. Posted by baaaaagel！   2004年11月25日 21:34

シトラスのテーマで3カラムにしようとしたのですが
3列にはならず、サイドバーは左だけのまま
ページ中ほどくらいからページ前面にサイドバーの
項目部分のストライプが延びてしまい反映できませんでした。
お手数ですが何が原因か教えていただけたらうれしいのですが。。

上のほうのコメントにあった
.blog{
　　　padding:15px 0 15px 0;
　　　border:solid 1px #fff;
　　　}
をやったらいいのかと思い、修正してみましたが
それでもだめでした。。

64. Posted by junike   2004年11月25日 22:43

>baaaaagel!さん
拝見しましたが、うまくいかなくなったので元に戻されたのでしょうか？
サイドバーが左だけというのはサイドバーを分ける links2 のJavaScriptファイルを作ってアップしていないか、それをプラグインとして入れていないかが考えられます。
countainer、 content、 links、 links2 などもう一度最初から見直していただけますか。
それでだめな場合、だめなままの状態にしておいてもう一度ここにコメントしてください（大きく崩れて読めないというのではなさそうなので）。
その状態で見て見ないとどこがまずいのかわかりません。

65. Posted by baaaaagel！   2004年11月25日 22:58

＞junikeさん
レスありがとうございました。
さっきはできないので戻してありました。
もう一度よく読んで挑戦したところうまくいきました！
お騒がせしました。
おかげで見やすいブログができそうです！感謝です。

66. Posted by baaaaagel！   2004年11月25日 23:19

たびたびごめんなさい。。
できたと思ったのですが、ウィンドウサイズによって
ブログの部分にはってある画像とかが右サイドバーに
飛び出してしまうのです。。。
お手数ですがアドバイスお願いできまでしょうか。
右にとびでないように。。

67. Posted by junike   2004年11月26日 21:11

>baaaaagel!さん
画像が右側に飛び出して見えるのは右のサイドバーの背景が透明だから重なって見えるためです。
たとえば links2 に background-color: #fff; を入れると、画像が途中で隠れるような感じになります（「【pointage（ポワンタージュ）】麻布十番」の３枚の画像のある記事など）。
もともと全体の背景が白なのでサイドバーの背景が白で同じになりますから、背景をあわせて見かけ上そうすることはできます。

３カラムにすると真ん中の記事の部分の幅はどうしても狭くなりますから、こういうことも考えてあまり幅の広い画像は置かない、または右側に続くように連続して置かないようにするしかないです（あるいは大きい画像は「続きを読む」のあとにしてトップページには置かない）。
テキスト文字のように３枚目の途中で右端になったら自動的に３枚目だけ「改行」してくれるようになればいいのですが、どうやればそうなるかわかりませんでした。

68. Posted by baaaaagel！   2004年11月26日 21:48

たびたびありがとうございます。
とりあえず教えていただいたとおり、右サイドバーの背景を白くして
画像が映りこまないようにしてみました。

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

ご教授いただけないでしょうか。ちょうどこれくらいの幅にしたいです。

69. Posted by junike   2004年11月26日 23:27

>baaaaagel!さん
それであれば↓こちらを参考にしてみてください。
http://junike.livedoor.biz/archives/609550.html

#content に width:440px; など数値を指定して
margin によって両サイドをあけるのではなく
#content で left:200px;
#links2 で left:600px;
など左からの位置を指定するようにすればできるでしょう。
真ん中のカラムの幅は #links2 の数値をどのくらいにするかによって調整できます（同時に #content の width の数値も変える）。

70. Posted by baaaaagel！   2004年12月03日 23:04

またまたお世話になります。。
色々といじっていたら右サイドバーの右側にスペースがなくなってしまいました。
前までは左のサイドバーからページの一番左端までと
同じくらいのスペースが出ていたと思ったのですが。。。
どうやったらなおりますでしょうか。。
右にスクロールしても、サイドバー自体が画面の右側に
くっついてしまっていて見づらいのです。。
お助けくださいませ。

71. Posted by junike   2004年12月03日 23:24

>baaaaagel！ さん
サイドバーが画面の右端にくっついたのではなくて、links2での左端からの位置が大きいからそのように見えるのだと思います。
baaaaagel！ さんのパソコンの解像度がどの程度かわかりませんが、ぼくの環境から見るとブラウザの右端を広げてみるとスペースは画面があるかぎり、あきます。
おそらく、content の width を50pxくらい小さくして、470px、
links2 の left も同じく50px小さくして670pxとすれば少し左につまって右端にスペースがあくかと思います。
まだあかないようでしたらもう少し60pxずつ小さくするとか。

72. Posted by baaaaagel！   2004年12月04日 10:29

レスありがとうございます。
変えてみたのですがやはり症状は変わらないです。。
というかそもそもあの数値でも最初は右側にスペースが少しあって
そこまでスクロールできるような状態だったのですがなぜでしょう。。
確かに画面サイズを広げてみれば右側にスペースはでてくるのですが
どうも見づらくて・・。何か他に方法があれば教えてください。

73. Posted by junike   2004年12月04日 14:36

>baaaaagel！ さん
では
#content　で
　PADDING-RIGHT: 220px;
　WIDTH: auto;

#links2　ではleftに変えて
　right: 10px;
とし、またMARGINの右も少しスペースをとってみて
　MARGIN: 15px 20px 0px 0px;
としてみたらどうでしょう。
真ん中の幅は可変になりますが、contentのPADDINGで右サイドバー分のスペースをとるようにしてみました。
また、これだと画像が横に並んでいても幅が狭くなると自動的に改行されるようになってます。（前回コメントしたときにはこれができなかった）

74. Posted by グッチ   2004年12月04日 21:14

はじめまして。
お陰さまで無事に3カラムにできました。
ただ、左右のサイドバーがタイトル部分に飛び出してしまうのですが、これはどうしたらいいのでしょうか。
それと、個別記事カテゴリー別アーカイブでの3カラムにしてるのですが、サイドバーに表示されるコンテンツがトップ画面と違ってしまうのですが、これは何が原因なんでしょうか？
ご教授をお願いいたします。

75. Posted by junike   2004年12月04日 22:26

>グッチさん
サイドバーが左右のタイトル部分に飛び出るのは、 link と links2 の top のところの数値をもう少し大きくすれば解決します。

個別記事での３カラムのときにサイドバーがトップページと違うというのは、個別記事にもサイドバーを出したことがないのでわからないのですが、おそらくGoogleAdsをサイドバーに表示させるときにJavaScriptを利用しているのではないですか？（GoogleAdsをどのように設置するのか知りませんが）
だとしたら個別記事にサイドバーを出そうとするときにすでにJavaScriptを使っているうえにその内側にもう１つJavaScriptが使われている（GoogleAdsのこと）のでこのようになるのだと思います。
なのでGoogleAdsの部分は１つの独立したHTMLファイルにしてしまってそれをアップロードし、サイドバーに表示させるのはフリーメモプラグインでiframeタグを使ってそのHTMLファイルを指定するようにすればいいと思います。
↓こちらを参考にしてみてください。
http://junike.livedoor.biz/archives/123647.html

76. Posted by グッチ   2004年12月04日 23:18

早速のお返事ありがとうございました。
サイドバーがタイトル部分に飛び出るのは、お陰さまで解決しました。
GoogleAdsはフリーエリアにHTMLで書き込むようになってるんです。
試しにGoogleAdsを削除しても結果は変わりませんでしたが、アドバイスありがとうございました。

77. Posted by イチゴ   2004年12月09日 17:56

感動です。大変わかりやすい説明のおかげで、念願の3カラムに成功しました。
ココに辿り着けてよかったー！本当にありがとうございました！
フト、疑問に思ったので、質問させて下さい。
もしも、この先、規定のテンプレートにしたい場合（今だけクリスマスのテンプレにしたいとか）、どうしたらいいのでしょうか・・？
今迄のように、ポチっとデザイン変更→再構築だけではすみませんよね・・？
（追加したカテゴリの3カラムをはずすのかな・・と想像はしているのですが）
更に、その、今だけクリスマスを、元のカスタマイズした3カラムに戻したい時・・。
折角できた3カラムがダメになるのが怖くて、迂闊に試せません・・。
ド素人にどうか教えてください・・。

また、個人的な希望ですが、左サイドバーにある、「ｓｔｙｌｅ　ｃｈａｎｇｅの‘文字を大きくする’」というのが、大変羨ましいので、今回のように、また記事で説明していただけないでしょうか・・！
（あ、‘初心者にはちょっとムリ’な超難題なら諦めます…(＞＿＜、)）

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

78. Posted by junike   2004年12月09日 20:50

>イチゴさん
お役に立ててよかったです。
他のテンプレに変更するときに何もしなければ３カラムではなくなります。
そのときは２カラムになります。
他のテンプレに変更する前に、３カラム化したときのＣＳＳをテキストファイルで保存しておけば、他のテンプレ（２カラム）からその保存しておいたＣＳＳに置き換えればまた３カラムに戻ります（３カラム化するときにプラグインとして挿入したJavaScriptファイルはそのまま存在するものとします）。

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

「文字を大きくする」については、このブログの右サイドバーのamazonのところにあるBlogHacksという本の中の１つのネタを元にしています。
ちょっとめんどくさいですが、そのうち記事にしてみます。
記事にしたらそちらの何かの記事にトラックバックしてお知らせします

79. Posted by イチゴ   2004年12月09日 21:36

ああ・・・！早速のお答え、ありがとうございます・・！
今迄通り、ポチっとでいいのですか・・！
安心しました。これで今日はぐっすり眠れます（笑）
こんなにご丁寧に教えていただき、本当にありがとうございました。
これからも、マイ教本とさせて頂きます。
文字を大きくする・・は、ちょっと面倒なら結構です。
欲張りすぎました、ごめんなさい。
（ｊｕｎｉｋｅさんの意思で記事になさるのならいいのですが、
いきなり頼まれちまったことは忘れて下さい。）
本当に本当にありがとうございました！

80. Posted by junike   2004年12月10日 11:58

>イチゴさん
「ちょっとめんどくさい」というのは記事にするのがという意味ではなくて、その作業自体が手間がかかるという意味でした。
なので、記事にするとしてもあとで気が向いたときにすることにします。

81. Posted by ｽﾎﾟｰﾂﾊﾞｶ   2004年12月11日 11:37

お初です。貴サイトの丁寧な説明で３カラム化成功致しました！
本当にありがとうございますm(__)m　今は唯一横幅が違うカレンダー
をどうやってサイズ変えるんだろうと思案中です。

ただメチャメチャ重いんですよね。やっぱりプロにすると早いですか？
しちゃおうかな〜♪

82. Posted by junike   2004年12月11日 17:27

>ｽﾎﾟｰﾂﾊﾞｶさん
カレンダーをサイドバーと同じ幅にするならたとえば
.calendartable {
BACKGROUND-IMAGE: none;
MARGIN: 0px 0px 10px -4px;
WIDTH: 100%;
TEXT-ALIGN: center;
}
とWIDTHを上のようにすればできます。180pxなどとすれば任意の幅にできると思います。（MARGINはお好み）

ナローバンドだと重いかもしれません。当方はADSLで実質1MB/bbs程度だと思いますが貴ブログを見てもそれほど重くは感じないので。
PROにすると本当に早くなるかどうかはわかりません。
PROにしてURLが無料版の「ｈttp://blog.livedoor.jp/livedoorID/」よりは 「ｈttp://livedoorID.livedoor.biz」 となったものが経験的に早く表示されているような気がしているだけです。

83. Posted by ｽﾎﾟｰﾂﾊﾞｶ   2004年12月11日 18:38

こんばんわ！今日一日かけてやっていましたが、出来ないとこにjunikeさん
のコメントが！！さっそく試してみると・・、出来ました！！感謝・感激で
す。ありがとうございます。

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

ちなみにリンクの色などを変える場合はどうするんですかね？色の表示が#xxxなどなのでよくわからないんです ( p_q) うっうっ

84. Posted by junike   2004年12月11日 19:45

トップページの記事の数の影響は大きいです。
記事を先に読んでからサイドバーを表示するようになっていますので。

色については↓こちらのようなものを利用するといいでしょう。
http://www.ushikai.com/colchk/chart21/chstart.htm

85. Posted by スポーツバカ   2004年12月12日 23:44

こんばんわ。スポーツバカです。

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

リンクの色など変えられたらまた報告に来ます。
ありがとうございました^^v

86. Posted by マドモアゼルはお年頃。   2004年12月13日 22:14

　はじめまして！

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

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

　トップページ　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;
}
　・・・この様になっている箇所です。

　どなたか心当たりのあるポイントがございましたら、是非ご教授下さいませ。

87. Posted by マドモアゼルはお年頃。   2004年12月13日 22:28

　確認してみたら、IEではその症状が出るものの、Operaでは普通に表示されますね・・・。
　IE特有の症状なのかなあ。。

88. Posted by junike   2004年12月13日 23:11

なかば強引ですが、dateの画像のパスを以下のように絶対パス指定にしてみて、かつ　H2.date　というのをつくって、POSIRION：relative　というのを入れてみてください。これをやるとなぜか出るということがよくあります。IEのバグっぽいかもしれません。

.date {
　　BACKGROUND: url(https://parts.blog.livedoor.jp/old_img_com/img/usr/20040809/umi3_date.gif) #fdf2f6 no-repeat;
}

H2.date {
Z-INDEX: 1; POSITION: relative
}

89. Posted by マドモアゼルはお年頃。   2004年12月14日 00:35

　早速のご返答、ありがとうございます！

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

　本当にありがとうございました！

90. Posted by Kaoru　Urizane   2004年12月21日 14:33

こんにちは。
みごとに失敗してしまいました。。
document.write　　…うんぬんをメモ帳に作って保存するところでつまずきました。
アップしてみたら、日記と外枠が重なってしまい、無残。。
ログアウトしてもう一回やり直しです・・・

がっかり。

91. Posted by junike   2004年12月21日 20:24

>Kaoruさん
もしかしてファイル名が「3column.js.txt」とかになっていませんか？
（Windowsの場合）エクスプローラーでファイル名を表示するときに「.txt」などの拡張子を表示しないようにしていた場合、そんなふうに保存されることがあるかもしれません。
そうでないとすると、document.wirte〜の後ろに「改行」が入っているとか。念のため改行はしないで保存したものをアップして、試してみてください。

92. Posted by yun   2004年12月23日 23:23

初めまして、最近blogを始めたyunと申します
3カラムにする方法を求めて色々と検索し、こちらへたどり着きました。
3カラム化、無事成功しました。
とても分かりやすく解説されてあって、blog初心者の私にも簡単にできました。
ありがとうございました！

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

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

93. Posted by junike   2004年12月23日 23:58

>yunさん

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

94. Posted by yun   2004年12月24日 00:39

まさかこんなに早くお返事を頂けるなんて！
ありがとうございます＞＜

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

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

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

*申し訳ないのですが、もし可能でしたら私の最初のコメントの名前をyunに変更して、その下のコメントを削除して頂けないでしょうか（滝汗
すみません（＞＜；；

95. Posted by junike   2004年12月24日 20:19

>yunさん
解像度の環境の違いですね。幅が1024もあれば十分かと思いますがそれより狭いとかぶってしまいます。個別記事の見え方とどちらの見え方を優先するかですね。
名前は変更しておきました。

96. Posted by くみ   2005年01月08日 22:01

3カラム成功しました。ありがとうございます。
せっかく成功したのに肝心な画像表示ができなくなってしまいました。。

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

このような場合はどこをどう治せばよいのでしょうか？？（＞＜）

97. Posted by junike   2005年01月09日 00:29

>くみさん
CSSに以下の記述を追加してCSSの再構築をすれば表示されるようになるでしょう。

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

98. Posted by くみ   2005年01月09日 12:46

早速のお返事ありがとうございます！
CSSに貼るだけで無事表示されるようになり、感激しております。

勉強不足ですね・・・。

とても助かりました。（＾＾）ありがとうございます！！

99. Posted by Daisy   2005年01月14日 13:30

こんにちは。質問なのですが
StyleSwitcherで２カラムにしたり３カラムにしたりしたいのですが
３カラム用のスタイルシートをこちらの通りにしたのに
２カラムのほうも３カラムのように左右に分かれてしまい
デザインが崩れてしまうのですが･･･

こちらでは、キレイにできていますよね。
StyleSwitcher使用では何かコツがあるのでしょうか？

100. Posted by junike   2005年01月14日 22:42

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

links2の位置をtopやleft、rightで指定している以上、そうするしか思いつきません。
（わかりずらい文章なので、また何かあれば質問してください）

101. Posted by パパ   2005年01月15日 00:22

はじめまして。ただいま３カラムチャレンジ中です。
下記文章について、ど素人なので教えて頂きたいのですが…

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

とありますが、普通のワードでダメなんですか？ＷＩＮ９８なのか『メモ帳』が見当たらないので、他の方法がありましたら教えて頂ければと思います。宜しくお願いします。

102. Posted by junike   2005年01月15日 11:14

>パパさん
Wordでは保存するときにファイルの種類で「書式なし（*.txt）」というようなものを選んで保存すれば大丈夫かと思います。
メモ帳はWindowsのスタートボタンの中に「ファイル名を指定して実行」があればそれを選択して「notepad」と入れれば起動されます。
だいたい「スタート-プログラム-アクセサリ」の中にあるかとは思いますが。

103. Posted by パパ   2005年01月15日 21:28

早速の回答有難うございます。なんとか３カラムになりました。ちょっといじらないといけないですが、ちょこちょこやってみます。本当に有難うございます。ｍ−ｍ

104. Posted by すがし   2005年01月16日 14:39

はじめまして。

３カラム化にしてみようと色々と設定をしてみたのですが、左側にコンテンツが表示されません…「最新トラックバックの表示」と「頑張れ受験生の」のコンテンツの間にjavascriptで3カラム化をいれてみたんですけど…
アドバイスをお願いします。

105. Posted by すがし   2005年01月16日 15:43

左側にコンテンツが表示されません
ではなくて
左側にしか…のマチガイでした(@_@)すいません。

106. Posted by junike   2005年01月16日 16:49

>すがしさん
「「最新トラックバックの表示」と「頑張れ受験生の」のコンテンツの間」のソースを見てみましたが、１行だけのJavascript文が入っていませんでした。
JavascriptプラグインでURLを指定するところで、自分が名前をつけてサーバーにアップしたそのままのものを指定していませんか？
ファイルは通常はアップすると不規則な名前のファイル名に変換されてしまいます。そのファイル名を指定するようなURLにしてください。
それでもだめな場合は作ったJavascriptファイルの保存形式か拡張子がおかしいかなどが考えられます。

107. Posted by すがし   2005年01月17日 15:00

アドバイスありがとうございます！３カラム化に成功しました(^o^)丿

108. Posted by amuse_master   2005年01月27日 22:52

Junikeさん　はじめまして。
こちらの説明で行ったのですが、なかなか
うまくいかず、苦戦してます。

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

よろしくお願いします。

109. Posted by 殿熊   2005年01月28日 13:32

junikeさん、はじめまして。殿熊と申します。
早速質問で申し訳ないのですが、
３カラムにはなったのですが、ページ上のえべっさん
(タイトルというのでしょうか？)がうまく表示されません。
どうしても３カラムでいきたいので、
とりあえずこのままにして、自分でも考えてみますが、
ご指導お願いいたします。
３カラムの設定は2004.11.11のタイプでしました。

110. Posted by junike   2005年01月28日 20:36

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

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

111. Posted by amuse_master   2005年01月28日 21:12

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

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

初歩的なミスでお手を煩わせてしまった事を
お詫び申し上げます。ありがとうございました。

112. Posted by 殿熊   2005年01月29日 21:35

junikeさん。殿熊です。
早速回答していただきましてありがとうございます。
タイトルが真ん中にこないので、
Blogの設定の「タイトル・説明」にスペースを入れて
真ん中にもってきました。
あの一番上のカラフルはえべっさんは移動できないのでしょうか？
左端が黄色くなってしまっているので
えべっさんを左端から右端までシッカリ表示すること(拡大??)
それか、センターに寄せる方法は無いのでしょうか？

113. Posted by junike   2005年01月30日 11:26

>殿熊さん
タイトルは .blogtitle の PADDING-LEFT をたとえば 400px　などとすればだいたい真ん中に来るのではないでしょうか（その前にタイトルの前に入れたというスペースを取って）。
タイトルの下の説明は　.description ですのでそれの PADDING-LEFT をたとえば 100px　にするとか。
タイトル部分の画像ですが、これは #banner と #subbanner の BACKGROUND の後ろの方にある
　no-repeat 50% 0px; を
　no-repeat 25% 0px; くらいにしてみればだいたいいい位置に来るのではないでしょうか。
それらの数値を試してみてください。

114. Posted by ちび   2005年01月30日 14:15

junikeさん初めまして((_ _*
こちらの記事を元に3カラムにしてみました。
画像付きでとても簡単に出来ました。ありがとうございます(*^-^*)
livedoorのテンプレではなく配布してらっしゃる方のテンプレートを使用していますが自分で2カラムのものを3カラムに変更したのでちゃんと表示されているか(サイドバーが落ちてないか,記事と被ってないかなど)心配です。もしwindowsで崩れていたら教えて下さいm(_ _)m
macでは大丈夫みたいです(本当はもうちょっと真ん中の記事を左に寄せたいんですが…)

115. Posted by junike   2005年01月30日 17:39

>ちびさん
Windowsでもきちんと見えてますよ（IE6.0で確認）
真ん中の記事をもう少し左に寄せるなら
#content　の　margin-left　を　10px　くらい小さくしてみたらどうでしょうか？

116. Posted by ちび   2005年01月30日 21:54

junikeさん見て頂いてありがとうございます〜！windowsでも崩れてないとわかり安心しました。
変にいじくると取りかえしのつかない事になるのでわからない部分は触れませんでした；
記事部分も真ん中に来てやっと完成しました。ありがとうございました(^-^*

117. Posted by 殿熊   2005年01月31日 23:15

junikeさん。
親切な対応していただきまして、本当にありがとうございました。
スペースも今はずして、junikeさんの指示通り数値の調整をし、
無事移動しました。再構築する時、毎回ドキドキするけど、
思い通りになるととってもうれしいです。
早く、自分の殿熊のイラストを背景にしてみたいです。
まだ何も準備できてないけど・・。

118. Posted by 船橋染六郎   2005年02月07日 06:49

はじめまして。
わたくしのブログも念願かなって３カラム化することができました。
ありがとうございます。

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

一体どういうことなのでしょうか。分かる方、教えてください。

119. Posted by 船橋染六郎   2005年02月07日 06:53

あ、注意書きに書いてありますね。
これやったら直りました。
たびたび感謝です。

120. Posted by 諸葛亮   2005年02月07日 14:35

はじめまして！とっても参考になりました。でも私のサイトちょっと変なんですよね・・・。ブラウザの幅が変わると左サイドバーが思いっきりずれてしまます。「お気に入り」なんかをはずすとひどいものです。何故なんでしょう？
どなたかアドバイスいただけないでしょうか？

121. Posted by junike   2005年02月07日 19:40

>諸葛亮さん
WindowsでIE6.0で見た限り、問題なさそうですかその後直ったのでしょうか？

122. Posted by 諸葛亮   2005年02月07日 23:34

見ていただいてありがとうございます！！
残念ながら直りません。画面の左の「お気に入り」
のところを外しで画面が大きくなったら、変な画面になります。
真中のコラムがながーくなって、左サイドバーがずれるんです。
どうすればよろしいのでしょうか？？？

123. Posted by junike   2005年02月08日 12:55

>諸葛亮さん
「お気に入り」ツールバーをはずしてもはずさなくても
真ん中のカラムは長くなっています（2/1の記事まで）。その長さは変わりません。
左サイドバーがずれるというのはどういうことでしょうか？
WindowsのIEで見ている限りその様子がわかりません。
どんなふうにずれているのか、画面キャプチャ（画像）をご自分のBlogにアップしてもらえればわかるかもしれません。
また諸葛亮さんはどのような環境で見ていますか（WinかMacか、ブラウザは何か、画面の解像度は？）
（夜、家に帰ったらCSSを見てみますが）

124. Posted by 諸葛亮   2005年02月08日 18:46

家でも会社でもＷｉｎです。家は98、会社は2000です。またＩＥでもＦＩＲＥＦＯＸでも見てますが、やはり中カラムが長くなってその分サイドバーが左に行くって感じです。何とかタイトル（色のついた部分）内に中カラムも左サイドバーも収めたいのですが・・・。それから、ＰＣ初心者なので画像のアップ方法も？なんです。ごめんなさい。よろしくお願いします。

125. Posted by junike   2005年02月08日 20:38

>諸葛亮さん
タイトルの幅に収めたいということとCSSを見てわかりました。
CSSファイル内に　#container　が２箇所ありました。
いちばん下につけた方を削除して、上の方にある#containerを
↓これに差し替えてみてください。

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

これで意図するもになるのではないでしょうか？

126. Posted by 諸葛亮   2005年02月08日 22:25

ありがとうございます！！！３カラム完成しました！
ホント、何から何までPC初心者の私に親切丁寧に教え
ていただいてありがとうございました。今後ともよろ
しくお願いします。

127. Posted by wakadanna   2005年02月09日 14:48

はじめまして。

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

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

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

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

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

よろしくお願いします。

128. Posted by junike   2005年02月09日 17:39

>wakadannnaさん
アイコンがメモ帳のままというのは、まだファイルがテキストファイルのままということではないでしょうか。
おそらく「3column.js.txt」などというファイル名になっていてそのうちの「.txt」の部分が見えないとか。
wakadannnaさんのエクスプローラーの設定が拡張子を表示しないモードになっているとそうなってしまうかもしれないので、エクスプローラのオプション設定画面で拡張子を表示するようにしてファイル名を「3column.js」で終わるようにしてからそれをアップして試してください。
（それにしても右サイドバーがしっかり表示されているのが変ですが。#countainerが２箇所あるなどのダブりがないかどうかも確認してください）

129. Posted by takekyo   2005年02月11日 23:18

こんばんは。はじめまして。
ライブドアのブログを３カラムにしようと参考にしていますが、
jsファイルがアップロードできないようです。
どうしたらいいのでしょうか？
教えていただけませんか？

130. Posted by junike   2005年02月12日 10:40

>takekyoさん
jsファイルをつくってアップする代わりに、
フリーエリアプラグインを使ってそこに

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

と書いたものを保存して左サイドバーの一番下のところにくるように順番を指定してください。
それだけだと何もタイトルも中身もないプラグインがあるだけなので何か文章なりリンクなりを書いて、その最後に上のタグを入れておくと見た目はそれなりになるでしょう。

131. Posted by junike   2005年02月12日 11:54

>Noahさん
はじめまして。
さっそくファイルのアップができないと戸惑う方が出てきたので、フリーエリアを利用する方法に記事の内容を変更しました。

>「sidetitle」「side」の装飾を考慮した
の部分がどの程度されなければならないのか、いろんなテンプレートがありますからわかりませんが、とりあえず side を border で囲ってても大丈夫なようなのでこれで様子を見てみます。

132. Posted by sonyfan   2005年02月12日 13:29

以前からこの方法で３カラムにしてるんですが、
自分が使ってる標準のテンプレートでは
containerとcontentのpositionをrelative;にすると
linksの制御が利かない自体が発生したんで

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

なにか問題でもあるんでしょうか？
表示速度が遅くなる気もしないではないんですが。

133. Posted by junike   2005年02月12日 17:24

>sonyfanさん
countainer と content に position を入れているのはMac版IEで崩れるのを防ぐためです。
もしMac版IEでも崩れていないようなら問題ないと思いますが、ぼくはMacを持っていないので確認できません。

134. Posted by 殿熊   2005年02月12日 23:47

junikeさん。
３カラム化の時は大変お世話になりました。
あの〜2/10の開発日誌でのことで質問です。
現在、以前設定した３カラムは全然異常ないのですけど、
junikeさんの言う
＞PROユーザーはFTPによりアップできます
と言うのをやりなおさないと、今の３カラムは崩れてしまうのでしょうか？

135. Posted by Noah   2005年02月13日 00:06

＞junikeさん
記事の変更お疲れ様です。

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

3カラムの定番記事をおつくりになり、そのコメント、質問にひとつひとつお答えすること、お疲れのことと存じます。どうぞご自愛ください。

136. Posted by junike   2005年02月13日 00:31

>殿熊さん
今３カラム化してあるBlogはそのまま利用できますので崩れることはありません。したがってやり直す必要もありません。
もしデザインを他に変更しようとしても、一度アップしたjsファイルはそのまま残っていますので、３カラム化として挿入したjsプラグインはそのまま利用できます。
アップできるファイルの種類が制限されてしまった現在、jsファイルをアップできる方法はPROユーザーが利用できるFTPによる場合だけになってしまったということです。

>Noahさん
お気遣いありがとうございます。
ちょっと楽観的かもしれませんが、多分今回のファイルの種類制限は何らかの形でもう少し緩められるような気がしています。中の人には届くとは思うのですが。。

137. Posted by 殿熊   2005年02月13日 13:16

junikeさん。ご回答ありがとうございました。
いろんなところを見ても分からなかったので、
ついついjunikeさんを頼ってしまいました。
いつも親切に答えていただきまして、
本当にありがとうございます。

138. Posted by さゆり   2005年02月13日 16:51

はじめまして。
３カラムにしようと思い、こちらのサイトや他のサイトを参考にして、
なんとか成功しました。

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

よろしければ教えて下さい。
お願いします。

139. Posted by junike   2005年02月13日 17:30

>さゆりさん
CSSの .date に
　Z-INDEX: 1; POSITION: relative;
を入れてみてください。
出ると思います。

140. Posted by さゆり   2005年02月13日 17:41

junikeさんありがとうございました。
正しく表示されるようになりました。
それと、OreraじゃなくてOperaでした。

こんなに早く対応してもらい、
本当にありがとうございました。

141. Posted by りょうこう   2005年02月14日 11:05

はじめまして。ド素人の私が今回３カラムに挑戦したのですが、（無謀ですよね）左側には並び順１のものしか入らないんです。順番の付け方がまずいのでしょうか？説明不足ですみません。教えてください。

142. Posted by junike   2005年02月14日 19:49

>りょうこうさん
２点あります。
まず、#countainer が見当たりませんので、これを入れてください。
次にフリーメモに入れたlinks2が２箇所にあります。１箇所だけにしてください。
これで大丈夫かと思います。

143. Posted by りょうこう   2005年02月14日 21:20

こんばんは。早速お答えいただきありがとうございます。
自分では説明いただいたようにやったつもりなんですが、
どうもうまくいってません。
それともう１点、本文がすべて繋がってしまうのです。
改行もしているんですが・・・。
かなり読みづらいですよね。解決策があるのでしょうか？
教えてください！

144. Posted by o15   2005年02月14日 21:55

はじめまして、いきなりなんですけど、自分のぺージを見てもらうとわかるんですけど右側の空白をなくしたいんですけど、どのようにすればいいですか？

145. Posted by junike   2005年02月14日 23:29

>りょうこうさん
#countainer は入りましたが、
　</div></div><div id="links2"><div>
が２箇所に入ったままです。とりあえず「Archives」のあとの「おすすめ」のプラグインを１つ削除してみてください。
そうするとカレンダーなどが左サイドに来て、Google検索の入った方の「おすすめ」が左サイドのいちばん下に来ると思います。そこでlinks2を入れているので右サイドバーにあるのはおそらくlivedoorBlogのロゴだけになると思います。
もし、たとえば「アフィリエイト本」を右サイドバーに持ってきたかったら、Google検索のある方の「おすすめ」のプラグインよりも後の番号をつけてプラグインの設定で並び替えてください。
本文が続いてしまうというのは、記事を書く画面の下の方に「フォーマット」という行があって、「改行を<br/>タグに変換」を選択した状態で保存すれば、改行を自動的にしてくれます。そこを確認してください。

>o15さん
右側の空白というのは「釣り日記」というBlogのタイトルやlivedoorのロゴのある部分の右側のことでしょうか？
だとして、そこをなくしたあとはどうしたいのでしょうか？
基本的にはBlogタイトルの部分は同じ高さの幅で左右いっぱいになっているものです。
それでもたとえば links2 の TOP をいまは 190px だと思いますが、それを 40px くらいにして「MYブログLIST」と「NEWS」の順番を入れ替えれば右上にニュースが入るような感じにはできます（ちょうどいい高さになるように数値は調整してください）。

146. Posted by o15   2005年02月15日 10:20

junike様　早速のご返答ありがとうございます。
タイトルではなくて、ぺージ全体の右側なんですけど、右にスクロールさせると、本体の倍くらいの空白ができてしまっています。何しろ知識が薄いものですいません。

147. Posted by junike   2005年02月15日 12:43

>o15さん
家で見たらおかしくなかったのですが、会社で見たらおかしいですね。
もう一度家に帰ったらよく見てみますのでもう少しお待ちください。

148. Posted by o15   2005年02月15日 13:54

junike様へ
なんだか色々いじくっていたら直ってしまいました。
おそらくトップページへの表示形式を20件としたためと思われます。（今までは、60件）
おかげで、ぺージも軽くなったみたいです。
いろいろご心配かけました。これからもjunike様のぺージを利用させていただきます。ありがとうございました。

149. Posted by junike   2005年02月15日 20:41

>o15さん
とりあえず直ったようなので見る手間がはぶけてよかったです。
表示件数60件はさすがに多すぎます。ただ、表示件数がそんなところに影響が出るのか初めてのケースですので、ちょっと頭の片隅に入れておきます。

150. Posted by りょうこう   2005年02月16日 07:01

junike様。
私のページ見ていただいたんですね。
ありがとうございます。
ｌｉｖｅｄｏｏｒのロゴが重なっていたので
質問しようと思っていたのですが気づいてくださったんですね。
アドバイスいただいたとおりやるとできました！
junikeさんのおかげで、ド素人にも３カラム化できました。
ありがとうございました。

151. Posted by リキ   2005年02月16日 18:29

初めまして。

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

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

をCSSに入れたのですがそれでも解消されません。
［blogbody］内の「BACKGROUND-COLOR: #ffffff」の記述を削除してみたの
ですがそれでも解消されませんでした。現在はMac対策前に戻しています。
身勝手かと思いますが何かアドバイスを頂ければ助かります。

152. Posted by junike   2005年02月16日 20:38

>リキさん
Mac対策前とされるCSSを拝見しました。
#countainer が２箇所ありましたので、どちらかを削除してください。
この段階でも表示されないのかどうかをまず確認してみてください。
それでもだめなら、拝見したところ画像はサイドバーにしか見受けられなかったので表示されない画像というのがそれだとするとCSSに

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

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

結果が出たら、またここにコメントをお願いします。
（質問の仕方が的確で完璧だったので助かります）

153. Posted by リキ   2005年02月16日 23:03

アドバイスありがとうございました。

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

とても助かりました。改めてありがとうございます。

154. Posted by ひで   2005年02月17日 17:44

はじめまして
３カラムを導入しましたが、自分のサイトに入ると画面
がチカチカと点滅したような感じになります。サイト運営自体に支障
はないんですが、原因が分かる方はアドバイスお願いします。

155. Posted by エル   2005年02月17日 23:50

こんにちわ。はじめまして。
今日、3カラムチャレンジしました。すごく解りやすくて参考になったんですが、右の上にライブドアのロゴがきて移動しません。
まったくの初心者で申し訳ないのですがこの問題はどうすればいいのでしょうか？

156. Posted by junike   2005年02月18日 12:45

>エルさん
「当ブログの画像について」の英文のあとにもlinks2のタグがあります。
それを削除してください。

>ひでさん
チカチカのことはよくわかりません。

157. Posted by o15   2005年02月21日 01:53

以前にもお世話になったんですけど、また疑問があったので、お願いします。
友達に「お前のブログ重くて読みにくい」　と指摘がありました。

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

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

回線は　二人とも同じ会社のものを利用しています。

158. Posted by junike   2005年02月21日 20:18

>o15さん
ぼくが見る限り重くはないです。
そのお友達の環境では、livedoorBlogで３カラム化しているところはすべて重いのではないでしょうか？
回線の会社が同じで速度も同じだとしてもOSによる違いは多少あるかもしれません（詳しくはわかりません）。

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

といったところです。

159. Posted by o15   2005年02月22日 20:33

junike様へ

ありがとうございます。

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

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

（あんまり変わらないかもしれないけど）

160. Posted by m&M   2005年02月27日 03:09

はじめまして。
以前３カラムにする際、参考にさせていただきました。ありがとうございました。

実は今回真ん中の記事部分を固定から可変に変えたところ、ブラウザの幅を縮めると、画像（３枚並べた）がサイドバーと重なってします。
本文はうまくいくのですが、画像だけが下へずれません。。。
いろいろ調べましたがどうしても解決できず、、、アドバイスいただけたら嬉しいです。
よろしくお願い致します。

161. Posted by junike   2005年02月27日 12:00

>m&Mさん
いろいろ試しましたがわかりませんでした。
そもそも#countainerがないのでそれを入れて、#contentもそれにあわせて適切に入れてみても左サイドバー（links）が消えてしまったりして、うまくいきません。それらがうまくいったうえでなら、画像も折り返しができるという前例はあったのですが、それができないので#countainerなしでできないかいろいろ試したのですがわかりませんでした。
画像の２枚目のあとに改行を入れるなどするしかないでしょう（２枚目よりも幅を狭くしたら２枚目の画像が右サイドバーと重なりますが）。あるいは３枚目の画像が重なってしまうのをあきらめてもらうか。
もしうまくいったら教えてください。

162. Posted by m&M   2005年02月27日 17:38

junike さん
こんにちは。
結局もとの固定に戻すことに致しました。
いろいろ試していただいたようで、お手数おかけしました。。。
私も同様にcontainerを入れてみたのですが、やはりうまく動きませんでした。
そもそもコレはなくてもよいものなのでしょうか？

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

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

163. Posted by junike   2005年02月27日 21:42

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

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

164. Posted by o15   2005年02月28日 14:46

junike さん こんにちは

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

全くjunike さん のブログと関係ない趣旨の質問ですいません。

165. Posted by junike   2005年02月28日 20:01

>o15さん
ライブドラブログのポイントの基準は二転三転して結局いまどうなっているのかわかりません。
投稿回数ではなくて、純粋にアクセス数をベースに何か重みをつけてるとかしてるのではないでしょうか。勝手な想像ですが。

166. Posted by o15   2005年02月28日 20:40

junike様へ

ありがとうございます。

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

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

こつこつやりますか。

167. Posted by m&M   2005年03月01日 03:02

junike さん
こんばんは、たいへんお世話になっております、m&Mです。
やっぱりうちのちょっと変？ですよね。
確かにこうすればＯＫという記述通りにしても、できないことが多いです。
テンプレートですが、まずdefaultを使いその後customで色等を変更し、現在の3カラムに到りました。

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

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

とりあえず、崩れることなく見れているようであれば、このままで行こうかと思っております。
何かお気づきになる点があるようでしたら、ご一報くださると助かります。

168. Posted by Nao   2005年03月13日 19:19

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

二つ気になることがあるのですが、
タイトル全体が左寄りになってしまっていることと、
ウィンドウの幅が狭くなると右のカラムが真ん中のカラムにかぶってしまいます。
真ん中の行数を幅に合わせてかえることは可能ですか？
また、難しい技術が必要になるのでしょうか。

169. Posted by junike   2005年03月13日 22:58

>Naoさん
まず #countainer が２箇所ありますので最初の方を削除してください（width:743px;がある方）。

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

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

これらは　.blog の width の行を削除すれば同時に解決すると思います。

170. Posted by jeanne   2005年03月16日 14:30

　突然、失礼します。jeanneと申します。junikeさんのｻｲﾄをはじめ、色々な方の所見を参考にさせて頂き、３ｶﾗﾑ化にﾁｬﾚﾝｼﾞしている者です。狭義の意味では一応成功していますが、どうしても分からない点があり、悩んでいます。もしｱﾄﾞﾊﾞｲｽ頂ければと思いｺﾒﾝﾄ欄を利用させて頂きました。ご快諾頂くことが出来る様でしたら、以下ご教示お願いします。

「経過」
　上記に習いCSS等を書換、変更し、自分のﾃﾞｻﾞｲﾝに合わせ微調整。３ｶﾗﾑ化に成功（環境：OS→WinMe、ﾌﾞﾗｳｻﾞ→IEのSP１？）。なおこちらのｻｲﾄでは説明がなかったのですが、containerについては当方使用しているﾃﾞｻﾞｲ　ﾝに元々書かれていたものを上記ｺﾋﾟﾍﾟ用に書換する策をとりました。また、links及びlinks2のtopはﾃﾞｻﾞｲﾝに合わせ117px→146pxに変更。上記環境下では不具合なく表示されています。
　
　別のPC（環境：OS→XP HOME、ﾌﾞﾗｳｻﾞ→IEのSP２）で閲覧すると、左右のｻｲﾄﾞﾊﾞｰが微妙に上昇、ｻﾌﾞﾀｲﾄﾙ部分と重なる現象が発生する事が判明しました。また、記事部分の幅が狭くなり、かつ左方向にずれる？状況も確認しました。

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

　成功している中のひとり、tonosama0707さん（http://blog.livedoor.jp/tonosama0707/archives/14155895.html）
　にも現在ｱﾄﾞﾊﾞｲｽを頂戴している所ですが、氏の設定と私の設定では何が異なるのか、今一つよく分かりません。

　問題のひとつ、ｻｲﾄﾞﾊﾞｰとｻﾌﾞﾀｲﾄﾙの重なりの件については、TOPのPXを大きくすれば解決しますが、この方法では閲覧するPC、ﾌﾞﾗｳｻﾞの違いでｻｲﾄﾞﾊﾞｰのﾚｲｱｳﾄが異なることになってしまい、なんだかすっきりしません。ｻﾌﾞﾀｲﾄﾙのﾌｫﾝﾄｻｲｽﾞを小さくする、または文字数を減らすことにより行を減らせば、とりあえず重なりは無くなり（実際には重なっていますが表示上は問題ない）体裁は整いますが、この方法も出来れば避けたいです。

　素朴な疑問なのですが、３ｶﾗﾑにする前の初期ﾚｲｱｳﾄでは、どんな状況下でも必ず記事部分とｻｲﾄﾞﾊﾞｰの縦横先頭位置が揃うのに、３ｶﾗﾑ化後のTOPのPXを設定したとたん環境に影響を受けるのは、どうしてなのでしょうか？

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

ちなみに上記XP HOME、IE→SP2のPCでjunikeさんのｻｲﾄのﾄｯﾌﾟﾍﾟｰｼﾞを閲覧したときにも、右ｻｲﾄﾞﾊﾞｰの「amazon」以下のプラグインが左にずれ、記事部分と重なります。何故なんでしょう？一応ご報告致します。

それでは、よろしくお願いします。

171. Posted by junike   2005年03月16日 21:04

>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でどう見えるかまで含めると持っていない自分にとってはどうしょうもないです。

残念ですがその点についてはお力になれません。

172. Posted by くろみき   2005年03月17日 13:23

はじめまして。
今まで色々なページを見て３カラムにチャレンジしてたのですが、中々うまく行かず、ここのページを見てなんとか成功しました。超初心者でも分かる説明、ありがとうございました！
ただ、見た目的にサイドの部分をもう少し狭くしたいのですが、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

173. Posted by junike   2005年03月17日 20:53

>くろみきさん
こちらでも試してみましたがwidthを200px以下にしても濃いピンク色のバーが消えることが確認できませんでした。
この部分は画像を指定しているので幅を狭くすると、バーの左端は丸みを帯びているのに右端が角張っているという変な感じになるので、いっそのこと画像の指定をやめて同じ色を背景色として指定するようにしたらいいかと思います。
　.sidetitle　の background のURLが指定してある行を丸ごと
　　background-color:#f89a7b;
に差し替えればバーの両端は角張ってしまいますが色は同じものになります。
ついでにカレンダーだけ他と幅が異なっているので
　.calendartable　に　WIDTH: 100%;　を追加すると他のサイドバーコンテンツと同じ幅になります。
試してみてください。

174. Posted by mimi   2005年03月17日 22:13

お世話になっております(*^-^*)
ここの説明を見て、３カラム化がやっと出来て喜んでいます。

もし良かったら、ひとつ教えていただきたいのですが、
ブログタイトルの部分の背景が、左によってしまって、右側が空白になっているので
もし、この背景を画面の幅に合わせて伸ばすことが出来る方法があれば
是非とも教えていただきたいです。
http://blog.livedoor.jp/sea_and_sky/ ←です。
ワガママ言ってすいませんm(_ _)m
自分でアレコレいじってみましたが、まったく動じません(;^_^A
宜しくお願いします！

175. Posted by junike   2005年03月17日 23:11

>mimiさん
試してませんが、
#banner と #subbanner にある background の no-repeat を repeat-x にしてみたらどうでしょう。
横方向に同じ画像が繰り返されるので白いスペースはなくなるんじゃないかと思うのですが。

176. Posted by mimi   2005年03月17日 23:22

すごい！！出来ました！！嬉しい〜〜(≧ε≦)
本当に助かりました！！
ありがとうございましたm(_ _)m

177. Posted by くろみき   2005年03月18日 22:31

>junikeさん
言われたとおりにやってみました！
こっちの方が全然好いです♪ありがとうございました。
ただ、ページを開くときに、画面の下に「ページ･･･を開いてます」って出ますよね？
そのとき、一瞬「黄色の三角の中にびっくりマーク」が出て、エラーが発生しましたになるんです･･･
今度は何が悪いんでしょう？(T_T)

178. Posted by mimi   2005年03月19日 02:54

お世話になっております(*^-^*)

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

いつも質問ばかりですいません(;^_^A

179. Posted by junike   2005年03月19日 11:59

>mimiさん
たしかに重いですね。というか表示が遅いというのが正確ですか。
３カラム化する前はもっと表示が速かったですか？
サイドバーにいろいろなコンテンツ、特に外部サーバーにあるものを読み出しに行ってくるようなもの（広告やカウンターなど）が多数あるとそれらを読み出してくるのに時間がかかります。
でもそれなら３カラム化するしないにかかわらず同じではないかと思うので、もし３カラム化する前が格段に表示が速かったとすると右と左のサイドバーに何をのせるかのバランスを考えるくらしか思いつきません。

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

アフィリエイターの方はなるべく多くそういうものを載せたいとは思いますが、見せ方やバランスの兼ね合いでしょう。あとはうまく表示されている他のアフィリエイターの方のを参考にするとか相談してみてください。

180. Posted by junike   2005年03月19日 12:07

>くろみきさん
回答の順番が逆になってしまいました。

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

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

その辺の心当たりを当たってみて、見直してみてください。

181. Posted by rob   2005年03月19日 15:04

初めまして！
3カラムの方法を参考にさせて頂きました。
初心者で全然理解できていませんが、とても分かりやすかったです。
どうもありがとうございました。

182. Posted by くろみき   2005年03月19日 16:54

>junikeさん

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

183. Posted by rob   2005年03月19日 18:47

junikeさん

先ほどは、本当にありがとうございました！
早速修正してみました。

184. Posted by mimi   2005年03月19日 19:35

おっしゃった通りで、
レイアウトを変えて、少し広告を減らしたらかなり軽くなりました。
欲張ってはいけないということですね・・・(;^_^A
とても勉強になりました！
いつも丁寧なアドバイス、本当に感謝しています。
ありがとうございましたm(_ _)m

185. Posted by たかし   2005年03月21日 23:34

はじめまして。

私も３カラムに挑戦しようと思い、「#countainer」「#content」をそれぞれ書き換え、「#links2」を作り、</div></div><div id="links2"><div>を入力したフリーエリアを追加したのですが、
結果は、右サイドバーに行くべき項目が左サイドバーに重なって表示されてしまいます。
デザインのテーマも変えてみたのですが、結果は同じです。
右側にはサイドバーが入るスペースが確保されているようなのですが、フラグインが右側に行ってくれません。左側に重なった状態で表示されてしまいます。
何処かに間違いがあるのでしょうか？

186. Posted by junike   2005年03月22日 12:03

>たかしさん
links2 には right:5px; とありますか？
そうしてもだめならためしに left:530px; （数値はサイトにあわせてください）
などとしてみてください。
これ以外にも考えられることは実際におかしくなっている画面のソース（CSS）を見てみないとわかりませんから、まだおかしい場合はURLを教えてください。

187. Posted by junike   2005年03月22日 12:18

>たかしさん
追記です。
トップページの再構築を忘れないでください。
左サイドバーのいちばん下のプラグインとしてきちんと
　</div></div><div id="links2"><div>
が入っているかを確認してください（ソースの表示などで）。
これが有効になっていないとそのようになります。

188. Posted by たかし   2005年03月22日 13:00

junikeさん、早速ありがとうございます。

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

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

何故「right」指定が出来ないのでしょうか？ヨロシク御願いたします。

189. Posted by たかし   2005年03月22日 16:45

junikeさん、お騒がせしました。出来ました。感動です。

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

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

本当にありがとう御座いました。

190. Posted by junike   2005年03月22日 19:51

>たかしさん
解決できてよかったです。
そうですね。他にフリーエリアを使っている場合にそうした余計なdivタグの存在というのもありがちでした。
今後似たようなことがあったときのアドバイスの参考にします。

191. Posted by じょ〜じ   2005年03月29日 12:54

はじめまして。じょーじです。

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

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

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

192. Posted by junike   2005年03月29日 20:06

>じょ〜じさん

#banner　と　#subbanner　の　width:750;　を auto か 100% にしてみたらどうでしょう。

193. Posted by じょ〜じ   2005年03月29日 23:35

ありがとうございます！見た目もかなりよくなりました。
これからもjunikeさんのカスタマイズ・ツールを参考にさせていただいて、よりよいブログをつくるために励みたいと思います。

194. Posted by あいぼ   2005年04月01日 23:22

初めまして、質問なのですが
redframeの３カラム化について
細かい設定数値を教えて頂けないでしょうか？

195. Posted by あいぼ   2005年04月02日 00:57

説明不足でした。
何度やってもリンクを分けた部分が
全て左側に重なってしまいます。
この場合は、どの数値を調整すればいいのでしょうか？

196. Posted by junike   2005年04月02日 10:37

>あいぼさん
リンクを分けた部分が左側に重なるというのはフリーメモプラグインに入れた
</div></div><div id="links2"><div>
が機能していないということが考えられます。
トップページを再構築したあとにトップページのHTMLソースに上のタグが入っているかをかくにんしてください（IEならメニューから「表示-ソース」）。

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

なお、redframeの３カラム化は難しいので、あとで注意書きか別記事を書きます。

197. Posted by junike   2005年04月02日 12:58

>あいぼさん
redframeの３カラム化について難しい部分もあったので記事にしました。
http://junike.livedoor.biz/archives/17824386.html
こちらも参考にしてみてください。

198. Posted by a-ya   2005年04月17日 14:22

初めまして。

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

ﾋﾖｺに毛が生えた状態の初心者ですので、
どこをｲｼﾞっていぃものやら・・・（＾＾；）

ご指導宜しくお願い致します。

199. Posted by junike   2005年04月17日 16:21

>miki助さん
とりあえずWindowsのIEからはちゃんと見れますよ。
Macはないのでわかりませんが。

>a-yaさん
linksの前に # がぬけていました。
これをつければ大丈夫かと思います。

200. Posted by a-ya   2005年04月17日 17:13

εミ(o_ _)o ﾄﾞﾃｯ！

早速の回答有難う御座います！
この３時間色んなｻｲﾄに訪問しては四苦八苦してましたが、
『 # 』つけて簡単に完了したしちゃいました。。。
ヾ(;´▽｀A　ｱｾｱｾ。。

まぁ、これもいぃ勉強になりました。
色んなｻｲﾄ訪問により、自分なりにｽｷﾙｱｯﾌﾟできたと思います。。
２・３日経ったらｱｳﾄﾌﾟｯﾄしてたりして・・・（＾＾；）

ともあれ、３ｶﾗﾑにできた事に嬉しく思います！
有難う御座いました。
m(_ _*)m

201. Posted by かや   2005年04月23日 14:15

はじめまして。

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

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

頼ってばかりで申し訳ありませんが、
アドバイス、よろしくお願いします。

202. Posted by junike   2005年04月23日 18:53

>かやさん
動きがかくかくするのは、#countainer と #content にある
　position: relative;
が影響しています。
それをはずせば（削除すれば）するするになります。
しかし、これはMac版IEでも見れるようにとつけたものなので、これをするとMacのIEで見ている方の表示が崩れるかもしれません。手元にMacがないので確認できませんが。
relative というのは相対的な位置をそのつど再計算していると聞いたことがあります（レイアウト上の位置関係を）。それがなければそのつど計算する必要もないのでするするスクロールできるんじゃないかなと思います。

203. Posted by dpf   2005年04月24日 05:02

はじめまして。とても参考になりました。３カラムにはできたのですが、
記事の外枠の幅がサイドバーに重なってしまいます。１日中検索して探したのですが，
分かりませんでした。サイズは規定で変えられなくなっているのでしょうか？
両サイドを縮めたいのです。
もし宜しければご指導お願い致します。

204. Posted by junike   2005年04月24日 11:32

>dpfさん
「記事の外枠の幅」というのは BODY の BACKGROUND で指定している「絵」ですので、それを同じデザインで幅を小さくするのならそういう絵を用意してそちらを参照するように指定すればいいでしょう。
それはめんどうだという場合は、とりあえず　 BODY の BACKGROUND のうしろにある　url(〜)　の部分を削除してみてください。背景が消えます。それだと字が読めないので同じ行の　#333　で色を変えれば背景全面に色がつきます。
ちなみに今の背景と同じ色であれば　#eff0f0 とすれば同じになります。

205. Posted by かや   2005年04月24日 12:43

さっそくの回答ありがとうございます！
「position: relative;」を削除すると、
カクカクがなくなりました！

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

これを機に、自分でも少しずつ勉強して、
カスタマイズして行こうと思います。
本当にありがとうございました！

206. Posted by dpf   2005年04月24日 15:24

どうもありがとうございます。同じようには出来たのですが、
記事が載る場所自体を縮める事は可能でしょうか？僕が検索したのでやると
記事事態が小さくなってしまいます。記事の白い部分の余白を少なく出来たら良いなと思います。
たびたびで、申し訳ありませんが、お願い致します（汗）

207. Posted by dpf   2005年04月24日 15:48

たびたび申し訳ありません。出来ない訳がやっとわかりました。
コメントが載るバックは画像で指定されているんですね。どうりで幅が変わらない訳です。。。
junikeさんが画像をお作りになられていたのですね！素晴らしいです！
大変，お手数おかけ致しました。とても，参考になり、どうもありがとうございました。

208. Posted by junike   2005年04月24日 16:09

>dpfさん
いま拝見しましたが、結局色を変えたんですね。それが一番楽です。
画像はぼくが作っているわけではないです。livedoorの人ではないですから。

209. Posted by とおちゃん   2005年04月26日 10:46

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

210. Posted by ちゃび   2005年04月26日 13:11

junike様

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

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

もしよろしければご教授よろしくお願いします<(_ _)>

211. Posted by ちゃび   2005年04月26日 13:56

アドレスを貼るのをわすれてました(TдT)
すいませんです<(_ _)>

212. Posted by junike   2005年04月26日 22:30

>とおちゃんさん
#linksが２箇所にあります。下の方にあるものがおそらくとおちゃんさんが試行錯誤したものだと思います。
とりあえず下の方のものを削除して、上の方のlinksを width を 175px 、左にぴったりくっつきすぎが気になれば、links に margin-left:10px 、そして
#conten の margin を　MARGIN: 0px 200px 0px 160px; とすれば
とりあえずの目的は達成すると思います。
ただ、linksのwidthが175pxなのに、MARGIN の左側が160pxでちょうどいいというのがおかしいです。IEで見ていますが他のブラウザだとちょっとおかしく見えるかもしれません。
どこがおかしいのかまではわからないので、とりあえず上記のところだけでも試してみてください。

213. Posted by junike   2005年04月26日 23:07

>ちゃびさん
#container　の　width　をたとえば　850px　とかにすればできます。
IEであればブラウザの幅に合わせて全体が常に中央になるようになりますが
IE以外では左端にくっついたままです。IEと同じような動きにはできません（というかぼくにはわかりません）。

214. Posted by ちゃび   2005年04月27日 06:28

ありがとうございましたヽ(‘ ∇‘ )ノ
なんとか端っこから離すことができました！！

これからもっと勉強してﾊﾞﾗﾝｽ良くしていくつもりです♪
本当にどうも有り難うございました<(_ _)>

215. Posted by とおちゃん   2005年04月27日 12:39

junike様
できましたー！
おかげさまで、真ん中の幅が広くなりました。（嬉）
本当にありがとうございました♪
心より感謝申し上げます。m(_ _)m

216. Posted by nanapapa2   2005年04月29日 05:47

おはようございます。３カラム化参考にさせて頂いております。突然で大変申し訳ございませんが質問がございます。私のブログでは中央カラムと左カラムが一体となり、離れなくなってしまいました。色々な方からアドバイスを頂き、切り離しに挑戦しているのですが、なかなか上手くいきません。なにか良いアドバイスございませんでしょうか。是非よろしくお願い致します。お忙しいところ、誠に申し訳ございません。

217. Posted by junike   2005年04月29日 20:55

>nanapapa2さん
一度回答を書き込んだのですが文字数が多かったようで反映されていませんでした。
今現在上記の問題は解決したようですが、IE以外のブラウザOperaやFireFoxで見ると右サイドバーが記事本文にかぶっています。
linksのleftを-215pxとしているのが影響しているのではないかと考えられます。そもそもそのようにしてIEで正常に見えていること自体おかしいのですが、それも含めて正常に表示できないかCSSを見てみましたが、原因はわかりませんでした。
IE以外での見え方が解決できませんでしたが、IEでは見た目は大丈夫ですのでその点をご承知おきください。

218. Posted by がく＠うつログ。   2005年04月29日 21:08

こんにちは、がく＠うつログ。ともうします。
お陰様で、３コラムにできました。
ありがとうございます。

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

http://u2blog.livedoor.biz/

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

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

がく＠うつログ。

219. Posted by junike   2005年04月29日 22:23

>がく＠うつログ。さん
それはIEでなくてもどのブラウザでも左端に表示されています。
記事を書くときに挿入したimgタグの最後の方に
align="left"
というのがあると思いますが、それを right にすれば右になります。
HTMLのタグの書き方の問題です。
それとも別の違う部分のことを言っているのでしょうか。

220. Posted by がく＠うつログ。   2005年04月29日 22:48

ご回答、ありがとうございます。
私はsafariとMac IE でブログ運営しているのですが、
記事中の写真は記事中にちゃんと収まっています。

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

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

221. Posted by junike   2005年04月30日 09:15

>がく＠うつログ。さん
現象が分かりました。最初に開いたときに１つ目の記事の写真のみ左サイドバーにかぶって、２つ目以降の写真は記事中にありましたが、そこからブラウザの幅を広げると２つ目以降の写真も左サイドバーにずれました（WindowsIE)。

.blog の width を auto にしてみてください。
こちらのテストではこれで正常な位置に表示されました。

222. Posted by がく＠うつログ。   2005年05月01日 03:31

こんばんは、がく＠うつログ。です。
CSSの,blogwidth を auto にしてみました！
これでIEから普通に見えるのですね！

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

どこかでWindowsから見てみますね

223. Posted by がく＠うつログ。   2005年05月01日 04:48

おはようございます。

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

これはどうにかなるのでしょうか？
それとも、サイドバー画像を変えるしかないのでしょうか。。。

224. Posted by junike   2005年05月01日 09:48

>がく＠うつログ。さん
ご推察のとおりですが、変えるというよりは消してしまってもいいんじゃないかと思います。
BODY の BACKGROUND のうしろにある　url(〜)　の部分を削除して、#ffffffだけにしてみてください。背景（左右の縦の線）が消えます。
どうしても真ん中の記事とサイドバーの間に線を入れたいのであれば
#content に
　border-left: 1px solid Gray;
　border-right: 1px solid Gray;
など入れれば入ります（色は任意で）。
　PADDING-RIGHT: 10px;
　PADDING-LEFT: 10px;
も入れれば記事と線の間が少し開きます。

225. Posted by がく＠うつログ。   2005年05月01日 18:41

ありがとうございます！
線は消えました！！

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

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

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

がく＠うつログ。

226. Posted by junike   2005年05月01日 22:50

「IDがない」のIDはCSS内でいうと#countainer などの　#　で始まっているもののことなので、
それのどこかの「｝」などの閉じカッコを誤って消してしまったとかそういうのはありませんか？
あるいは、BODYの
　BACKGROUND: #ffffff;
の最後にある「;」が抜けていたとか。
その辺を確認してみてください。

227. Posted by がく＠うつログ。   2005年05月05日 22:50

お世話になっております。
確認してみました。
しかし、問題はないようです。

いちばんの問題が、http://mthome.livedoor.biz/の、線かぶりなのですが
＞BODY の BACKGROUND のうしろにある　url(〜)　の部分を削除して、#ffffffだけにしてみてください。背景（左右の縦の線）が消えます
すると、確かに線が消えるのですが、IEでは背景が真っ青になってしまいます。
これはなぜでしょうか？

228. Posted by junike   2005年05月06日 09:02

>がく＠うつログ。さん
いま現在WindowsのIEで見てみると線が消えていて背景も真っ白です。

ただ、まだ　BACKGROUND: #ffffff;
の最後にある「;」が抜けています。
これが抜けていて正常に見えるのもおかしいのですが、それをつけてみてください。
CSSの　{　}　で閉じた中身の行ごと（スタイルの要素ごと）の区切りには「；」をつけます。閉じる　}　の直前の最後の要素のみ「；」がなくても大丈夫です。
それでもまだ真っ青になってしまうとしたらわかりません。（WinIEですよね？）

229. Posted by junike   2005年05月06日 10:13

>トラックバックをいただいた「インターネットだけで年収800万円超!!」さん
個別ページになるとサイドバーが記事にかぶってます。
このコメントを書き込もうとしても書き込みのボタンがサイドバーと重なって押せないので、見てるかわかりませんがこちらに書きます。

HTML編集の個別記事で
＜div id="links">　を入れる位置を間違っている可能性があります。　

230. Posted by sakuya   2005年05月10日 11:39

junike様

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

そこで…こんな事をお訊きするのは心苦しいのですが、一つどうしても分からない事があります。
今回、個別記事やカテゴリ別など、全てが3カラムになってしまいましたが、
「トップページだけを3カラムにして、個別記事やカテゴリ別・月別などは2カラムにする」のにはどうしたら良いのでしょうか？
何らかの方法をご存知でしたら、ご教授頂けると幸いです。

231. Posted by junike   2005年05月10日 21:19

>sakuyaさん
それはできなくはないですがかなり面倒です。
そもそもプラグインの中にJavascriptにしろフリーメモにしろ「links2」を入れるやり方ではムリです。
個別記事にサイドバーを出そうとするときに
<script language="JavaScript" src="<$BlogUrl$>plugin.js"></script>
↑こんなようなのを入れたと思いますが、そのplugin.jsは最初のプラグインから最後のプラグインまでを１くくりにして扱われているのでその中にlinks2を入れている限り左右に分割されます。（続きはつぎのコメントへ）

232. Posted by junike   2005年05月10日 21:20

（前のコメントの続き）
プラグイン内で分割せずに、自分で右サイドバーに相当するコンテンツを用意してそれを表示するようなタグを個別記事のHTML編集内に記入すればできます。
自分で用意しなければならないので「トラックバック」や「最新記事」などプラグインでしか出せないようなものは右サイドバー相当場所には出せません。バナーなどに限定されるでしょう。
言ってることが難しいかもしれないので、簡単ではないと思っていいと思います。

233. Posted by sakuya   2005年05月11日 01:02

お忙しい中、丁寧な返答を頂きましてありがとうございます。
やっぱり難しいのですね…。
プラグインを全て表示させるようにしている、という所までは理解出来ていましたので
多分かなり難しい事をやりたがっているのだろうなとは思っていました。
とはいっても、その後どうしたら良いのかが分かりませんでしたので、こちらで質問をさせて頂いたのですが…。

しかしせっかく出来た3カラムを崩すのも惜しいですし、やはりこれからも全て3カラムのままでいくことにします。
junike様、本当に色々とありがとうございました。
これからも参考にさせて頂きたいと思います。

234. Posted by LaLaLa   2005年05月11日 13:01

こんにちは。はじめまして。

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

blog中で紹介させていただきました。
本当にありがとうございました。

235. Posted by junike   2005年05月11日 20:39

>sakuyaさん
右サイドバー分がまったく表示されないで左サイドバーだけになるのでよければ１つ思いつきました。
現在の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ロゴなども消えてしまうのでそれのタグも個別記事の方に追記すれば出ます。再構築を忘れずに。
参考までに。

236. Posted by 山ちゃん   2005年05月12日 13:13

はじめまして、こんにちは。

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

ありがとございました。

237. Posted by junike   2005年05月14日 00:08

>sakuyaさん
もはや見に来てないかもしれませんが、個別記事などだけ２カラム化する方法として
「３カラムと２カラムの併用そのほか」
http://trialblog.livedoor.biz/archives/15994634.html
という記事を見つけました。
なるほどcontentをもう１つ用意するのね。

238. Posted by 四季   2005年05月14日 01:03

これ以上コメントのせられるのかしら？と不安になるぐらいのコメント数ですが、お礼がいいたくてレスしますね。ＴＢもさせていただきました。ありがとうございました！
ただ、スクロールバーはすることができませんでした。
ライブドアプロにしなくてはだめなのでしょうかＴＴ
いろいろ他のサイトを参考にしたりしたのですが、やはりできませんでした。残念です。
けれどほんとうに3カラムは簡単にできました。
多謝です！

239. Posted by junike   2005年05月14日 11:25

>四季さん
スクロールバーはたとえばCSSに

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

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

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

とすればできると思います。heightで高さを調節してください。
最後にトップページを再構築します。
ただし、トラックバックとか最新コメントなどのプラグインはできません。

240. Posted by dias51   2005年05月15日 12:22

少々遅くなりましたが、
こちらを参考にして３カラム化させて頂きました。
5/8の記事で紹介させて頂いております。

ところで、最新(5/15)の個別記事の写真が表示できたり、できなかったりするのですが（できないことの方が多いです）、
心あたりがありましたらお教え下さい。
（昨日以前の記事に関しては問題ないです。）

241. Posted by junike   2005年05月15日 14:00

>dias51さん

DIV.main IMG{
position: relative;
z-index: 1;
}
もきちんと入れているようですので、どうして表示されたりされなかったりというのはわかりません。
IEではブラウザの幅をちょこっと変えると再び表示されるようになるので表示されなかったときにそれをやると表示されるかもしれません。IEの問題でしょうか？
どのみちわからないので申し訳ないです。

242. Posted by dias51   2005年05月15日 14:25

いえ、こちらこそお調べ頂いてありがとうございます。

IEかLivedoorが原因かなと思います。
今日の記事だけ表示されないというのは気になりますが、
次回写真をUPするときまでこのままにします。

243. Posted by ひまわり   2005年05月15日 14:39

こんにちは。初めまして。
モダチョキさんのところから参りました。
説明に画像が使われていて、初心者の私にも3カラムにすることが出来ました。
また、みなさんのコメントもとても参考になりました。
どうもありがとうございました。

244. Posted by 四季   2005年05月15日 17:36

先日は丁寧なお返事ありがとうございました。
ところで
.scrollbar{
overflow:auto;
height:350px;
}
なのですが、コメントを書く前に何度かチャレンジしたのですが、
ＣＳＳのどのあたりに追加したらよいかわからないのです。
適当に追加してもだめだったし・・・
超初心者で申し訳ありません。もしこのコメント見ることがありましたらレスしていただけたらとおもいます。

245. Posted by わんわんぱぐ   2005年05月15日 18:20

はじめまして。
どなたかご存知でしたら教えて頂きたいのですが、
個別記事の3カラム化に挑戦したところ、
１つの記事だけ、表示がくずれてしまうのです。

その他にも、Google AdSenseが表示されたり
されなかったりするのです。

こういう症状の解決方法はあるのでしょうか？
どうぞ宜しくご指導下さいませ。

246. Posted by junike   2005年05月15日 19:50

>四季さん
CSSの区切りのいいところならどこでもいいのですが、わからなかったらいちばん最後の最後に追加する形でも大丈夫です。
CSSにそれを追加したらそれだけじゃだめですよ。そちらにコメントしたとおり
フリーメモプラグインを使って
<div class="scrollbar">
〜スクロールさせたいもののタグ〜
</div>
を入れて追加し、トップページを再構築してください。heightはその高さを超えたらスクロールバーが出るというものなので、スクロールさせたい中身がその高さを超えないとスクロールバーは出ませんから（そちらのBlogPeopleであればまだ高さが短いのでこれをやってもheightの高さを超えるまではバーは出ません）。

247. Posted by junike   2005年05月15日 19:54

>わんわんぱぐさん
特定の個別記事だけがサイドバーがずれるなどという現象は初めて見ました。
同じCSSを適用しているのでこのようなことは起きないはず。
どうしてこうなったのかはさっぱりわかりません。
その記事の本文を何か１文字くらい修正して保存し、再構築しなおしてみるくらしか思いつきません。その際他の記事にはない独特なタグとかがあったらそれは除いてみるとか。

248. Posted by わんわんぱぐ   2005年05月15日 22:21

junikeさん

早速のお返事ありがとうございます。
やはり、起きない筈の現象なのですね・・・

その記事は、本文をちょっと手直しして
再構築しましたが、全く変化がありませんでした。

独特なタグについては・・・入れていない
つもりですが・・・何しろ、素人なので入れたくても
入れられないのが、本音です（＾−＾；

今ふと気付いたのは、その記事と他の記事の違いは
その記事にだけ、トラックバックとコメントの
両方が入っているという事です。

これが影響しているのでしょうか？
質問ばかりして、ごめんなさいです。

249. Posted by junike   2005年05月15日 22:44

>わんわんぱぐさん
HTMLソースの方を見て、原因がわかりました。
HTML編集の個別記事の画面で
a class="amenu" href="<$NextArticle$>">次の記事</a></IfNextArticle></div></div>
のうしろに

<DIV id=links>
<SCRIPT language=JavaScript src=""></SCRIPT>
</DIV>

を入れていませんか？
個別記事にもサイドバーを出すときに
<script language="JavaScript" src="<$BlogUrl$>plugin.js"></script>
↑こんなようなのを追加したと思いますが、この中にlinksは含まれているので上の記述があるとlinksが２つあってダブっていることになってます。
「次の記事」のすぐうしろにあるlinksを削除してみてください。

250. Posted by junike   2005年05月15日 22:48

>わんわんぱぐさんへ--続き--
うまく表示されている個別ページでもlinksがダブっているのを確認しましたが、なぜそちらはうまく表示されて問題となっているページだけがずれているのかは謎です。
トラックバックとコメントが両方入っているというのは関係ありません。

251. Posted by わんわんぱぐ   2005年05月16日 08:44

junikeさん

本当に素早い回答をありがとうございます。

早速ご指摘のあった通りに、まず次の記事のすぐ後ろの<div id =links>だけを
削除したところ、今までとは逆に全ての表示がくずれて、今までくずれていた
特定の記事のみ、正常に表示されました。

次にご指摘のあった場所の
<DIV id=links>
<SCRIPT language=JavaScript src=""></SCRIPT>
</DIV>

全部を消したところ、今までと同じようになりました・・・
つまり、特定の記事のみ表示がくずれています。
現在は、この消した状態です。

こんな謎の現象が起こるなんて、夢にも思っていなかったので
本当におどろいています。どこに聞けばよいのかもわからず
ここで質問させて頂いてますが、ご迷惑じゃありませんでしょうか？

本当にありがとうございます。m(_ _)m

252. Posted by junike   2005年05月16日 21:12

>わんわんぱぐさん
全部消すやり方で直ると思ったのですが。。
今の状態でしばらく様子を見るしかないと思います。
その記事だけおかしいですが。
謎は謎のままです。わかりません。。

253. Posted by ビーグル   2005年05月16日 23:09

この日記を参考にして、３カラム構成うまくいきました。ありがとうございました。
自分が使用しているテンプレートは、ヘッダに画像を使用しているため、微調整が必要でしたが、何度もブログの再構築を行い、ようやく成功しました。

254. Posted by わんわんぱぐ   2005年05月17日 01:51

junikeさん

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

もうしばらくこのまま放っておく事にします・・
なるようにしかなりませんからねぇ〜

本当にアドバイス、ありがとうございました。
助かりました＾−＾

255. Posted by ももんが   2005年05月17日 14:41

はじめまして！ももんがともうします。

以前から挑戦したかった３カラム，links2をつくるところまでは思いついたものの，どうやってサイドバーに表示するものを左右に振り分ければよいのか，まったく見当がつかずあきらめていました。でも，この記事のおかげでなんとか完成♪ありがとうございます！！

まだまだCSSはわからないことだらけで，完成と言っても試作品のような状態ですが，少しずつやっていきたいと思います。

これからもよろしくお願いしますね。

256. Posted by 腕立太郎   2005年05月18日 18:14

はじめまして、こちらの記事を参考にさせていただき３カラムにしておりました。ご連絡が遅くなりまして申し訳ありません。トラックバックも送らせていただきました。これからもどうぞよろしくお願いします。

257. Posted by 美美   2005年05月19日 00:33

はじめまして。
DIONのLOVELOGですが、3カラム化の参考にさせていただきました。
おかげさまで、なんとかやっとの思い出成功しました。
ありがとうございます。

258. Posted by 前田慶次郎   2005年05月19日 14:26

3カラム化の参考にさせていただきました。
再構築の際に、『ページ全体』と指定できることを知らなくて30分ほど悩みましたが、つい先ほど、なんとか3カラム化できました。
ほんとうに、ありがとうございました。

259. Posted by や   2005年05月21日 00:55

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

260. Posted by がく＠うつログ。   2005年05月21日 19:23

こんばんは。その節は大変お世話になりました。
ご報告が遅れましたが、お陰様で
http://mthome.livedoor.biz/
は写真も、線も順調です☆

そこで恐縮ですが、もうひとつお聞きしたい事が。。。

http://mthome.livedoor.biz/の左肩にバナーとテキストリンクをつけたのですが、
どうやらWindows IEからは改行がかぶっているらしいのです。

いろいろ試しましたが、これはどうすればきれいにバナーとテキストリンクが
改行されるのでしょうか？

お教え下さい。
どうぞよろしくお願い致します。

261. Posted by junike   2005年05月21日 22:52

>がく＠うつログさん
バナーのimgタグのうしろの

</a><br />

の部分を

</a><br clear="left" />

としてみたらどうでしょう？　あるいは単純にもう一つ <br /> を追加してみるとか。

262. Posted by koretou   2005年05月22日 18:34

はじめまして、junikeさん。
３カラムしたくて記事を参考にさせていただきました。
大変助かりました。ありがとうございます。
結果、ひとつだけ問題が解決できなくていろいろやってみたのですが、
どうしてもだめでご相談したいのですが、
タイトルが左に寄ってしまい、どうしても中央にきません。
どうしたらうまくいくでしょうか。どうかお教え下さい。
よろしくおねがいします。

263. Posted by 永芽瀬島   2005年05月22日 18:55

　こちらの記事を参考にして、ＴＯＰページの３カラム化に成功しました。
ありがとうございました。

　ただ、なぜか「続きを読む」の先（記事画面）のデザインが若干変になるのですが（テンプレート
との相性でしょうか？）、この辺は暇を見つけて試しながら直すしか…。

264. Posted by junike   2005年05月22日 22:49

>koretouさん

Blogタイトルを中央に寄せるには

.blogtitle に　TEXT-ALIGN: center; を追加すれば中央になります。
説明書きの部分が左に残っているのでそれもセンターにしたい場合は
.description にも同様にします。

>永芽瀬島さん
具体的にどう変になるのかわかりませんが、日付のところの色がトップページと違って抜けているようなので、それは
.date　に　
　Z-INDEX: 1;POSITION: relative;
を追加すれば出ます。

265. Posted by koretou   2005年05月23日 13:15

junikeさん、ありがとうございます。
私の書き方が間違ってました；；

タイトルではなくタイトル部全体（背景含む）を常にブログの上部中央にするにはどうしたらいいのでしょう。
ブラウザのお気に入り等表示中は目立たないのですが、画面全体表示にするとタイトル部が極端に左に寄っていて不格好になってしまっていて困っています。
わかりにくい文章しか書けなくて申し訳ありません。
どうかお教え下さい。よろしくお願いいたします。

266. Posted by psychex   2005年05月23日 20:17

こちらの記事を参考にさせていただき、CSSやHTMLについてはまったく無知な自分でもTopページ、個別・カテゴリ別ページなどの３カラム化にどうにか成功することができました。本当に感謝しております。

唯一、どうしても解決できない問題があるのですが、こちらに記載されているとおりにCSSを変更したものの、中央のカラム幅がなぜか可変にならず、ウィンドウを小さくすると両サイドバーの下に中央カラムが潜り込むような形になってしまい、大変困っています。

元のスタイルシートはmoon、使用しているOSはMac OS X 10.4、ブラウザはSafariです。
もし原因がわかりましたらぜひ教えていただけますでしょうか。よろしくお願いします。

267. Posted by junike   2005年05月23日 20:48

>koretouさん
まず、#bannerと#subbannerの width を auto にします。
これで背景の絵の部分が常に中央になります。それだけだとBlogタイトルと説明がおいてけぼりになるのでそれも常に絵についていくようにします。
.blogtitle と .description に　text-align: center;　と
PADDING-RIGHT: 500px;　くらいにしてみてください。
もう少し左にしたければ500の数値を大きくします。
これでイメージのとおりになるかと思います。

>psychexさん
もうしばらくお待ちください。

268. Posted by junike   2005年05月23日 22:51

>psychexさん
moonにはなぜかHTML編集の画面の方にcontentがないようです。
HTML編集でトップページで
　<div id="content">
　<div class="blog">
のように"blog"の前に上記のように入れて、
</div>
<div id="links">
のように"links"の前に閉じるdivタグを追加します。
そして.blogを
　.blog {
　　PADDING:0px; TEXT-ALIGN: center
　}
とすれば真ん中が可変でブラウザの幅を狭くしてもサイドバーがかぶることはないでしょう。

269. Posted by psychex   2005年05月24日 00:13

うわああああああ直りましたー!!

すごいですー感激ですー。ほんとに嬉しい。
しかもほんの数時間で・・・。もう、感謝しきれないくらい感謝致します。
本当にどうもありがとうございました。

しかしlivedoor Blogってこんなにカスタマイズ大変だったとは。
参りました。もうこれで二度とCSSとHTMLには手つけずに済みそうです・・・。

270. Posted by koretou   2005年05月24日 01:37

junikeさん、本当に感謝します。
そのためにも本当に早く希望通りになって欲しいです・・・
でも、だめみたいですorz
あきらめたほうがいいかもですね；；

271. Posted by sakuya   2005年05月24日 10:04

junike様、何度もアドバイスを頂いておきながら気付くのがすっかり遅くなってしまい申し訳ございませんでした（焦）
最初の質問にお答えを頂いて、もうこれは自分には無理なカスタマイズだと諦めてしまっていたので
その後こちらにお伺いしておりませんでした…。
当方のブログにもわざわざコメントで教えて頂いたのにも関わらず、今さっき気付きました…。
色々と不義理な事を仕出かしてしまい、本当に申し訳ありませんでした。

こちらのコメントで後からお教え頂いたブログも参考に、これから頑張ってみようかとも思っております。
なにぶんまだ一読しただけで内容が理解出来ていない状態ですので、出来るか出来ないかも分かりませんが、何とか頑張ってみます。
本当に色々と申し訳ありませんでした。ありがとうございます。

272. Posted by junike   2005年05月24日 20:17

>psychexさん
直ってよかったです。まさかcontentのないテンプレートがあるなんて思いもよらなかったので、そういうのがあるとわかっただけでも収穫です。

>koretouさん
一部日本語がおかしかったです。
----修正部分----
.blogtitle と .description の両方に　text-align: center;　を追加して、
どちらも　PADDING-RIGHT　は 500px　くらいにしてみてください。
----ここまで----
どうですかねぇ。難しいですか？

>sakuyaさん
いえいえ、そこまで恐縮なさらなくてもいいですよ。

273. Posted by koretou   2005年05月24日 22:11

#banner,#subbanner{
position: relative;
width: auto;
height:209px;
text-align: left;
background:url
これでやってみているのですが、タイトル背景が中央になりません；；
申し訳ないです；；

274. Posted by junike   2005年05月24日 22:42

>koretouさん
ごめんなさい。書き忘れがありました。

#banner,#subbanner {
BACKGROUND: url(http〜main.jpg) no-repeat center;
WIDTH: auto;
POSITION: relative;
HEIGHT: 209px;
TEXT-ALIGN: left;
}
でした。urlの後ろに center をつけてください。
悩ませてしまって申し訳ないです。。

そして、.blogtitle と .description の両方に　text-align: center;　を追加して、
どちらも　PADDING-RIGHT　は 500px　くらいにしてみてください。
これでどうでしょう？

275. Posted by koretou   2005年05月24日 23:40

junikeさん、ついに成功しました！！
ご面倒をおかけして大変申し訳ありませんでした。
懇切丁寧にお教えくださいまして本当に感謝します。
ありがとうございました＾＾

276. Posted by もんちゃっく   2005年05月26日 00:46

すみません・・
サーバーが重かったようで、エラーがでていたのですが、
きちんと更新されていたようで・・
失敗してトラックバックを３回入れてしまいました。
削除してください。
申し訳ありません。

277. Posted by 李雹   2005年05月28日 17:13

はじめまして。
コピペしたりして、書いてある通りにしたと思うのですが、真ん中の記事の部分と左の部分が重なります。
どうすればいいと思いますか？

278. Posted by junike   2005年05月28日 18:02

>李雹さん
#content の margin-left に数値が入っていればその分の空間ができてそこに左サイドバーが入るわけなんですがだめですか？
それでだめなら #content ではなく .blogに margin-left を入れて数値も入れてみたらどうなりますか。これだと個別ページでも左側に空間ができてしまいますが。

279. Posted by 李雹   2005年05月28日 20:00

もう一度して見ると上手くやれたのですが、両サイドが、少し上にあがっています。どうすれば？

280. Posted by 李雹   2005年05月28日 20:13

できました〜！少しバランスが悪いですが……
ありがとうございました。
一度確認してみてください。

281. Posted by junike   2005年05月28日 23:41

>李雹さん
linksが２つあります。下の方にあるlinksを削除してみて大丈夫なようならその方がいいと思います。
links2 の top が links の top と同じ数値なのに、右サイドバーの方が若干高い位置にあるのは変ですね。links2 の top の数値をもう少し微妙に大きくすると揃うかもしれません。対症療法的ですけど。

282. Posted by 永芽瀬島   2005年05月29日 22:37

＞junikeさん
　フォローありがとうございました（変な部分は、指摘通りです）。
おかげで、個別ページでも日付の色が出るようになりましたよ〜。

283. Posted by 李雹   2005年05月30日 22:07

度々で申し訳ありませんが、真ん中のカラムを少し左にしたい時はどこを書き換えればいいのですか？

284. Posted by 李雹   2005年05月30日 22:30

↑の解決しました！すいません＆ありがとうございました！

285. Posted by 鶺鴒   2005年06月03日 23:02

今３カラムに挑戦中なのですが、トラブルしまくっています；；

いちお両方にサイドバーがあるのですが、タイトルの画像（？）に両方のサイドバーが重なってしまったり、ウインドウのサイズによって記事の部分（幅？）が縮んだりしています。色々とやったのですが全く治らず・・・；；

linkとlink2のtop:pxの数字を変えたりしてタイトルに重ならないようにしようとしているのですがいくら変えても全く変化がないのですが、何故でしょうか？？
あと、ウインドウのサイズを変えても記事の部分などが分からないようにするにはどうすればいいのでしょうか？

286. Posted by 鶺鴒   2005年06月04日 00:22

すいません今見てみたら上記のようにはなってませんでした＾＾；
　
変わりに左右のサイドバーと真ん中の記事がスゴいことに＆背景の色が途中で切れている・・・orz　これらを直すにはどうすればいいのでしょうか？？？

287. Posted by junike   2005年06月04日 11:18

>鶺鴒さん
content と links,links2 を以下のようにしてみてください。

#content{
position:relative;
MARGIN: 0px 120px 0px 180px;
line-height: 140%;
padding: 0px 20px 50px 20px;
}

#links {
POSITION: absolute;
LEFT: 0px;
MARGIN: 0px 0px 0px 20px;
padding: 0px 0px 0px 0px;
WIDTH: 205px;
TOP: 160px;
TEXT-ALIGN: center;
}
#links2 {
POSITION: absolute;
left: 600px;
MARGIN: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
WIDTH: 205px;
PADDING-TOP: 0px;
TOP: 160px;
TEXT-ALIGN: center;
}
ついでにタイトル部の画像が左はしに寄っているので
#banner と #subbanner に margin-left: 30px;　と入れると少し右に動きます。

288. Posted by junike   2005年06月04日 11:20

>鶺鴒さん
追記です。
１つ目の記事のみ広告が入っていますが、それだけ右サイドバーにかぶってしまうのは、
ブログ全体の幅を750pxと固定しているため仕方ないです。

289. Posted by 鶺鴒   2005年06月04日 15:25

＞junikeさん
　ありがとうございますm(__)m
　おかげさまで、記事が右のサイドバーに重なるのは治りました☆♪

　あと、ウインドウのサイズによって、「タイトルの画像」「ブログの背景」「記事」が切れたり幅が狭くなったりするのですが、これを直すことは出来ないのでしょうか？
（ウインドウのサイズが変わってもブログ自体の表示は変わらないようにしたいのですが…）

290. Posted by junike   2005年06月04日 18:45

>鶺鴒さん
ブログの背景が切れるのは content にある BACKGROUND-IMAGE:〜 を
BODY 内に持ってきて
　BACKGROUND-IMAGE: url(/_img/20040723/main_back.gif);
　BACKGROUND-REPEAT: repeat;
とします。元々 BODY にある flower_message から持ってきた背景と置き換えます。
BODY の範囲よりも content の範囲の方が小さいので、content 内の画像を repeat しても途中で終わってしまうように見えます。BODY の背景として repeat すれば途中で切れないと思いますが、こうすると flower_message の枠の絵がなくなります。どっちを取るかです。
（続きは次のコメント）

291. Posted by junike   2005年06月04日 18:45

（前からの続き）
また記事本文がブラウザの幅によって変わってしまうのは countainer の width を auto にしているのでブラウザの右端から content の右側の margin が効いてくるからです。 countainer の width を width: 850px; と固定にすれば記事の幅も固定されます。
そして links2 を left: 650px;　とすれば全体の幅が固定で１つ目の記事の広告の幅も入ります。

292. Posted by ipo_investor   2005年06月04日 19:10

すごく参考になりました。
初心者な私でも出来ましたーー。まだちょっと手直しをしなくては
ならない所もあるので、他の記事も参考にして直したいと思います。

293. Posted by 鶺鴒   2005年06月04日 20:31

＞junikeさん
　ありがとうございます☆やっと理想のブログになった感じです♪ヽ(*⌒∀⌒*)ノ♪

　えっと・・・なんか質問攻めしちゃっていますが（汗）
　記事の３文字ぐらいが右のサイドバーに重なって見えないんです。。
　link2のleftやcountainer のwidthなどをいじってみても何も変化がないので・・・（やり方が間違っているのかもしれないけど…）
　この場合どのタグ（？）を変えれば直るのですか？

294. Posted by junike   2005年06月04日 22:59

>鶺鴒さん
#content の
　MARGIN: 0px 120px 0px 180px;
を
　MARGIN: 0px 150px 0px 180px;
とか２番目の数値を120pxより大きい方に調整してみてください。
１回目の回答のときと、２回目の回答のときとでは条件が違ってたので
content の内容が１回目の回答のときのままでした。

295. Posted by 鶺鴒   2005年06月04日 23:20

＞junikeさん
　おかげさまですべて解決しました♪
　色々と質問攻めしてご面倒をおかけしてしまい申し訳ありませんでした＾＾；

　本当に感謝しております☆ありがとうございましたm(__)m

296. Posted by 美優   2005年06月07日 21:26

始めまして！
参考にさせていただき、なんとか左右に表示させることができました！
ありがとうございます♪

でも、左バーの中で、文字が左に寄りすぎていて、よくわかりません。


あと、ブログの上部のバナーのタイトルだけでなく、バナーごと、中央に寄せたいんですが、どうしたらいいでしょうか？

バナーの写真を、自分で変えることってできますか？

もし、お時間ありましたら、教えていただけますか？

唐突に、質問ばかりで、申し訳ありません。

よろしくお願い致します。

297. Posted by junike   2005年06月07日 23:32

>美優さん
左バーをもう少し右にするなら links の left:0px; を left:5px;
とか 10px とかにすればいいと思います。
上部の画像を中央に寄せるには↓の記事を参考にやってみてください。
http://junike.livedoor.biz/archives/23709479.html

298. Posted by 美優   2005年06月08日 11:47

迅速なお返事、ありがとうございます！
感激しました(;_;)

左バーは、右に少し寄せることができました。
ありがとうございます♪

上部の画像を中央に寄せる記事を参考にさせていただいたんですが、
どうしても、タイトル文字だけ画像の真ん中にきて、
画像そのものは、左に位置したままで、中央によりません。

また、上部の画像を、自分の好きなものに、変えたいんですけど、
上部の画像をタイトルなどを、自分でデザインする方法って、
ありますか？

度々、申し訳ありません<m(__)m>
よろしくお願い致します。

299. Posted by 美優   2005年06月08日 14:30

先ほど、投稿しました上部のバナーデザインですが
なんとか、どうにか自分でできました。

しかし、ハチャメチャで上手にはできませんでしたが(^_^.)

画像をセンターにすることは、未だにできてません。

取り急ぎ、デザインは一応できたことを、ご報告させていただきました。

300. Posted by りかうす   2005年06月08日 14:30

はじめまして。
最近ブログを立ち上げたばかりなのですが、３カラム化とカラーの変更に挑戦してみました。非常に解りやすく解説されており短時間で実現できました。お世話になりました〜〜！！

301. Posted by junike   2005年06月08日 20:11

>美優さん
画像を中央にもってくるには #banner と #subbanner で
　BACKGROUND: url(http://〜〜.JPG) no-repeat center;
のように no-repeat のうしろに center を入れてください。
ブログタイトルと説明は
.blogtitle {
PADDING-RIGHT: 420px;
PADDING-LEFT: 75px;
FONT-WEIGHT: bold;
FONT-SIZE: x-small;
PADDING-TOP: 13px;
text-align: center;
}
.description {
PADDING-RIGHT: 350px;
PADDING-LEFT: 105px;
FONT-SIZE: xx-small;
COLOR: #ffcccc;
PADDING-TOP: 5px;
text-align: center;
}
としてみてください。PADDING の RIGHT と LEFT で調整します。
しかし、説明の方は複数行にわたるばあい全部の行が中央になってしまいます。同じくらいの行の幅にするといいでしょう。
text-align を center から left にすると今度は左はしにおいてけぼりになってしまいます。

302. Posted by 美優   2005年06月08日 20:58

こんばんは！

早速のお返事、本当にありがとうございます。
また感激しております(;_;)

こんな私のために、何度も教えていただき、ありがとうございます！

おかげさまで、画像を中央にすることが、できました（*^_^*）

本当に、助かりました。

画像タイトルを中央にしたのは、いいけれど、
今度は、ブログ全体のバランスが気になってきて、
もう少し、全体的に、中央に寄せなくてはと思ってます。

また、お世話になるかと思いますが、
どうぞ、よろしくお願い致します。

ありがとうございました<m(__)m>

303. Posted by italiaオヤジ   2005年06月11日 08:03

ブログを2カラムから3カラムに変える方法を検索してたどり着きました。
LOVELOGと共通しているみたいで、早速試したところ出来ました。
2〜3時間かかりましたが、満足しています。
とても参考になるページでした。ありがとうございました。

http://blogs.dion.ne.jp/italian_zakka/

304. Posted by 株さん   2005年06月11日 16:39

いつも拝見しております。いろいろなブログを見ながら</div></div><div id="links2"><div>方式で、defaultのデザインで、3カラムのカスタマイズを試しているのですが、いつも同じような崩れ方をします。下の通りです。

設定
http://kabusan.livedoor.biz/custom/3-1.gif

崩れ具合
http://kabusan.livedoor.biz/custom/3-2.gif

トップページ
http://kabusan.livedoor.biz/custom/index.html

CSSのソース
http://kabusan.livedoor.biz/custom/source.txt

長文で大変申し訳ないのですが次にコメントに続きます。

305. Posted by 株さん   2005年06月11日 16:40

右側カラムに移動すべきプラグインが”左側カラムのすぐ右側に、狭い間隔で”表示されるのです…一度デザインを初期状態に再構築して、再度カスタマイズを試してたりしているですが、どうしても上手くカスタマイズできません。

トップページ広告バナーは全部クリックするなど、ささやかなご協力はさせてもらったつもりです。教えて君で大変恐縮ですが、対策をご教授していただけないでしょうか。よろしくお願い申し上げます。

306. Posted by junike   2005年06月11日 17:10

>株さん
「トップページ」は「崩れ具合」のようにおかしい状態になっていますが、「CSSのソース　source.txt」が実際のソースと違ってますね。
現状のおかしく崩れているCSSには countainer がまったくありませんし、 content,links もおそらくデフォルトのままで何も変更されておらず、links2 もありません。
ためしにローカルに落としてそれらを入れて試して見ましたらきちんとできましたのでそのへんをご確認ください。

307. Posted by 株さん   2005年06月12日 10:11

ご返答ありがとうございます。ご指摘のとおりcontainer,content,link,links2を追加しました。しかし前回と同じように”右側カラムのすぐ左側上に狭く崩れる”現象になります。再度恐縮ですがご教授いただければ幸いです。よろしくお願い申し上げます。

プラグインの上から2番目にamazonのソースを設置した場合
http://kabusan.livedoor.biz/custom/index2.html

プラグイン</div></div><div id="links2"><div>の下にamazonを設置した場合
http://kabusan.livedoor.biz/custom/index3.html

CSSのソース
http://kabusan.livedoor.biz/custom/source2.txt

308. Posted by junike   2005年06月12日 12:33

>株さん
上の２つの例をローカルにダウンロードして見ましたがどちらもCSSがデフォルトのままのようで、CSSのソースとは違っています。リンクを貼ったCSSのソースには問題なさそうなのでこれが適用されていればCSS自体は問題ないと思います。
おそらくフリーメモプラグインを使ったところのうちのどこかで閉じるDIVタグを忘れている箇所はありませんか？
また、index2.htmlの方はamazonのプラグインを囲む枠が二重になっています。
<DIV class=side>　が２つ続いていました。これは通常自分では入れないのですが、こういうのがフリーメモプラグインのタグの中に入っていないかなど、確認してみてください。

309. Posted by spalog   2005年06月19日 22:31

何気にブログ関係でネトサフィンしてましたら、ナント！あきらめていた３カラムが！！！できる！？！？！
つい嬉しくないカナリ夢中になってやりましたｗ
本当にありがとうございました！！

310. Posted by たなかさん   2005年06月21日 22:42

すみません3カラム記事よんだんですが
どうしても設定がうまくいきません。
ttp://mado.livedoor.biz/
上にあったここと同じ様にしたいです。
おねがいします。

311. Posted by junike   2005年06月22日 19:54

>たなかさん

#content の
padding: 0px 10px
のうしろに　;　（セミコロン）がありません。
padding: 0px 10px;
としてみてください。

312. Posted by たなかさん   2005年06月22日 22:44

はじめまして junike さん
ＵＲＬだけでＣＳＳ伝わるかどうか心配でしたけど伝わったみたいでうれしいです。
さっそく問題箇所を訂正してみました。
他の所もいじってしまいましたがなんとか完成に近づいてるみたいです。
ありがとうございました。(TдT) ｱﾘｶﾞﾄｳ

313. Posted by たなかさん   2005年06月24日 01:10

すみませんjunike さん
やっぱりどう設定したら固定して右のサイドバーがいっしょに
ずれるのかわかりません。
教えてください。おねがいします。

314. Posted by junike   2005年06月25日 10:44

>たなかさん
「固定して右のサイドバーがいっしょにずれる」の意味がわかりません。
いま現在見てみるとブラウザの幅を広げると右サイドバーもいっしょに
ブラウザの右はしにくっついて右にずれて、真ん中の記事の部分が
広がっています。記事の背景が横にリピートしていますが
それを自然に見せたいということなのか、別のことなのかよくわかりません。

315. Posted by hina   2005年06月29日 02:17

はじめまして、hinaと申します。３カラムにしたくてこちらのページの方法で
やっていました。一応３カラムに出来たのですが、困っていることが
あります。た、助けてください。

・ブログのタイトルと説明文はこちらのコメントを参考に中央に出来ました。でもどうしても背景が左に寄ってしまっています。

・ウィンドウの幅を狭くすると右のサイドバーが中央の記事の文章をずらして
しまいます。タイトル、説明文もずれてしまいます。ウィンドウをかなり狭く
すると右のサイドバーが左のサイドバーに潜ってしまいます。

・左のサイドバーが背景に、右のサイドバーが説明文に重なってしまいます。
あと、サイドバーの、例えば｢プロフ｣のタイトルの幅と内容の幅がおかしく
なってしまっています。

初心者な質問でお手数だとは存じますがアドバイスの方を頂けると幸いです。よろしくお願いします。

316. Posted by hina   2005年06月29日 04:59

たびたびすいません。
背景とサイドバーが説明文に重なるトラブルは
なんとか解決しました。

317. Posted by hina   2005年06月29日 06:05

ほんとすいません。大体解決しました。
あと気になるの問題が、ウィンドウを動かすと
右のサイドバーと背景だけ動いてなんだか不自然なのと
説明文がウィンドウの幅によって行が短くなったりすることです。

四苦八苦してます。

318. Posted by junike   2005年06月30日 00:29

>hinaさん
ウィンドウを動かしても真ん中の記事の幅は固定化して（いまもそうなってる）
右サイドバーも固定してある状態がいいということですか？（いまは右サイドバーだけ右に動く）

説明文がウィンドウの幅によって行が短くなるのはしかたないような気もします。
今日は遅いので明日の夜に回答します。

319. Posted by hina   2005年06月30日 00:41

はい。固定したいです。あと、背景も固定したいです…。
本当に時間を割いてお返事いただきありがとうございます。


明日の夜のお返事待ってます。

320. Posted by junike   2005年06月30日 20:17

>hinaさん
linksとlinks2が左右逆なのですが、あえてそのままとします。
それから #content が作業の途中で消したのか元々なかったのかわかりませんがないので、本来 #content でやるべきことを　.blog　で代替します。
その前提で変更点だけ書きます。

#container で
　WIDTH: 930px;
として、
#links で
　RIGHT: 5px;
#links2 で
　LEFT: 5px;

.blogは丸ごと書くと
.blog {
　WIDTH: 500px;
　MARGIN: 0px 210px 0px 210px;
}
とします。
#content の代わりに .blog を使ったので、個別記事の左右がスペースがあきます（変更前の現時点でもそうなってますが）。
これで大丈夫かと思います。

321. Posted by junike   2005年06月30日 20:28

>hinaさん
補足です。大事なことを書き忘れました。
contentがないというのは、HTML編集の方に本来あるはずのものがないという意味です。
CSSの方には #content はありましたが、上記の修正をしたら

#content{
〜
}

の行は削除してください。（残ってるとおかしくなる）

322. Posted by hina   2005年06月30日 21:50

わー！！！できました！！！本当にありがとうございます！！！
.blogのwidthはちょっと微調整しちゃいましたが、丁寧に教えて
いただいて感謝、感謝です！！このブログに出会えてほんとに
よかったです！！！

近々僕のブログの記事でもお礼を言わせていただきます。
ありがとうございました！！

323. Posted by てぃーむ   2005年07月03日 01:12

こんにちわ♪
こちらの方法を参考に、3カラム化に挑戦してした者です。
il||li _|￣|○ il||li
なんだかものすごく重くなってしまい、表示がすごく遅いです。編集するのにも一苦労なのですが・・・どうしたらいいでしょうか・・・？
アドバイスのご教授お願いします！！！

324. Posted by junike   2005年07月03日 10:43

>てぃーむさん
表示の遅さはアクセスする時間帯とか回線の種類によると思いますがいまADSLで見た限りぱっと表示されました。
ただ、ここの記事のやり方で３カラム化すると表示が遅くなってしまうのはある程度宿命です。（多分てぃーむさんのところからここのブログのトップページを見るとかなり遅いんじゃないでしょうか）
今回のリニューアルで新しく提供される３カラムテンプレが出たらそれを試すといいのでは。（もっともてぃーむさんが３カラム化したときの記事のコメントに「練習」ともおっしゃってるのでそれはそれでいいと思います）
アドバイスにならなくてすみません。

325. Posted by pczanmai   2005年07月03日 17:33

　こんにちは。3カラム化するに当たり手本にさせていただきました。大変分かり易い解説で助かりました。トラックバックというものがよくわかっておらず、もし失礼なことをしておりましたらお許しください。

326. Posted by てぃーむ   2005年07月04日 01:25

なるふぉどーそう化も知れませんね！(　´∀｀)
あ！だいぶ軽くなりました♪CODY！スピリッツさんからアドバイスをもらい、色々いじってみました♪
どうもすみませんでしたーー！○rz

327. Posted by 葉   2005年07月04日 21:20

初めまして葉と申します。
３カラム参考にさせて頂きました。ありがとうございます。
このページを私のブログに紹介（リンク）させて頂けませんか？

328. Posted by kazeyomi   2005年07月05日 02:01

はじめまして、kazeyomiと申します。
３カラム化を参考にさせていただき、満足のいくブログがつくれましたのですが、本日ブログを開くとデザイン崩れていました。バナーを860pxで作製していたのでそれにあわせて３つとも固定幅、かつウィンドウのセンタ-にくるよう設定していたのですが、本日ブログを開くと右のカラムがバナーの幅より飛び出し、真ん中と左のカラムの間にスペースができています。いろいろと設定をかえてみてlink2のrightを5pxからleft680pxにするとカラム自体はうまく収まったのですが全体がセンターより左によっている状態です。いろいろと試して見ましたが八方塞がりの状態です。アドバイスいただけませんでしょうか？

現状は、とりあえず崩れた状態に戻してあります。

329. Posted by kazeyomi   2005年07月05日 02:10

連続のコメントすいません。上記の質問ですが無事解決しました。
お昼休み会社のマックからブログの投稿をおこなったのですが、もしかしたらと思い、記事を削除して再構築したところ無事表示されました。

どういう原因でそうなかったは分かりませんがお騒がせしました。

330. Posted by junike   2005年07月05日 20:44

>葉さん
リンクは自由にしてもらっていいですよ。

>kazeyomiさん
いま見ても問題なさそうなのでいいみたいですね。

331. Posted by 葉   2005年07月05日 22:12

ありがとうございます。
勝手にリンク貼ったら失礼かと思いまして(・∀・)

332. Posted by にしひさ   2005年07月10日 01:21

始めまして、にしひさといいます。３カラム参考にさせて頂きうまくいったと思います。ただ、自分のノートパソコン（ME)で見るとうまくいっている様に見えるのですが、会社のデスクトップ（XP）から見ると、左右のスクロールがある所は
中央へはみでてるし、中央の記事もおかしな改行になってます。
これは、どうすればいいのでしょうか？　初心者ですみませんがよろしくお願い
致します。

333. Posted by junike   2005年07月10日 14:35

>にしひささん
こちらから見ましたが特に問題があるようには見えません。
おかしな改行というのは、記事を書くときにその場所で自分で改行を入れているからでしょう。
たとえば「万引き」という記事で
　・・・箱や入れ物
　だけが申・・・
となっている「物」の後ろの改行をDeleteすればつながります。他もすべてそうです。ブラウザの幅を狭くするとその改行が見えておかしく見えるのでしょう。
左右のスクロールのある所というのは「お得な情報はこちらから」などのことだとすれば、幅などの指定がemなのでこれは相対的なサイズ指定ですからpxで絶対指定してしまえばいいのでは。たとえば
Div#topick {
overflow: auto;
width: 160px;
height: 100px;
border: 1px solid #cccccc;
padding: 5px;
background: #ffffff;
}

334. Posted by hiropon   2005年07月10日 23:50

はじめまして

3カラムのことが大変わかりやすくかかれていて
助かりました、有難うございました。

335. Posted by カズ   2005年07月11日 00:40

　ありがとうございます。さっそく、絶対指定にしてみました。
素早い、お返事感謝します！

このページを私のブログに貼ってもいいでしょうか？

336. Posted by junike   2005年07月11日 19:43

>カズさん
はるのはリンクのことだと思いますが、それならOKです。

>hiroponさん
お役にたったようでよかったです。

337. Posted by ウラ   2005年07月16日 12:49

はじめまして、いつも参考にさせていただいています。
このサイトを参考にして3カラム化に挑戦中なのですが、ブラウザのウインドウを小さくしたときに右カラムが記事とかぶって記事が消えてしまうのですが、どうしたら良いでしょうか・・・。ご助言よろしくお願いします。

338. Posted by junike   2005年07月16日 16:24

>ウラさん
とりあえず
#content の width: 1040px;　をもっと小さい値にしてみてください。
これでは広すぎてかぶるのも無理ないです。
（そもそもここの記事や↓で紹介してる記事ではcontentにwidthは指定しません）
これを小さくしてみてまだ不十分であれば、
http://junike.livedoor.biz/archives/17824386.html
↑こちらを参考にしてみてください（まだ見てないようなら）。
blackframeはいろいろ試行錯誤してみたのですが、全体の幅を固定しないとうまくいきませんでした。

339. Posted by ウラ   2005年07月16日 16:49

ご助言ありがとうございます。http://junike.livedoor.biz/archives/17824386.htmlを参照しましてやってみたのですがうまくいきません。
どこがおかしいのでしょうか？お手数ですがもう一度よろしくお願いします。

340. Posted by ウラ   2005年07月16日 17:38

おかげさまで何とか形になりました。本当にありがとうございました。
個別記事にもサイドバーを持ってきたいのですが、あまり上手くいきませんでした。とりあえず自分で試行錯誤してみます・・・。

341. Posted by euzak   2005年07月18日 11:46

はじめまして、euzakと申します。
貴サイトの３カラム化の手順を参考にしまして、
なんとか成功させることができました♪

ありがとうございました。
うれしくてひとまずお礼まで。

342. Posted by がく＠うつログ。   2005年07月28日 15:39

ご無沙汰しています。
過日はありがとうございました。

うつログ。http://u2blog.livedoor.biz/
ですが、３カラムが崩れてしまいました。
CSSをチェックしたのですが、私の目では何が原因なのか
わかりませんでした。。。

大変恐縮ですがアドバイスをいただければ幸いです。
どうぞ、よろしくお願い致します。

343. Posted by junike   2005年07月28日 21:40

>がく＠うつログ。さん
右サイドバーの「うつ・神経症の本」の中のそれぞれの本の下にあるおそらく書名だと思うのですが、その部分がおかしな記号の羅列になっています。
なんらかのコードが変換されずにうまく日本語になっていないのではないかと思います。
その部分を省略削除するか修正するかしてみてください。

ちなみにぼくも最近うつになり、抗うつ薬による治療を始めました。
BlogPeopleに登録しました。時々見に行こうと思います。

344. Posted by がく＠うつログ。   2005年07月29日 14:57

junikeさん、こんにちは。

直りました！！

ありがとうございますm(__)m

うつログ。には包み隠さないうつの実情を書いているので、
少しお役に立てればうれしいです。

これからもどうぞよろしくお願い申し上げます☆

345. Posted by となりのたなかさん   2005年07月30日 15:30

junikeさんこんにちは
その後いろいろためしてみたのですがやっぱりうまくいきません
位置はなんとかなってるんですが保存したときには画像が出るのですが
普通の時には画像がでません。
すみませんもう一度おねがいします。

346. Posted by junike   2005年07月30日 22:36

>となりのたなかさん
IEではかろうじて画像が（おそらくブログタイトルの部分のことだと思いますが）表示されなくなっただけのようですが、Operaで見るとまったく何も表示されずブラウザ自体が落ちます。FireFoxではスタイルシートが適用されずに真っ白なテキストだけの表示となります。
通常相談事をされると（本当は本人に了解をとらないといけないのですが）、ぼくのPCに丸ごとダウンロードしてからいろいろ解析して試して問題点を見つけるのですが、今回はそれすらできません（エラーとなりダウンロードできない）。
（次のコメントへ続く）

347. Posted by junike   2005年07月30日 22:36

（前のコメントからの続き）
こうなると画像が表示されていた時期というのがあったと思うのでそれ以降新しくしたこと、たとえばこのプラグインを追加したとか、このサービスやタグを挿入したとかがあったら、それらのいちばん最近のものから順に削除して元に戻していって画像が出るところまでさかのぼるくらいしか方法を思いつきません。

ちなみにとなりのたなかさんには、どの記事のページでどんなアドバイスをしたのかわかりません。少なくともここの記事ページでは初めてのような気がするのですが、貴サイトは見覚えがあるにはあります。

とりあえず今のぼくの知識ではここまでしか言えません。

348. Posted by junike   2005年07月30日 22:49

>となりのたなかさん
すいません。いましがたわかりました。
CSSの画像を指定しているところのほとんどが
不要な改行が入っているようです。
たとえば
.title　でいうと

background:#e6ece2 url

('https://parts.blog.livedoor.jp/old_img_com/img/usr/t_sora/title

.gif') repeat-x 0px;

こんな具合なので

background:#e6ece2 url('https://parts.blog.livedoor.jp/old_img_com/img/usr/t_sora/title.gif') repeat-x 0px;

というふうに一行にしてみてください。

349. Posted by とたかさん   2005年07月31日 05:04

junikeさん　当日の回答ありがとうございます。
言われてみたとおり改行を直した？所、写るようになりました。
下手なエディタ使ったので時々　↑　ってなってますがとりあえず
写るようになってヽ(≧□≦)人(≧∀≦)人(≧▽≦)ノです。
Opera　FireFox　が自分の環境にないので確認できないのですが。
他にまずい部分があればおねがいします。ｱﾘｶﾞﾄ!(´▽｀)

350. Posted by junike   2005年07月31日 09:01

>とたかさん
OperaでもFireFoxでも大丈夫です。
エディタによっては余分な改行が入ってしまうようですね。
今後気をつければいいでしょう。

351. Posted by イヌ   2005年08月19日 15:28

大変参考になりました。
前回もチャレンジしたのですが、
基礎的な部分が理解出来ずにいました。
お陰様でおそらく出来たと思います。
どうもありがとうございました。
今後とも宜しくお願い致します。

352. Posted by akichin   2005年09月07日 03:48

はじめまして、akichinと言います。
いつも参考にさせていただいています。
このサイトを参考にして3カラム化に挑戦中なのですが、
左サイドバーが記事の下に表示されます。
いろいろやってみたのですが、ダメでした。
どうしたらちゃんと左サイドバーが表示されるのでしょうか・・・。
よかったらご助言よろしくお願いします。

353. Posted by junike   2005年09月07日 06:32

>akichinさん
これはリニューアル後の２カラムテンプレートをこの記事のやり方で３カラム化したものですか？
だとしたらこの記事の冒頭にもあるように質問にお答えできません。
というのは、まだリニューアル後のやり方を検証してないからです。
とりあえず、TUTAYAの広告の幅が広すぎるのだと思うのでいったんはずしてみてください。
それで戻れば、次はいかにして左サイドバーの幅を広げればいいのかを考えてみますが、回答がいつになるかはわかりません。
ご了承ください。

354. Posted by akichin   2005年09月07日 13:32

junikeさん早速の返答ありがとうございます。
僕のやり方が少し間違ってたようで、
なんとか３カラムにできました。
ありがとうございました。
あと、こちらのブログのリンクを貼らせていただきました。

355. Posted by junike   2005年09月07日 20:16

>akichinさん
とりあえずできてよかったです。
あれは多分リニューアル前からあったテンプレートでしたかね。
TUTAYAの広告もうまく入ってますね。

356. Posted by バックドロップ   2005年09月29日 14:20

もともと3カラムのデザインを変えてみました。

もともと3カラムのデザインは、パズルのように組み込まれている為に結構苦労しました。

このページもいろいろと参考にさせていただきました。

357. Posted by junike   2005年09月29日 20:02

>バックドロップさん
自分で解析すれば勉強にもなるのでいいことだと思います。
ここに書かれていることが役にたったのであればよかったです。

358. Posted by しん母   2005年12月10日 10:15

ラブログユーザーです。今更ながらにとっても参考にさせて頂きました
私もド素人なので、タイトル画像がうまくセンターにこなかったり
サイドバーの位置がうまくいかなかったりしてますが、何とか３カラム化に成功したので嬉しいです(≧ω≦*)〃
ありがとうございました〜！
また勉強しに寄らせて下さいネ〜

359. Posted by junike   2005年12月10日 13:25

>しん母さま
IEでは何とか見られますが、FireFoxやOperaでは崩れています。
その辺のこだわりがなければこれ以上いじらない方が、逆に賢明かもしれません。

360. Posted by しん母   2005年12月10日 14:28

早速のお返事ありがとうございます！
IE以外でもキレイに見れるように整えたいと思って
今までのコメントを追いながら、少しいじってみましたが、まだ不十分ですよね。。。
どこを直せばいいのでしょうか？できれば詳しく教えて下さいまし〜！！

linsk2のright:900は自分のＰＣで確認して調整しているとこんな数値に・・
本来は履歴やお気に入りを開いた状態でも
３カラムの画面が切れずに表示したいのですが...


あと別件なのですが、ブログ本文の日付の表示が出なくなってしまって
これを直したいので、こちらももし原因がわかるようなら教えて下さいませ。。
宜しくお願いします<(_ _)>

361. Posted by junike   2005年12月10日 15:39

>しん母さん
ローカルに落としていろいろ試してみましたが、ざっくり見た限り摩訶不思議状態です。
というのは、まず、別件の方の日付についてはFireFoxやOperaではきちんと見えていますが、IEだと、記事のBACKGROUNDをなくして透明にしたとしても表示すらされていません。なぜかはわかりません。
それからIE以外のブラウザで崩れる理由もちょっとやそっとではわかりませんでした。
contentの設定のしかたがここの記事のものとは違ってますし、「.blog」でのマージンの取り方なども試行錯誤の結果に見えます。
今の状態を保存しておいて、もう一度最初からやり直してみるとうまくいく場合もありますが、そういうことをすると深みにはまるのであとはご自分の判断次第です。ぼく的には半ギブアップです。

362. Posted by しん母   2005年12月11日 00:48

す。すいません。過去に何度もいじってきた結果であんなＣＳＳになってしまいました(^^;)
色々試して頂いて。。。ありがとうございました<(_ _*)>
もともとcontentしかなかったのに後からbunner部分を足してしまったんです
確かそれから日付が出なくなったハズ。。
もう一度まっさらに戻してやり直してみるのもいいかなぁと思っています
積み重ねてきたものが身についてきているハズなので、きっとうまくいくハズ♪

またカスタマイズしたくなったら勉強しに来ますネ！ありがとうございました(≧ω≦*)〃

363. Posted by さち   2006年01月30日 10:46

初めまして。
２カラムから３カラム化で検索してこちらに来ました。
この記事を見ながらやってみました。
まだ用語など分ってないくせに、頑張って何度やっても、サイドバーが２つ重なってしまったり・・・。まだ完璧に分らないので泣きたくなりつつ頑張ります。
これからも、こちらの記事を参考に勉強してみますね。

364. Posted by junike   2006年01月30日 22:04

>さちさん
livedoorの用意する２カラムのテンプレートでも３カラムにしやすいものとしにくいものがあります。
チョコレートのテンプレはどちらかはわかりませんが、頑張っていろいろ試すうちにわかってくることもあります。
Javascriptの本を立ち読みされたそうですが、もしその気ならむしろやはりCSS（スタイルシート）について書かれたものを読まれることをお勧めします。

関係ないですが「朝から」でしたっけ？きれいな空の写真。すっごいきれいですね。あれはいいです！

365. Posted by tokugeki   2006年02月05日 16:32

個別記事にもサイドメニューを表示させたくていろいろ検索してこちらに来ました。
このページもいろいろと参考にさせていただきました。
ありがとうございました！