はてなダイアリーのデザインを3列にすることは可能でしょうか?


サイドバーに入れている項目が多くなり、ダイアリー全体のバランスを良くする為に
現在利用している2列(記事列と右サイドバー)を
3列(左サイドバー・記事列・右サイドバー)にしたいと思います。

3列にすることが可能でしたら、
デザイン設定で、どこに何をどのように記入すれば良いのかご指導下さい。

宜しくお願い申し上げます。

回答の条件
  • 1人10回まで
  • 登録:2007/06/16 09:27:13
  • 終了:2007/06/18 05:56:24

ベストアンサー

id:ElekiBrain No.5

ElekiBrain回答回数255ベストアンサー獲得回数152007/06/17 22:03:01

ポイント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とは無関係ですので、記事再投稿で修正してください。

すると、以下のようなレイアウトになるはずです。

http://sumireview.gionsyouja.com/index.htm

id:SumireS

ご指導どおりに、CSS記述の追加を致しました。

下記コメント欄内の希望項目、1.と3.は修正成功致しました!!!

http://q.hatena.ne.jp/1181953632#c92208


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

PS: 3.の分・・・・ご指導お願い申し上げます。

2007/06/18 04:14:03

その他の回答(4件)

id:rikuzai No.1

りくっち回答回数1366ベストアンサー獲得回数1412007/06/16 09:53:16

ポイント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


各ページソースが掲載されていますし、「このデザインをインポートする」ボタンを使用すれば、

簡単に今使っている自分のダイアリーに適用することができます。


以上ご参考まで。

id:SumireS

3列デザインのURLを6つリストアップして頂きまして、ありがとうございます。

現在使っているダイアリーの色やデザインそのままで3列にしたいと思っています。

この6つの中より1つインポート後に手を加えていく方法が可能でしょうか?

ヘッダーとサイドバーに自分で作成した画像を表示させたいのです。

CSS系統の知識がございませんので、ダイアリーデザインの全体改造に自信がありません。

良い方法がありましたら、更なるご指導お願い致します。

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

2007/06/16 10:25:15
id:OhYeah No.2

オーイェー回答回数81ベストアンサー獲得回数142007/06/16 13:12:41

ポイント40pt

公開されているページを3ペインにする方法については、

id:Koumei_S さんの日記にあった

http://d.hatena.ne.jp/Koumei_S/20060313/1142272957

が参考になるのではないでしょうか?

私も、リンク先の方法で、3ペインにしています。

id:SumireS

早速、必要事項を記入してみました。

3列分の枠はできましたが、位置や装丁を現在表示している右サイドバーと同じように設定するには、

教えて頂いたページにあるタグだけでは足りないようですので、自分なりに手を加えてみます。

成功すると良いのですが。(自信がありません)

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

2007/06/17 01:18:07
id:ardarim No.3

ardarim回答回数892ベストアンサー獲得回数1422007/06/16 15:46:57

ポイント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>

赤字部分が新しく追加する部分です。


これで左サイドバー、記事、右サイドバーの3列構成になります。

id:SumireS

必要事項を記入してみました。

現在表示している右サイドバーが下の位置に落ちてみえるようになりました。

右サイドバーの設定事項内容を追加した左サイドバーに設定すれば良いと思うのですが・・



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

2007/06/17 01:28:34
id:ElekiBrain No.4

ElekiBrain回答回数255ベストアンサー獲得回数152007/06/17 16:45:54

ポイント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>

となります。

id:SumireS

ご指導どおりに、[ページのフッタ]と[スタイルシート]へ必要事項をコピペ致しました。

そして、暫定的に現在表示しております右サイドバーの項目をすべて、

 と
の間にコピペ致しました。

が、しかし・・・成功できずに、変竹林になってしまいました。(T_T)

ご迷惑でなければ更なるご指導をお願い申し上げます。

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

2007/06/17 20:00:02
id:ElekiBrain No.5

ElekiBrain回答回数255ベストアンサー獲得回数152007/06/17 22:03:01ここでベストアンサー

ポイント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とは無関係ですので、記事再投稿で修正してください。

すると、以下のようなレイアウトになるはずです。

http://sumireview.gionsyouja.com/index.htm

id:SumireS

ご指導どおりに、CSS記述の追加を致しました。

下記コメント欄内の希望項目、1.と3.は修正成功致しました!!!

http://q.hatena.ne.jp/1181953632#c92208


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

PS: 3.の分・・・・ご指導お願い申し上げます。

