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


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

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

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/08/20 17:31:48
  • 終了:2013/08/20 19:43:10

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4546ベストアンサー獲得回数18962013/08/20 18:47:29

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


まず、本文の枠を 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 は、画像が合うように調整です。

他2件のコメントを見る
id:a-kuma3

後、コメントの入力欄も広げておいた方が良いかもしれません。

div.comment textarea{
        width: 100%;    /* ← 300px (★) */
    }
2013/08/21 12:48:38
id:chikasai

もう何から何まですいません!!
感謝感激です!!

昨日、下の部分がちょっと欠けてるのに気づきましたが、
大丈夫気になんない!と思ってました。

そんなとこまでなおしていただけるなんて…。・゜(ノд`)゜・。

また何かあったときはよろしくお願いします!(笑)

2013/08/21 19:01:08

コメントはまだありません

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

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

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

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