サイドバーに入れている項目が多くなり、ダイアリー全体のバランスを良くする為に
現在利用している2列（記事列と右サイドバー）を
3列（左サイドバー・記事列・右サイドバー）にしたいと思います。
3列にすることが可能でしたら、
デザイン設定で、どこに何をどのように記入すれば良いのかご指導下さい。
宜しくお願い申し上げます。
No.5
255
15
500pt
再度お答えいたします。
今回はHTMLを改変する必要はありません。
1.以下のCSSを追加してください。
100
99
font{
color:#999999;
}
2.以下のCSSを探し出して、以下の通り修正してください。
div.main{
width:518px !important;
}
.sidebar_content {
width: 240px;
padding: 0px 0;
border:solid 1px;
}
div.leftbar{
border:solid 1px;
width:200px;
height:auto;
float:left;
background:#FFFFFF;
}
form.comment textarea {
width: 32em;
height: 20em;
}
ご要望は文字の色変化だけでしたが、メインカラム（記事の内容）の左側に隙間がなかった為、見苦しいレイアウトとなっていました。そこで今回はその修正分も盛り込んでいます。また、左カラムの背景色を白に塗りつぶし、コメント欄のはみ出しを修正しました。
なお、記事本文のテーブル（キムタクの辺り）のレイアウト崩れは厳密にはCSSとは無関係ですので、記事再投稿で修正してください。
すると、以下のようなレイアウトになるはずです。
No.1
1366141
40pt
公開デザインで3カラムのものを参考にしたりインポートしてみるというのはどうでしょうか。
http://d.hatena.ne.jp/designset
ざっと見た感じですが↓の公開デザインが3カラムです。
http://d.hatena.ne.jp/designset/558
http://d.hatena.ne.jp/designset/518
http://d.hatena.ne.jp/designset/497
http://d.hatena.ne.jp/designset/290
http://d.hatena.ne.jp/designset/287
http://d.hatena.ne.jp/designset/286
各ページソースが掲載されていますし、「このデザインをインポートする」ボタンを使用すれば、
簡単に今使っている自分のダイアリーに適用することができます。
以上ご参考まで。
3列デザインのURLを6つリストアップして頂きまして、ありがとうございます。
現在使っているダイアリーの色やデザインそのままで3列にしたいと思っています。
この6つの中より1つインポート後に手を加えていく方法が可能でしょうか?
ヘッダーとサイドバーに自分で作成した画像を表示させたいのです。
CSS系統の知識がございませんので、ダイアリーデザインの全体改造に自信がありません。
良い方法がありましたら、更なるご指導お願い致します。
回答ありがとうございました。
No.2
8114
40pt
公開されているページを3ペインにする方法については、
id:Koumei_S さんの日記にあった
http://d.hatena.ne.jp/Koumei_S/20060313/1142272957
が参考になるのではないでしょうか？
私も、リンク先の方法で、3ペインにしています。
早速、必要事項を記入してみました。
3列分の枠はできましたが、位置や装丁を現在表示している右サイドバーと同じように設定するには、
教えて頂いたページにあるタグだけでは足りないようですので、自分なりに手を加えてみます。
成功すると良いのですが。（自信がありません）
回答ありがとうございました。
No.3
897145
80pt
ダイアリーのデザインを一部修正するだけで何とかなります。
スタイルシートで、以下の内容を追加します。
.main {
margin-left: 250px;
}
250pxの部分は、左サイドバーのために本文(記事列)の左側に開ける余白のピクセル数です。適当に変更してください。
スタイルシートにさらに以下の内容を追加します。
.left_sidebar {
position: absolute;
top: 0px;
left: 0px;
width: 250px;
}
250pxは上で指定した物とあわせてください。左サイドバーのサイズになります。
スタイルシートの設定はこれで終わりです。
あとは、ページのフッタ欄の一番最後に、左サイドバーの内容を追加します。
</div>
<div class="sidebar">
右サイドバーの内容（現在設定されているもの）
</div>
<div class="left_sidebar">
左サイドバーの内容（新しく追加）
</div>
赤字部分が新しく追加する部分です。
これで左サイドバー、記事、右サイドバーの３列構成になります。
必要事項を記入してみました。
現在表示している右サイドバーが下の位置に落ちてみえるようになりました。
右サイドバーの設定事項内容を追加した左サイドバーに設定すれば良いと思うのですが・・
回答ありがとうございました。
No.4
25515
500pt
はてなダイアリーはそもそもHTML編集が出来ないため、配置が間違っている場合は上手く機能しない場合がありますが、以下を実行してみてください。以下の実行に際し、上記のardarimさんの方法は一端忘れて、削除してから実行してください（ardarimさん、すみません）。
まず、[管理] → [デザイン管理] → [詳細デザイン設定]から[ページのヘッダ]を閲覧し、以下の項目を探してください。見つからなければ[ページのフッタ]から探してみてください。
<div class="main">
そこに、以下のようなコードを加えます。
<div class="leftbar"> </div> <div class="main">
上記通り、<div class="main">の前に挿入内容が来なくてはなりません（div class=mainはもともと記述されている為、追加する必要はありません）。
次に、[スタイルシート]に移動し、以下の項目を追加してください。
div.main{
float:left;
width:538px !important;
}
div.main_content{
width:500px !important;
}
table.calendar{
width:180px !important;
}
div.leftbar{
border:solid 1px;
width:200px;
height:768px;
float:left;
}
div.sidebar{
width:200px !important;
float: right;
}
div.sidebar_content{
width:200px !important;
}
div.main_content{
width:430px;
}
成功すれば以下のURL先のようになります。
http://sumireview.gionsyouja.com/
左側の黒い枠の中にサイドバーのコンテンツを入れてゆくことになります。実際には、
<div class="leftbar">
（※ここにコンテンツを挿入）
</div>
となります。
ご指導どおりに、[ページのフッタ]と[スタイルシート]へ必要事項をコピペ致しました。
そして、暫定的に現在表示しております右サイドバーの項目をすべて、
の間にコピペ致しました。が、しかし・・・成功できずに、変竹林になってしまいました。(T_T)
ご迷惑でなければ更なるご指導をお願い申し上げます。
回答ありがとうございました。
No.5
25515
ここでベストアンサー
500pt
再度お答えいたします。
今回はHTMLを改変する必要はありません。
1.以下のCSSを追加してください。
font{
color:#999999;
}
2.以下のCSSを探し出して、以下の通り修正してください。
div.main{
width:518px !important;
}
.sidebar_content {
width: 240px;
padding: 0px 0;
border:solid 1px;
}
div.leftbar{
border:solid 1px;
width:200px;
height:auto;
float:left;
background:#FFFFFF;
}
form.comment textarea {
width: 32em;
height: 20em;
}
ご要望は文字の色変化だけでしたが、メインカラム（記事の内容）の左側に隙間がなかった為、見苦しいレイアウトとなっていました。そこで今回はその修正分も盛り込んでいます。また、左カラムの背景色を白に塗りつぶし、コメント欄のはみ出しを修正しました。
なお、記事本文のテーブル（キムタクの辺り）のレイアウト崩れは厳密にはCSSとは無関係ですので、記事再投稿で修正してください。
すると、以下のようなレイアウトになるはずです。
ご指導どおりに、CSS記述の追加を致しました。
下記コメント欄内の希望項目、1.と3．は修正成功致しました!!!
http://q.hatena.ne.jp/1181953632#c92208
回答ありがとうございました。
PS： 3.の分・・・・ご指導お願い申し上げます。
ElekiBrain
2007/06/17 17:04:20
4
2
1
2
2
♥♥♥
ardarim
ご指導どおりに、CSS記述の追加を致しました。
下記コメント欄内の希望項目、1.と3．は修正成功致しました!!!
http://q.hatena.ne.jp/1181953632#c92208
回答ありがとうございました。
PS： 3.の分・・・・ご指導お願い申し上げます。