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

【急募】はてなダイアリーで、サイドバーの幅を自由に設定できる公開デザイン(もしくは公式デザイン)

http://d.hatena.ne.jp/rela1470/に使います。IEで見るとすばらしいほど幅が足りていません。よろしくお願いいたします。

●質問者: Jun Watanabe
●カテゴリ:ウェブ制作
✍キーワード:IE はてなダイアリー サイドバー デザイン 公開デザイン
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● rouge_2008
●60ポイント ベストアンサー

CSSを編集すると基本的にどのデザインでも可能です。

※現在使用しているデザインもCSSを編集して、サイドバーのモジュールタイトルと表示部分の背景画像の幅を大きくした画像を用意すれば可能なはずです。(ちょっと面倒かもしれませんが・・・)

※全体(#simple-header、h1、.hatena-body)とサイドバー(.sidebar、.hatena-module)等の幅(width)を変更する必要があります。

※デザインによっては、その他の部分を変更する必要があります。

「circle-B」のようにサイドバーのタイトルおよび表示部分に背景画像を使用していないデザインを変更すると比較的簡単に出来ると思います。

http://d.hatena.ne.jp/designset/1251

※ただし、「circle-B」の場合はタイトル画像を使用していますので、この画像をサイドバーの幅を大きくした分だけ大きい画像に変更する必要があります。

・「circle-B」のタイトル背景画像

http://img.f.hatena.ne.jp/images/fotolife/i/ico01/20090224/20090...


「灰色」でしたら、タイトルにも画像を使用していないのでもっと簡単だと思います。

http://d.hatena.ne.jp/designset/1210

「デザイン編集」→「詳細」のスタイルシート欄に以下の記述を追加すると、サイドバーを400pxに変更できます。

※サイドバーの幅を大きくする分だけ全体の幅を大きくしています。

※このデザインは、記事部分の右側に幅(マージン)を取り、サイドバーの左側の幅(マージン)をマイナスにして上に持ち上げているので、同じようにしてサイドバーの新しい幅とほぼ同じくらいのマージンをそれぞれ指定しました。

※サイドバーの幅よりもマージンを大きくする必要があります。

※「margin-left」はマイナスの値ですので注意してください。

(サイドバーの幅がもう少し小さくても大丈夫なら、「margin-right」と「margin-left」の値も同じように小さくして大丈夫です。)


#simple-header, h1,

.hatena-body {

width: 95%;

max-width: 1100px;

}

.main div.calendar,

.main div.day {

margin-right: 410px;

}

.sidebar {

width: 400px;

margin-left:-408px;

}

関連質問


●質問をもっと探す●



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