スタイルシート編集（これでおわり）
これでいいか（細かいところは気が向いたときにまたやろう）。
いちおうCSS完全ガイド 第2版の卒業制作という位置づけ（自分の中で）だったので、これで卒業だ。成果物を掲載しておこう。
まずは構造の決定。
|------------------------------------| | body | | |------------------------------| | | | content | | | | |--------------------------| | | | | | |----------------------| | | | | | | | header | | | | | | | |----------------------| | | | | | | | main | right-sidebar | | | | | | | |----------------------| | | | | | | | footer | | | | | | | |----------------------| | | | | | |--------------------------| | | | |------------------------------| | |------------------------------------|
はてなダイアリーでは
というかんじ。ここで大事なのがfooterだ。Firefoxの場合、これがないとcontentがそれ以下の要素を囲んでくれないのだ。囲んでくれないとなぜ都合が悪いかというと、背景がbodyになってしまうからだ。なぜそうなるのかはよくわからないけれどとにかくそういう実装になっているらしいのでしょうがない。
はてなダイアリーの要素は
はてなダイアリーガイド「CSSセレクタ」とは - はてなキーワード
をみれば大体わかる。
あと今回は使ってないけど、角丸の作り方を学んだ。角丸というのは
http://takatoshi.dyndns.org/~takatoshi/contents.html
の右下にあるようなやつだ。今のところCSSでは定義されていない（たぶん将来はCSSで定義されるだろう、と勝手に思ってる）のでこれは単に角が丸い画像を作る。角が4つあるので4種類。それと正方形の画像も作る。で、角丸の領域を上からTOP、BODY、BOTTOMの3つに分けて、TOPとBOTTOMは左右に角丸画像をno-repeatで配置、あとは正方形画像をrepeatでは位置すればよい。
-
- -
実際にHTMLの構造を把握するときに使える道具。
- FirefoxのDOMインスペクタ
- Firefoxのインストール時にカスタムを選択してインストールする（標準ではインストールされない）。[ツール]-[DOM Inspector]で起動。これはかなり使える。
- Web Developer（Firefoxの拡張機能）
- 要素の枠を表示したり、要素のクラス、IDを表示したり、ほかにもいろんな機能がある。
- IEの[http
- //www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en:title=Developer Toolbar]:これはあまり使ってない
いちばん使えるのはDOM Inspectorかな。
-
- -
というわけで、最後に（長いけど）実際に使用しているCSSを。
はてなダイアリーの[管理ツールトップ]-[詳細デザイン設定]でテーマ「指定しない」を選択。ページのヘッダに
<div class="main">
ページのフッタに
</div> <div class="sidebar"> <hatena name="antenna" template="hatena-module"> ... </div> <div class="footer"> </div>
sidebarにははてなモジュールのタグを入れる。
で、スタイルシートは
body {
font-family: verdana, helvetica, arial, sans-serif;
font-size: 12px;
text-align: center; /* how to center block in ie */
margin: 0;
padding: 0;
background: #faf5fa;
}
h1, .adminmenu {
width: 800px;
padding: 10px 0 20px 0 !important;
border-color: silver;
margin: 0 auto 0 auto;
/* border: solid thin red; *//* test */
background: silver !important;
text-align: left;
font-weight: normal;
}
.adminmenu {
text-align: right;
}
h1 a, .adminmenu a { color: white; text-decoration: none; }
.hatena-body, h1 {
width: 800px;
padding: 0;
border-color: silver;
margin: 0 auto 0 auto;
/* border: solid thin red; *//* test */
background: #fff;
text-align: left;
}
.main {
float: left;
width: 490px;
padding: 5px;
/* border: solid thin silver; *//* test */
overflow: hidden;
}
.sidebar {
float: right;
width: 270px;
padding: 5px;
text-align: center; /* how to center block in ie */
background: #ffe;
/* border: solid thin silver; *//* test */
}
.sidevar .hatena-module {
width: 200px;
margin: 0 auto 0 auto;
text-align: left;
}
.sidebar .hatena-moduletitle {
margin: 0;
padding: 5px;
background: #37e;
font-weight: 900;
color: white;
}
.sidebar .hatena-moduletitle a {
color: white; text-decoration: none;
}
.sidebar .hatena-modulebody {
padding: 5px;
text-align: left;
}
.sidebar li { list-style-type: none; }
.footer {
clear: both;
margin: 0;
padding: 0;
font-size: 0.75em;
/* border: solid thin silver; *//* test */
}
a {
color: #7af;
}
a:hover {
color: #af0 !important;
text-decoration: none;
}
blockquote, pre {
border: dashed thin;
padding: 10px;
}
table.calendar, table.calendar th td {
font-size: 12px;
}
p { line-height: 1.5em; }
/* keywordcloud */
ul.keywordcloud {
margin: 10px;
padding: 0;
}
ul.keywordcloud li {
font-size:90%;
display: inline;
font-family: 'Arial',sans-serif;
color:gray;
}
a.keywordcloud0 { font-size: 80%; }
a.keywordcloud1 { font-size: 100%; }
a.keywordcloud2 { font-size: 120%; }
a.keywordcloud3 { font-size: 140%; }
a.keywordcloud4 { font-size: 160%; }
a.keywordcloud5 { font-size: 180%; }
a.keywordcloud6 { font-size: 200%; }
a.keywordcloud7 { font-size: 220%; }
a.keywordcloud8 { font-size: 240%; }
a.keywordcloud9 { font-size: 260%; }
a.keywordcloud10 { font-size: 280%; }
a.keywordcloud0, a.keywordcloud1, a.keywordcloud2, a.keywordcloud3, a.keywordcloud4, a.keywordcloud5, a.keywordcloud6, a.keywordcloud7, a.keywordcloud8, a.keywordcloud9, a.keywordcloud10 {
text-decoration: none;
}
h2, h2 a {
text-decoration: none !important;
border-bottom-style: solid;
border-bottom-color: #7af;
}
となりました。
