ガイドグループ世話人の日記

はてなダイアリーガイド

はてなダイアリーガイドの草稿置き場です。この日記へリンクはどこでもご自由にどうぞ。ガイドを作るガイドグループ参加もお気軽に*。グループに入らなくても、ガイドははてなダイアリー市民なら誰でも作成・編集できるものですのでよろしくどうぞ。

※MacOS9でInternetExplorerをお使いの方は、この日記にコメントを書き込もうとすると文字化けすることがあります。対処方法はこちらをご覧ください。

 | 

1906-01-01はてなダイアリーのセレクタ探し(書きかけ

この草稿ははてなダイアリーガイド「CSSセレクタ」としてキーワード化しました。

ガイドトップへ・ ガイドトップ ・ 目次 ・ 索引

はてなダイアリーのセレクタ探し(書きかけ)

スタイル指定をしたいところのセレクタを探すページです。最近はてなの仕様変更でまとまった資料の多くが古くなってしまったので作りかけのこれを暫定公開。まだできてません。編集画面などはカバーしてませんし、新しい部分への対応漏れもあると思います。

セレクタはHTML要素とクラスの組み合わせで実際には無数に考えられますが、「既存のテーマをちょっといじるときに使いやすい」ものを紹介する形にしたいと思います。私の知識が不足気味なので間違いや記法の不統一などもあるかもしれません。よろしくご指導ください。(2004/8/5)

日記画像は「はてなダイアリー日記」です(元画像を開く)。

body

ページの表示全体。

ヘッダテーブルをページの端までぴったりくっつけたいときは

body {padding: none;}

逆に離したいときは

body {padding: 20px;} /*数字は適当*/

など。

ヘッダテーブル

非表示にしたりするのは、はてなの規約で禁止(有料オプション利用時は、設定画面からの設定で消せる)。ページ上部に、ロゴ画像がきちんと見えていれば、スタイル変更はいいようだ。

とはいえクラスが割り振られていないので、セレクタ選びは一工夫必要になって来る。やはり、いじりにくいところ。

h1

日記のタイトル。よくある指定をまとめると

h1 {
 border-bottom: none;  /*下線を消す*/
 font-size: 100%;  /*文字サイズを変える*/
 color: 色の値;  /*色を変える*/
}

div.hatena-body

div.mainとdiv.sidebarをひっくるめている。訳に立ちそうな、うまい説明が思いつきません。

div.main

div.sidebarと対になる要素のセレクタ。主に日記部分の幅を決める。これがないテーマはサイドバー非対応なので、自分で書かなければいけない。hatenaテーマでは

div.main {
	margin-left: 18%; /*左の要素からページ幅の18%離れる*/
}

これだけ。

またヘッダに<div class="main">、フッタに</div>と書きこんでおかないと、初期設定のままでは該当部分が存在しないので効かない。(かんたんデザイン設定では自動的に書き込まれる)

div.sidebar

div.mainと対になるサイドバーのセレクタ。サイドバーの幅などを決める。これがないテーマはサイドバー非対応なので、自分で書かなければいけない。

フッタ(かヘッダ)に以下のように書いた部分がサイドバーになる。div.sidebarの指定が効く所。(かんたんデザイン設定では自動的に書き込まれる)

<div class="sidebar">
サイドバーに入れたいもの。モジュールのタグとか。
</div>

div.calender

<前の日 | 次の日>といった部分。設定画面の「簡易設定 | 詳細設定」の部分もdiv.calenderだ。

<前の日 | 次の日>と「簡易設定 | 詳細設定」に別々の指定をしたいときは、

div.calender {『簡易設定 | 詳細設定』の指定内容}
div.hatena-body div.calender {『<前の日 | 次の日>』の指定内容}

のようにするといい。

HTML概略

<html>
  <head></head>
  <body>
    <table>ヘッダテーブル</table>
    <h1></h1>
    <div class="hatena-body">
      <div class="main">
        <div class="calendar"><前の日 | 次の日></div>
        <div class="day">日記1日分</div>
        <div class="calendar"><前の日 | 次の日></div>
      </div>
      <div class="sidebar">
        カレンダーモジュールなど
      </div>
    </div>
  </body>
</html>
 | 

ホームページ制作