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

はてなダイアリーのデザイン変更についての質問です。

go_planets という公開デザインに変更したのですが、
本文の枠から今までの写真がはみ出してしまいました。

もう少し本文の枠を広げて写真を枠内におさめたいと思い
スタイルシートをいじってボディの幅を広げてみたりしたのですが、
テキストの入っている白い枠が何をしても広がりません。

どうすれば白い枠が広がるのかわかる方いたら教えてください!

●質問者: なっぱ
●カテゴリ:はてなの使い方
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
ベストアンサー

スタイルシートを変更します。


まず、本文の枠を 70px ほど広げます。
(★) を入れた三ヶ所です。

div.hatena-body{
 position:relative;
 width: 800px; /* ← 730px (★) */
 margin: 0 auto;
 padding:0 0 20 0;
 border:0;
 text-align:left;}

div#main {
 float: left;
 clear: left;
 width: 570px; /* ← 500px (★) */
 text-align:center;}

 ...

div.day{
 background:url('http://tk115.s176.xrea.com/planet/day_ft.gif') left bottom no-repeat;
 width: 570px; /* ← 500px (★) */
 margin:0px auto 20px auto;
 padding:0 0 45 0;
 _height:1%;}

これだけだと、丸い角を表現している画像(日記の上と下)がずれてしまいます。
本当は、サイズに合わせた画像を用意した方が良いのでしょうけれど、無理やりサイズを合わせてみます。
(★) をつけた二ヶ所の変更と、三ヶ所の追加です。

h2{
 position:relative;
 margin:0 0 0 0;
 padding:5 40 0 10;
 border:0px;
 background:url('http://tk115.s176.xrea.com/planet/day_hd.gif') no-repeat top right;
 background-size: 570px 46px; /* 追加します (★) */
 text-align:right;}

 ...

div.body{
 color:#333333;
 border:0px;
 clear: both;
 padding: 0 0 0 60; /* ← 0 0 0 46 (★) */
 margin:0px 0px;
 _height:1%;
 background-size: 570px; /* 追加します (★) */
 background:#fff url('http://tk115.s176.xrea.com/planet/day_bd.gif') repeat-y;}

div.day{
 background:url('http://tk115.s176.xrea.com/planet/day_ft.gif') left bottom no-repeat;
 width:570px;
 margin:0px auto 20px auto;
 padding:0 0 45 0;
 background-size: 570px 100px; /* 追加します (★) */
 _height:1%;}

 ...

div.comment{
 font-size:80%;
 background:url('http://tk115.s176.xrea.com/planet/day_bd.gif') repeat-y;
 margin:0;
 padding: 0 0 0 60; /* ← 10 0 10 46 (★) */
 color:#50b4e5;
 border:0px;
 text-align:left;}

後半で追加した三行にある「570px」は、div.day の width の値と同じにします。
変更した二ヶ所の 46 → 60 は、画像が合うように調整です。


なっぱさんのコメント
すごい! こんなにすぐに、しかも丁寧に詳しくわかりやすく教えていただきありがとうございます! 無知な私でも一発で変更することができました。 これでストレスなく使うことができます。 本当に本当にありがとうございました!

a-kuma3さんのコメント
コメントを書こうとしたときに、コメント入力部の白い背景が元のサイズのままになっていたので、その対応と、少しずれているところがあったので、微調整をば。 追加が二ヶ所と、修正が四か所くらいです。 >|| h2{ position:relative; margin:0 0 0 0; padding:5 40 0 10; border:0px; background:url('http://tk115.s176.xrea.com/planet/day_hd.gif') no-repeat top right; background-size: 570px 46px; /* ← 577px 46px (★) */ text-align:right;} ... div.body{ color:#333333; border:0px; clear: both; padding:0 0 0 60; margin:0px 0px; _height:1%; background:#fff url('http://tk115.s176.xrea.com/planet/day_bd.gif') repeat-y; background-size: 570px; /* background の後に移動します (★) */ } /* 中括弧は、ここに持ってきます (★) */ div.comment{ font-size:80%; background:url('http://tk115.s176.xrea.com/planet/day_bd.gif') repeat-y; background-size: 570px; /* 追加します (★) */ margin:0; padding:0 0 0 60; color:#50b4e5; border:0px; text-align:left;} div.refererlist{text-align:right; margin:0px auto; padding:0 0 0 60; /* ← 0 0 0 46 (★) */ margin-top:-1px; color:#50b4e5; _height:1%; background:url('http://tk115.s176.xrea.com/planet/day_bd.gif') repeat-y; background-size: 570px; /* 追加します (★) */ } /* 中括弧は、ここに持ってきます (★) */ ||<

a-kuma3さんのコメント
後、コメントの入力欄も広げておいた方が良いかもしれません。 >|| div.comment textarea{ width: 100%; /* ← 300px (★) */ } ||<

なっぱさんのコメント
もう何から何まですいません!! 感謝感激です!! 昨日、下の部分がちょっと欠けてるのに気づきましたが、 大丈夫気になんない!と思ってました。 そんなとこまでなおしていただけるなんて…。・゚(ノд`)゚・。 また何かあったときはよろしくお願いします!(笑)
関連質問

●質問をもっと探す●



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