人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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


●質問者: ???
●カテゴリ:はてなの使い方 ウェブ制作
✍キーワード:はてなダイアリー サイドバー ダイアリー デザイン バランス
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● りくっち
●40ポイント

公開デザインで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系統の知識がございませんので、ダイアリーデザインの全体改造に自信がありません。

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

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


2 ● オーイェー
●40ポイント

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

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

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

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

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

◎質問者からの返答

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

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

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

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

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


3 ● ardarim
●80ポイント

ダイアリーのデザインを一部修正するだけで何とかなります。


スタイルシートで、以下の内容を追加します。

.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列構成になります。

◎質問者からの返答

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

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

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



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


4 ● ElekiBrain
●500ポイント

はてなダイアリーはそもそも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)

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

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


5 ● ElekiBrain
●500ポイント ベストアンサー

再度お答えいたします。

今回は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

◎質問者からの返答

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

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

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


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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