1311439594 はてなダイアリーのスタイルシートによるデザイン設定について教えてください。

数年前に質問を立ててスタイルシートの設定を丸写しさせていただいたことがあります。
何がどうなっているか朧気に理解しながら、実際は解っていません。
フォトライフにアップした写真を正常に表示させたいと思って幅を2400pixにしたりして失敗しました。
サイドの模様の幅を狭くして、本文と写真の幅を広くしたいのですが上手くいきません。
現在は1200にしていますが、頭のテーマの模様の幅が短いままでの表示です。
途中からも変になっている。
設定する項目が多くて理解が及んでいないので、出てくる数字を変更して闇鍋しています。
訪れる人も皆無で自前の防備録が目標のブログですが、何とかしたいと思っています。
少しずつ勉強できる環境を求めています。
http://d.hatena.ne.jp/miharaseihyou/
http://f.hatena.ne.jp/miharaseihyou/20081224001755

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/07/24 01:46:35
  • 終了:2011/07/30 21:19:26

回答(3件)

id:SHARUL No.1

SHARUL回答回数40ベストアンサー獲得回数32011/07/24 03:08:57

ポイント100pt

実現したいのは以下のようなイメージでよろしいでしょうか?

http://f.hatena.ne.jp/SHARUL/20110724025926

(1)

#simple-header および h1 のbackgroundプロパティ内のno-repeatやrepeat-yを

repeatに変更します → ブロック全体に背景画像が表示されるようになります。

(2)

h1 に不要な padding-left 指定があるので、padding:0!important;を付け加えます。

→ paddingは背景画像が表示される枠内の余白のことです。

width:1200pxとpadding-left:200pxが両方指定されていると

背景画像が表示される範囲の幅は合計で1400pxになってしまうためです。

※以下補足

今の背景画像だと、繰り返し表示したときにつなぎ目が見えてしまうので、

左右できれいに繋がるように加工したほうが見栄えが綺麗かもしれません。

また、タイトルの文字色が背景色とほぼ同じで読めなくなってしまうので、

h1の文字色を変更したほうが良いかもしれませんね。

大きなお世話でしたらすみません…


なお、参考までにCSSの勉強は以下のサイトがお勧めです。

http://az-store.nrym.org/archive/mynotes/lecture/html-css/


(※追記)

コメント・トラックバックの部分の背景を直したい場合、以下が必要です。

.comment .caption{} 内を以下で書き換える

margin:auto 30px auto -30px;

padding:10px 30px;

.refererlist .caption{} 内を以下で書き換える

margin:auto 30px auto -30px;

padding:10px 30px;

.refererlist {} 内を以下で書き換える

width: 1200px;

これで以下のようなイメージになります。

http://f.hatena.ne.jp/SHARUL/20110724031904

id:miharaseihyou

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

とりあえずrepeatへの変更を試しました。

しばらくしてはてなのサーバーの読み込みの更新がされれば少しは変化するかもしれません。

具体的には以下の記述に部分的に変更してみました。

div.adminmenu {

width: 1200px;

_width: 1000px;

background: transparent url("http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20081223/20081223172320.gif") repeat;

margin: 0 auto;

padding: 10px;

text-align: left;

この後に

padding:0!important;

を付け加えれば良いんでしょうか?

 

 それと、お勉強サイトは文字化けして7のIE9では閲覧不能のようです。

FFを追加するにはマシンのキャパがぎりぎりすぎる状態なので苦しい。

2011/07/24 22:14:17
id:kyabana No.2

kyabana回答回数155ベストアンサー獲得回数432011/07/25 01:01:23

ポイント150pt

途中からも変になっている

『現在は1200にしていますが、頭のテーマの模様の幅が短いままでの表示です。』は他の方が良回答をされていますので、『途中からも変になっている。』部分について書いてみたいと思います。

『途中からも変になっている。』というのは、『ページ下部の「最新タイトル」から下の部分が上部に対して幅が狭くなっていたり、背景の白の幅が一定じゃない』ということだとすると、スタイルシートに下記のような変更を行うことで統一感が出ると思います。

sidebar エリアの幅を1200pxに

このように記述されている箇所を

.sidebar {
  width: 100px;
  float: left;
  text-align: left;
  color: #fff;
}

↓下記のように  widthを 100px から 1200pxに書き換えます

.sidebar {
  width: 1200px;
  float: left;
  text-align: left;
  color: #fff;
}
hatena-moduletitle の幅を1200pxに、背景色に #928D8C を追加

このように記述されている箇所を

.sidebar .hatena-moduletitle {
  background: url('http://d.hatena.ne.jp/theme/hatena_kimono-korinkiri/hatena-moduletitle.gif');
  filter: alpha(opacity=45);
  -moz-opacity:0.55;
  opacity:0.55;
  _width: 150px;
  padding: 10px;
  color: #000;
  font-weight: bold;
}

↓下記のように backgroundの背景色を #928D8C に、widthを 150px から 1200pxに書き換えます

.sidebar .hatena-moduletitle {
  background: url('http://d.hatena.ne.jp/theme/hatena_kimono-korinkiri/hatena-moduletitle.gif') #928D8C;
  filter: alpha(opacity=45);
  -moz-opacity:0.55;
  opacity:0.55;
  _width: 1200px;
  padding: 10px;
  color: #000;
  font-weight: bold;
}
hatena-body の背景画像を繰り返し

このように記述されている箇所を

 .hatena-body {
  width: 1200px;
  background: url('http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20081223/20081223172320.gif') repeat-y;
  margin: 0 auto;
  padding-bottom: 20px;
  font-size: 90%;
  text-align: left;
}

↓下記のように backgroundの画像繰り返し設定をrepeat-y から repeatに書き換えます

 .hatena-body {
  width: 1200px;
  background: url('http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20081223/20081223172320.gif') repeat;
  margin: 0 auto;
  padding-bottom: 20px;
  font-size: 90%;
  text-align: left;
}

「頭のテーマの模様」の切れ目無く繰り返す画像

「頭のテーマの模様」の切れ目無く繰り返す画像を用意しました。

よろしければダウンロードしてご利用ください。

少しずつ勉強できる環境

スタイルシートの理解を深めるのに役立ちそうなサイトを紹介します。

現在利用中のデザインにスタイルシートがどのように記述されているかを理解するためにInternet Explorer の「開発者ツール」を利用されるのはいかがでしょうか。

FireFoxを利用されているのであればFirebugがオススメです。

【追記】サイドバーって、私の日記で言うと左右の水玉模様の事ですよね

サイドバー(sidebar)は、miharaseihyou さんのブログでいうと「Harbot時計から下全部」ということになります。言葉でいうと分かりにくいかもしれませんので、図にしました。こちらご覧ください。

  • miharaseihyou さんのブログは、mainというエリアとsidebarというエリアがそれぞれ2つあるようです。

この今の状態に、上記の様なスタイルシートの変更を加えると下記の図のようになります。

ちなみにスタイルシートの設定をすべて削除すると下図のようになります。

【追記2】幅を少し広げて記述するべきでしょうか?

幅を少し広げて記述するべきでしょうか?

いいえ、広げなくても大丈夫です。

はじめに僕のモニタ(1440×900)で見たときは、「ブログパーツ」や「タイトル」などの既製のモジュールが全て記事の下に表示されていたので、記事の幅(1200px)と合わせて表示させると統一感が出そうと思っていたのです。

ですが、修正を重ねた今の状態や、記事の右サイドに「タイトル」や「コメント」などを表示させるのが好みというのを伺って、幅を広げずに表示でも問題ないと思い直しました。

現状でタイトルやコメントが右サイドに出ているのはデフォルトの設定でしょうか?

はい。このテーマ独自のデフォルトの設定です。

id:miharaseihyou

う~~ん??

先ずはお礼まで。

kimono-korinkiriのエンドレス用の画像提供ありがとうございます。

 

 サイドバーって、私の日記で言うと左右の水玉模様の事ですよね。

水玉模様の幅は出来れば少し狭くしたいと思っているんですけど?

それと、写真の幅が1200pixなので、全体の幅はもう少し広くなります。

もしかして記事部分がサイドバーにオーバーラップする構造なのでしょうか?

つまり、全体の一番下にサイドバーがあって、その上に記事が載り、最後に写真が載る・・。

ブログパーツなどもあるので、もう少し載るものが増えそうですが、隠れる部分が増えるのがサイドバーなのかな?

 

 訂正ですね。

サイドバーが何かようやく理解しました。

サイドに無ければならないと思いこんだのが間違いの元でした。

水玉模様は背景なのでスタイルシート本文でbackgroundとしての指定ですね。

サイドバーにはブログパーツや見出しなどを表示するのに場所や形を指定できるんですね。

サイドバーの設定は、現状では既製のモジュールを追加する形でフッタからやっています。

スタイルシートからwidth:で幅を指定するのかな?

現状では

.main {

width: 1260px;

/* width: 1240px; */

}

だから、

.sideber{

width:1260;

/*width:1240;*/}

を追加すればいいのかな?

あるいは

.sidebar {

width: 1260px;

float: left;

text-align: left;

color: #fff;

}

と幅を少し広げて記述するべきでしょうか?

フッターの記述はそのままですね。

現状でタイトルやコメントが右サイドに出ているのはデフォルトの設定でしょうか?

2011/07/26 22:00:22
id:km1981 No.3

km1981回答回数429ベストアンサー獲得回数492011/07/30 17:19:31

ポイント50pt

この本は参考になります


id:miharaseihyou

 参考書も出ているんですね。

ご紹介ありがとうございます。

2011/07/30 21:05:24
  • id:rouge_2008
    以前の質問で回答させていただきました。
    http://q.hatena.ne.jp/1229439729

    申し訳ありません。
    タイトル部分(h1)に関して、一部間違いがあったようです。
    h1に関しては、幅(width)を変更せず、左余白(padding-left)に対して増やしたい幅をプラスして指定してください。
    今回の場合は「padding-left: 960px;」となります。
    ※サイドバーまで含めた全体の幅(.hatena-body)を1200pxに変更したい場合です。
    ※SHARULさんの回答にある背景画像を繰り返し表示する方法とは別の方法です。
    それ以外に関しては、上記質問に回答・コメントした手順で出来ると思います。


    画像を作成しましたので、もし良ければどうぞ使ってください。
    ・h1用の背景画像(950px × 200px)
    http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20110724/20110724043659.gif

    ・#simple-headerおよび.hatena-body用の背景画像(1200px × 10px)
    http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20110724/20110724041739.gif


    こちらではスタイルシート欄に以下のように記述する事で全体の幅1200pxで問題なく表示されました。
    -------------------------------------------------
    #simple-header {
    width: 1200px;
    background: transparent url("http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20110724/20110724041739.gif") repeat-y;
    }
    h1 {
    background: url("http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20110724/20110724043659.gif") no-repeat top left;
    padding-left: 960px;
    }
    .hatena-body {
    width: 1200px;
    background: transparent url("http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20110724/20110724041739.gif") repeat-y;
    }
    .main {
    width: 950px;
    }
    .calendar {
    width: 910px;
    }
    .day, .comment {
    width: 890px;
    }
    .referer-list-more {
    width: 95%;
    }

    ---------------------------------------------------

    ※以前回答した「.commentform textarea」に関しては、そのままでも特に変には見えないので、今回は除外しました。
    ※記事ページで「リンク元をすべて見る」の右端が表示されない為、今回「.referer-list-more」への幅指定を追加しています。


    他、何か分からない部分がありましたら返信ください。
  • id:rouge_2008
    「.refererlist」を忘れていました。
    「.day」および「.comment」と幅が同じなので、以下のようにまとめて記述できます。

    .day, .comment, .refererlist {
    width: 890px;
    }

    「.refererlist」の幅指定を追加する場合、「リンク元をすべて見る」の位置を変更した方がいいかもしれません。(少し右が空きすぎに見えるので・・・)

    .referer-list-more {
    width: 97%;
    }
  • id:SHARUL
    参考サイトはどうも今文字化けするようですね。
    表示→文字コード→UTF-8にすれば見れます。
    //Firefoxは不要です

    paddingの件については、それでOKです。
  • id:SHARUL
    ん…?

    > div.adminmenu {
    > width: 1200px;

    div.adminmenu ではなく、#simple-header および h1 にたいして
    backgroundをrepeat設定してください^^;
  • id:miharaseihyou
     お勉強サイトは正常に表示できるようになったので、お気に入りに登録してゆるゆる読んでいく予定です。
    ついでにスタイルシートの最初の部分の現在の記述を提示します。
     
    @charset "euc-jp";

    body {
    background: #e8e9f2 url("http://d.hatena.ne.jp/theme/hatena_kimono-korinkiri/background.gif");
    text-align: center;
    color: #313131;
    font-family:arial, sans-sarif;
    }

    img { border :0 ; }
    * { margin: 0; padding: 0; }
    a { color: #8fc31f; }

    a.keyword {
    color: #313131;
    text-decoration: none;
    border-bottom: 1px dotted #ccc;
    }

    .ad { width: 1200px; margin: 0 auto; }
     
     このkorinkiriのデザインが気に入っているのですが、元ネタが行方不明になっている。
    現状、700pixしかない画像からなのでrepeatさせると継ぎ目が出るような気がします。
    この記述の後に先ほどの記述が続きます。
  • id:rouge_2008
    横からすみません。
    h1に「padding:0!important;」を加えてしまうと、日記タイトルが背景画像の上になって読みにくくなってしまいます。
    また「text-align: center;」によってテキスト位置を真ん中に指定していますが、左余白を指定する事によって、h1ボックスの残った右側の範囲の中で真ん中に表示していたのが、h1に幅を指定して「padding:0!important;」を削除してしまうと、h1のボックス全体の中の真ん中に表示されるようになってしまいます。
    「hatena_kimono-korinkiri」で元々使用していた方法でもありますし、私がコメントした方法での修正をお勧めします。
    ※コチラの方法でも、背景画像として繰り返しても継ぎ目が綺麗に繋がるシームレスな背景画像を使用できます。


    一つ確認したかったのですが、サイドバーを記事本文の下に記事と同じ幅で表示して、全体の幅を1200pxとしたいのでしょうか?
    元のデザイン表示のまま、サイドバーも含めて幅を1200pxに変更したいのでしょうか?(※上の私のコメントはこのパターンです。)
    元のデザイン表示のまま記事部分だけで1200pxにしたいのでしたら、サイドバー250px分がありますので、全体の幅(#simple-header、.hatena-body等)を1450pxにする必要があります。
    とりあえず、サイドバーをどの位置に表示するつもりだったのかを教えてください。
  • id:rouge_2008
    > ※コチラの方法でも、背景画像として繰り返しても継ぎ目が綺麗に繋がるシームレスな背景画像を使用できます。

    何回もすみません。
    padding-leftを使用する方法ではシームレス画像は使えないようです・・・
  • id:miharaseihyou
     rouge_2008さんへ
     
     何度もすみません。お世話になります。
    現状で、自分のフォトライフの写真の幅を1200pixにほぼ統一しました。
    日記の写真は自前で撮るので、写真の幅を中心に考えたいと思います。
    以前ばらばらだった時には半分しか出ない写真もあった。
    まだまだ幅が足りないように感じます。
    希望としては記事部分と写真の幅の両方を1200pixにしたいと思っています。
    写真に合わせるので、記事部分は左右に余白が付いて1200pix+αになるのでしょうか?
    その両サイドに水玉模様が100~150pix程度を考えています。
    実はサイドバーも少し狭くしたい。
     
     他のパソで見たらどうなるかは気になるところですが、自分のパソではその程度が見てくれが良い。
    日記の管理でrepeat-yを二カ所ほどrepeatに変えてみたのですが変化ありませんね。
    本格的に組み直さなければダメかもしれません。
  • id:SHARUL
    > 日記の管理でrepeat-yを二カ所ほどrepeatに変えてみたのですが変化ありませんね。
    > 本格的に組み直さなければダメかもしれません。

    えぇと、どこを変更なさいましたか?
    もし、どこを変更して良いのかわからないようであれば、その旨ご回答ください。
    やみくもにrepeat-yをrepeatに直せばいいというわけではないので…

    ちなみに、CSSの基本的な書式
    セレクタ{ プロパティ名:値 }
    は理解されていますか?
  • id:rouge_2008
    返信ありがとうございます。
    今後アップロードする写真の幅1200pxに合わせて記事の幅を広くし、それに伴う修正を行うということですね?(サイドバー等の位置変更はしない。)


    > 写真に合わせるので、記事部分は左右に余白が付いて1200pix+αになるのでしょうか?

    はい、その通りです。
    1240pxあれば十分なようです。


    > その両サイドに水玉模様が100~150pix程度を考えています。
    実はサイドバーも少し狭くしたい。

    kyabanaさんへの返信にありましたが、背景とサイドバーを間違えているように思います。
    水玉模様の部分は背景になります。
    サイドバーというのは、ブログパーツや最新タイトル等のはてなモジュールを表示している部分の事です。
    背景(水玉模様)の左右の表示幅に関しては、ブラウザの大きさによって異なります。
    私のPCで見た場合、最大表示にしてもスクロールバーが表示されて左右の背景は見えなくなるはずですので、あまり気にしなくても良いのではないでしょうか?(画面解像度は1280×780にしています。)


    > 日記の管理でrepeat-yを二カ所ほどrepeatに変えてみたのですが変化ありませんね。

    表示する画像やwidth等も変更する必要がありますので・・・
    上記の条件(記事表示部1240px+サイドバー250pxのまま、背景(水玉模様)は環境によるので気にしない)で良ければ、これから画像を作成して修正点をコメントします。
  • id:rouge_2008
    返信をいただく前ですが、サイドバーに関しては後からでも追加修正可能ですので、とりあえず記事幅変更に合わせた修正分になります。
    ※1240pxで一応大丈夫ですが、元のデザインの幅の決め方の場合は1260pxのようですので、1260pxで用意しました。(1240pxにしたい場合は、「/* ~ */」のコメントアウトを無効にして、使用してください。一つ上のwidthは削除します。)


    #simple-header {
    width: 1510px;
    /* width: 1490px; */
    background: transparent url("http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20110726/20110726011146.gif") repeat-y;
    }
    h1 {
    background: url("http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20110726/20110726011145.gif") no-repeat left top;
    padding-left: 1270px;
    /*padding-left: 1250px; */
    }
    .hatena-body {
    width: 1510px;
    /* width: 1490px; */
    background: transparent url("http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20110726/20110726011146.gif") repeat-y;
    }
    .main {
    width: 1260px;
    /* width: 1240px; */
    }
    .calendar {
    width: 1220px;
    /* width: 1200px; */
    }
    .day, .comment, .refererlist {
    width: 1200px;
    /* width: 1160px; */
    }
    .referer-list-more {
    width: 97%;
    }
    .day img {
    max-width: 1200px;
    }


    ・#simple-headerおよび.hatena-body用の背景画像(1260px × 10px)
    http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20110726/20110726011146.gif

    ・h1用の背景画像(1260px × 200px)
    http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20110726/20110726011145.gif




    ・#simple-headerおよび.hatena-body用の背景画像(1240px × 10px)
    http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20110726/20110726012833.gif


    ・h1用の背景画像(1240px × 200px)
    http://img.f.hatena.ne.jp/images/fotolife/r/rouge_2008/20110726/20110726012832.gif
  • id:miharaseihyou
     何度もお世話になります。
    自力である程度理解しようと思って、SHARULさんの紹介してくれたHTMLとCSSのサイトを読んでいたんですが、普通にワードを使っている方が<strong>楽</strong>ですねぇ~~。
    全体を設定するのがこんなに大変だとは、半分しか解っていなかった。
    simple-headerが全体を指定した設定だという意味でしょうか?
    backgroundとhatena-bodyとcalendarの設定ですね。
    こうやって具体的な形を見れば理解できますが、自分で組み上げるまでにはまだまだ道が遠そおです。
    とりあえず現在の設定を一部入れ替えてみます。
    div.adminmenu のrepeat-yをrepeatにしたのは元に戻して、simple-header 以下の設定を変更してみます。
  • id:rouge_2008
    現在のスタイルシート設定をコピーして適当なファイルに保存してから、スタイルシート欄にそのまま上記コメントを貼り付けた方が良いかもしれません。
    現在の方法ですと、「hatena_kimono-korinkiri.css」の一部だけを変更したすべての記述を記入している形になりますので、少しだけですがデータ量が多くなります。
    気にするほどではないかもしれませんが、修正点だけ入力する形にする方が良さそうです。

    背景(水玉模様)に関しては、大丈夫だったでしょうか?
    ブラウザの幅を小さくして確認してみてください。


    ところで、miharaseihyouさんが使用しているブラウザはIEだったでしょうか?
    バージョンはいくつですか?
    IE7以下の場合、出来れば他のブラウザ(FirefoxあるいはGoogle Chrome)を併用した方がいいですが、インストール可能ですか?
    もし良ければ、CSSの変更方法(手順)に関して簡単にまとめて回答しようかと思いますが、必要ありませんでしょうか?
  • id:miharaseihyou
    #simple-headerおよび.hatena-body用の背景画像(1260px × 10px)以下の数行は日本語が入っているので、自分のフォトライフにアップして・・と思ったら、この部分もスタイルシートの一部だったんですね。
    続きにコピペしました。
     
     その後の以前のスタイルシート、は保存しました。
    #simple-header img {
    margin-top: 2px;
    border:none;
    }

    #simple-header a img {
    border: none;
    }

    #simple-header img#logo-hatena {
    margin-left: 10px;
    }

    #simple-header form.search-form {
    display: inline;
    }
    以下の部分です。
  • id:rouge_2008
    すみません。返信忘れていました・・・
    「#simple-header」は、検索窓やブログトップや管理へのリンクメニューが表示されている上部の白いバーの部分です。
    はてなダイアリーの場合、全体は「.hatena-body」になります。(中に記事表示側の「.main」とサイドバー「.sidebar」が含まれています。)
  • id:rouge_2008
    > #simple-headerおよび.hatena-body用の背景画像(1260px × 10px)以下の数行は日本語が入っているので、自分のフォトライフにアップして・・と思ったら、この部分もスタイルシートの一部だったんですね。


    すみません。そこはスタイルシートではないです。
    入れ替え用画像のURLを紹介する目的で書きました。
    ご自分のフォトライフにアップロードして使用する場合は、スタイルシートのbackgroundのurlを変更してください。
    (記事幅を1240pxにする場合も、backgroundのurl指定を変更する必要があります。現在は1260px幅の画像を指定してあります。)
  • id:miharaseihyou
    ブラウザはIE9ですが、FFを入れるにはマシンが非力で、現状バックアップ機能をサービスから無効にして、それ用に買ったHDDも外している状態です。
    xp用の5年も前の機体では7proは重かった。
    calendarは重複したようですが、前の細かい設定を削除するべきかもしれません。
    ブログ用のCSSは難しいですね。
    アドバイス大歓迎です。
  • id:miharaseihyou
     そっちのgifはIE9で表示させようとしたんですが、白紙回答されてしまいました。
    やっぱFFが必要かな?
    先日全体が重くなってフリーズが頻発するようになり、再インストールしたばかりの機体で、まだphotoshop cs5とか入れる予定のソフトが・・・。
  • id:rouge_2008
    > その後の以前のスタイルシート、は保存しました。

    部分的に保存するのではなくて、スタイルシート欄に入力されているすべてをコピー・保存して、上記にコメントした記述だけが残るようにしてください。
    ※上にも書きましたが、画像のURL紹介の部分はスタイルシートではありませんので、「・#simple-headerおよび.hatena-body用の背景画像(1260px × 10px)」の行以降は記述しないでください。
  • id:miharaseihyou
    了解です。やってみます。
  • id:miharaseihyou
     結果を報告します。
    写真は正常に表示されるようになりました。
    記事全体が左に寄っちゃいました。
    霧の葉の模様はセンター表示ですが、記事部分は段が寄って左綴じみたいな感じです。
    しかし、以前と比べて見違えるように見やすくなりました。
    あ、しまった。
    以前のスタイルシートを保存していなかった。
  • id:kyabana
    入れ違いになってしまいましたが、回答にサイドバーに関する内容を追記しました。
    http://q.hatena.ne.jp/1311439594#a1088178
    が、上のコメントを見るからに僕の思っていた完成形とちょっと違ったようです。。。
  • id:rouge_2008
    (すみません。少し書き直して再コメントしています。)

    無事に表示されるようになったみたいで良かったです。
    記事全体が左に寄ってしまうのは、写真が大きいのである程度は仕方がないですが、文章の段落だけを右側に寄せる事はスタイルシートで可能です。(ただし、見た目の印象は違和感があるかもしれません。)
    写真自体も左に寄っているように見えるという事でしたら、現在表示している写真が1000px幅しかないためです。
    1200pxでアップロードし直すか、幅を指定して画像を表示してみてください。
    フォトライフ記法の場合、「f:id:miharaseihyou:20110709073929j:image:w1200」のように、「f:id:miharaseihyou:写真のID(?):image」後ろに「:w1200」とサイズを続けて記述します。

    http://hatenadiary.g.hatena.ne.jp/keyword/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%95%E3%82%A9%E3%83%88%E3%83%A9%E3%82%A4%E3%83%95%E3%81%AB%E7%99%BB%E9%8C%B2%E3%81%97%E3%81%9F%E5%86%99%E7%9C%9F%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%EF%BC%88fotolife%E8%A8%98%E6%B3%95%EF%BC%89


    > 以前のスタイルシートを保存していなかった。

    以前の状態に戻す場合に必要なだけですので、スタイルシートを保存し忘れても大丈夫です。(スタイルシート欄を空欄にする事で、完全にデフォルトの状態に戻す事は可能です。)


    > そっちのgifはIE9で表示させようとしたんですが、白紙回答されてしまいました。
    やっぱFFが必要かな?

    IE9にも開発ツールはあるのでFirefoxはなくても大丈夫ですが、「白紙回答」の正しい表記は何でしょうか?(すみません。分かりませんでした。)
    一応、FirefoxあるいはGoogle Chromeがあると便利(※HTML要素の表示確認が楽)ですが、必須ではありません・・・


    kyabanaさんが回答追記されていますが、サイドバーが2つあるんですね?
    下に表示されているサイドバーはその位置でいいのでしょうか?
    右横に表示されているサイドバーと重複するモジュールもあるようですが・・・
    ページのフッタ欄を確認してみてください。
    「<div class="sidebar">」という行の後に各種モジュールの記述と「</div>」の後で、さらに「<div class="sidebar">」を記述してブログパーツや各種モジュールの記述を続けていませんか?
    右横のサイドバーだけにしたい場合は、1行目の「</div>」(ページのヘッダ欄の「<div class="main">」の閉じタグ)の後ろの「<div class="sidebar">」を一つだけ残して以下のようにしてみてください。(※下のサイドバーだけに表示されているモジュールとブログパーツは右横に移動します。)


    <!-- ここから -->
    </div>
    <div class="sidebar">
    <div class="hatena-widget widget-harbot"><script type="text/javascript" src="http://www.so-net.ne.jp/character/harbot/harbotclock.js" charset="UTF-8"></script>
    </div>
    <hatena name="sectioncategory" template="hatena-module">
    <hatena name="section" template="hatena-module">
    <hatena name="comment" template="hatena-module">
    <hatena name="trackback" template="hatena-module">
    <hatena name="mycomment" template="hatena-module">
    <hatena name="rss" url="http://f.hatena.ne.jp/miharaseihyou/rss" template="hatena-photo" listlimit="5">
    <hatena name="photo" template="hatena-module">


    </div>

    <!-- ここまで -->

    ※表示順は好みで変更しても大丈夫です。
  • id:miharaseihyou
     rouge_2008さんへ
     
    サイドバーは現在はフッタへブログパーツをコピペして設定しています。
    右サイドに表示されている最新タイトルと最近のコメントは、あれで気に入っています。
    あれはあれでデフォルトの指定かな?
    上に桐の模様が乗っかっているので、桐模様を左に寄せた方が統一感が出るかな?
    ブログパーツはスタイルシート本文に書いた方がキレイに表示されるのでしょうか?
    コメントの記述だと全部の項目が最下部に本文と同じ幅で並ぶ形でしょうか?
  • id:miharaseihyou
    ちなみに写真の幅は少し前に全て1200に編集しましたが、上手く反映されていないようです。
  • id:rouge_2008
    > あれはあれでデフォルトの指定かな?

    はい、そうです。
    miharaseihyouさんが使用しているデザインのデフォルトの設定です。


    > 上に桐の模様が乗っかっているので、桐模様を左に寄せた方が統一感が出るかな?

    タイトル用背景画像の事でしょうか?
    あの部分を左に寄せる事はできないと思います・・・
    個人的好みですが、現在の状態でちょうど良いデザインだと思います。


    > ブログパーツはスタイルシート本文に書いた方がキレイに表示されるのでしょうか?

    ブログパーツはスタイルシートではありませんので、はてなモジュールと同じくページのフッタ欄に記述する必要があります。


    > コメントの記述だと全部の項目が最下部に本文と同じ幅で並ぶ形でしょうか?

    いいえ、右側に表示されているデフォルトのサイドバーのように表示されます。
    ただし、スタイルシートで本文下に表示させる事は可能です。
    現在の右側のサイドバーをなくして本文下だけ残す場合は、ページのフッタ欄に上記コメントの変更+αを加えた後で、スタイルシート欄で「.sidebar」に対してCSSを変更します。
    右側を残したままにする場合は、ページのフッタ欄で1回目の「<div class="sidebar">」だけを<div class="sidebar2">に変更してから、スタイルシート欄で「.sidebar2」に対するCSSを追加します。


    > ちなみに写真の幅は少し前に全て1200に編集しましたが、上手く反映されていないようです。

    スタイルシート欄の「.day img」を「.day div.section img」に変更してみてください。
    ※ダイアリーの記事の方も変更しないと1000pxで表示されるようですが・・・
  • id:miharaseihyou
     rouge_2008さんへ
     
     フッタを変更したら、意外にシンプルで、これはこれで良さそうな感じです。
    ありがとうございました。
    もう、うちの会社のタコ部屋の夏が始まっちゃったので、あまり遊んでいられません。
    少しずつ勉強していきたいと思います。
     
     回答を登録してくださった皆様。
    ありがとうございました。
    これで終了いたします。

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

トラックバック

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

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

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