はてなのデザイン。

はてなのデザインをいじってみたのだけれども、これが意外と大変。

なぜかというと、スタイルシートがいじれる部分といじれない部分とで、二重に存在していたり、フッターとヘッター以外のHtmlはいじれなかったりするため、他人の書いたソースのある部分について改変できないことを前提で書いていかなければいけない。

おかげで、わざわざソースのスタイルシートの記述を否定するための記述などを書かなければいけないので、スタイルシートが長くなるわなるわ。

一応忘れないようにメモっておく

• 混乱しがちなスタイルシートのクラス指定
  • div class="day" は、下の三つを含めた一日の記事・コメントの全体。
  • div class="body" 　は「一日」のすべての記事部分(コメント以外)。
  • div class="section" は「一記事」ごとの全体。
  • div class="comment" は一日のコメント部分の全体

• • h1 →　一番上に自動で付くタイトル表示（日記全体の見出し）
  • h2 →　一日の見出し(class="day"の直後にくる)
  • h3 →　一記事の見出し(class="section"の直後にくる)

• • div class="sideber" →　フッターの途中に記述されている。ここにかこまれた部分がサイドバーになる。（スタイルシートで位置が絶対指定されている）
  • div class="main"　→　ヘッターの最後からフッターの途中まで続くサイドバーには属さないメイン部分。

• 推奨される更新手順
  • ブラウザの「ソースの表示」等から＜link rel="stylesheet" href="http://・・・/？？？.css" type="text/css"＞　の中にあるいじれない部分のスタイルシートを参考として保存しておく。（注：EUCコード）
  • 同様に、ソースの表示でhtmlも参考として保存しておく。（注：EUCコード。また、何も書いてない日記だと何がどうなってるのかがわからないので無意味。）
  • で、それから記述を開始する。

• 細かい技
  • Pによる改行の間が開きすぎて嫌な場合：Pのtop,bottomのmargin,paddingを小さめに設定する
  • 自動でついてくるh1のタイトルが嫌：h1関連の色を背景色と一緒にしてしまう。
  • はてなキーワード辞書のリンク時の下線：aのunderline属性ではなくて、border-bottomで指定されてるので、そちらをいじってやる。