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

はてなダイアリーガイド

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

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

 | 

1906-01-08はてなダイアリーガイド「CSSセレクタ」

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

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

図を見て選んだ部分のCSSセレクタ(の例)を示すガイドです(くわしい説明はこちら)。あんまりHTMLを理解していなくても、スタイルシートが書ければそこそこ指定できると思います。そのセレクタに関連したコツや、HTML構造の概略なども載っています。追加・修正いただけると幸いです。

日記全体の構造とセレクタ

調べたい部分をクリックしてください。日記のテーマによってちょっと見栄えが違うと思いますが、勘で補ってください。日記画像は「はてなダイアリー日記」からです(元画像)。

(2004年9月25日作図)

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>

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と対になっている要素。主に日記本文部分の幅を決める。div.main(.main)に対する指定がないテーマは“サイドバー非対応”で、自分で書かなければいけない。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 {『<前の日 | 次の日>』の指定内容}

のようにするといい。

[戻る▲]

はてなダイアリーガイド「CSSセレクタ」について

これはスタイルシートでなにかを指定したい時に、セレクタが一発でみつかるという目的のものでして、セレクタ決めを補助するものです。スタイルシートの基礎知識ははてなダイアリーガイド・応用編とほほのスタイルシート入門などで勉強してください。

  • はてなダイアリーをやっているとなかなか覚える機会がない「HTML」を理解していなくても、セレクタ{プロパティ:値;}っていうのを知っていれば、ちょっと日記のデザインをいじれるようになる
  • 自分でセレクタを選べる人にとっても、セレクタ決めの補助としては便利
  • テーマ作成や日記全体のデザインをするようなときは、HTML構造から見てください

というものでございます。

  1. 図を見ていじりたいところを選ぶ
  2. セレクタ(の例)が載っている
  3. そのセレクタに関するコツ情報(へのリンク)が載っている
  4. HTML構造の概略が載っている

という使い方です。

現在、はてなダイアリーガイド「CSSセレクタ」で対応していないもの
・編集、設定、コメント投稿、キーワード画面などの図(セレクタ自体はほとんど共通しますが)
・menuモジュール、searchformモジュール、counterモジュール、pvモジュール等のモジュール
asin/isbn 記法の詳細モードで生成される部分
また新しい部分への対応漏れはあると思います。説明項目の追加、歓迎です。
はてなダイアリーガイド「CSSセレクタ」で説明しにくいもの
これは「この部分の色を変えたい」「文字を変える」「枠線を変える」「背景を変える」「間隔を開ける・詰める」といった、比較的単純な指定には向いている資料だと思うのですが、フロートやマージンを使って「オブジェクト間の調整」をしたい場合は、あまり役に立たないかもしれません。図の中では要素同士の相関関係や「ここのすきまは〜」なんていうのは、ちょっと示しにくいことなどがありまして、やはりレイアウトに関することは、HTML構造を理解していないと一発でセレクタを探すというのはなかなか難しそうです。
セレクタの選び方について
セレクタは要素やクラスの組み合わせで実際には無数に考えられますが、「既存のテーマをちょっといじるときに使いやすい」ものを紹介する方向から、「Hatenaテーマ」に準拠した形にしています。「要素+クラス」の形をベースにして、その他の候補があれば追加して例示しています。
追加・修正、大歓迎!
詳しい方、間違ってるところを見つけたら直してプリーズ。各セレクタにはそれを使った小技やコツ(へのリンク)がありますが、充実していくと便利です。なんかいいのがあったらキーワード編集して追加してください。

[戻る▲]

 | 

ホームページ制作