2007/06/18 04:14:03
  • id:ElekiBrain
    ElekiBrain 2007/06/17 17:04:20
     一応回答しましたが、私の方法ですと現時点ではIEのみがレイアウト崩れを起こします。Firefox2、Opera9、Sfari3では表示に問題がありません。
     IEからインスペクタして色々調べてみましたが、やはり原因は不明でした。もしかすると追加したサイドバー空要素だからかもしれません。
  • id:SumireS
    ElekiBrain様

    さきほど、ご指導通りに必要事項を記入致しました状態での日記表示にしてありますので、
    どのような変竹林なのかご確認頂きたく存じます。

    宜しくお願い申し上げます。
  • id:ElekiBrain
    ElekiBrain 2007/06/17 20:04:54
    確認いたしましたが、div.mainの中にleftbarが入ってしまっています。上手く行かない場合はフッタに挿入していた部分をヘッダに差し替えてみてください。
  • id:ardarim
    現在利用しているベースのCSSが絶対配置でないために右サイドバーが下にずれてしまったようです。
    右サイドバーも絶対配置にすれば下にずれることはないと思いますので、スタイルシートに更に以下を追加してみてください。

    .sidebar {
    position: absolute;
    }
  • id:SumireS
    ElekiBrain様

    うっかりしておりました。ごめんなさい。
    <div class="main">の前に挿入内容を移動させました。
    3列になりました。
    ご指導、ありがとうございました。

  • id:SumireS
    ご迷惑でなければ、もう少しご指導お願い致します。

    1: 記事内の字の色とコメント記入欄の字色をグレー系にしてあったのですが、
    今回の作業後、赤に表示されているので、元の色に戻したいです。

    2: 記事部分の幅が入れた左サイドバーの幅分が減ってしまったので、その分広げたいです。
    http://d.hatena.ne.jp/SumireS/20060531/p1  ← ページ下のほうで記事の不足分がわかります。

    3: 新しく入れた左サイドバーの背景色を右サイドバーと同じものに設定したいです。


    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

    一つ前の書き込み後、【5分以内の連続発言はできません。】と表示されてしまいましたので、
    こちらにあわせて記入致します。

    ardarim様

    絶対配置についてのご指導ありがとうございました。


    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  • id:SumireS
    ご迷惑でなければ、もう少しご指導お願い致します。

    上記3.についてですが、
    もとの日記の横幅設定は、
    全体横 940
    右サイドバー 240
    本体(右サイドバーの左側にある広いところ) 700
    記事部分 660
    でした。

    そこに、左サイドバー横幅分 240 を 追加したいと思います。
    全体横 1180 になる計算です。

    ヘッダー画像の横幅は現在もとのままの940ですので、
    あらたに、横幅1180のものを作成開始致します。

    宜しくお願い申し上げます。
  • id:ElekiBrain
    ElekiBrain 2007/06/18 04:52:02
    ごめんなさい、限界です。技術的な問題ではなく根気の問題です。
    チャットなどで常時接続しながら逐一指導しなければ細かい作業は不向きです。言葉の齟齬も生じてしまいます。

    >本体(右サイドバーの左側にある広いところ)
    >記事部分 660

    もうこの時点で意味が通じないのです。どれが本体でどれが広いところなのか。記事が本体と同義ではないのか。そうであるならばどちらも700であるはず(paddingの代用にする場合はこの限りではありませんが)。
     もしSumireSさんがCSSを少しでもご存じであれば「div.sidebarは??pxで」などという指定が回答者側に成されるのでしょうが、現時点では何度も繰り返しやりとりをする他なく、このまま質問を延長されますと、いつ終わるとも分かりません。

    このまま質問を続けるならば、せめてどの要素(タグ)が横幅(width)何ピクセルか等と書いていただきたいのです。CSS以前の伝達の問題です。
  • id:SumireS
    ElekiBrain様

    説明の不備でご迷惑をおかけしてしまい、申し訳ございませんでした。

    上記横幅(width)の単位はpxでした。

    このコメント欄にCSS部分のコピーペーストをさせて頂いたほうがよかったのかもしれませんが、
    ご存知のように、CSS知識がございませんので該当箇所の抜き出しが正確にできませんので、設定内にあるCSSを全てコピーペーストすることになります。
    それはそれで、ご迷惑かと思いましたので控えました。


    > CSS以前の伝達の問題です。

    日本語のコミュニケーションが不適切・不適当でした事をお詫び申し上げます。
    すみませんでした。

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

この質問への反応(ブックマークコメント)

トラックバック

  • またやってる。 再び停まらない汽車に乗る。 今日の汽車はサイドバーのBlogPeopleのメンテ。 URLが変更になったところを新しいものに変えたり、もう無くなってしまったところを消したり、
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません