さて一気に行くぞ。もう疲れたし。笑。日記内で私が多用する要素から順にいかう。
まづは引用関係。
blockquote {
color:#fff ;
background-color:#036 ;
line-height:1.5em ;
border-width:1px 2px ;
border-color:#69c ;
border-style:solid dashed ;
margin:1em 0 ;
padding:0 1em ;
}
blockquote cite {
display:block ;
font-style:normal ;
fint-size:80% ;
text-align:right ;
margin:0 ;
}
q {
color:#fff ;
background-color:#036 ;
border:1px #69c dashed ;
}
blockquoteのサンプル
こんな感じになる。q要素はかうだ
。blockquote要素をはてなの省略記法で書くと引用元の明示が行へないので、原則的に使はないことにしてゐる。字下げ目的に使ふなんて論外なのでそんな解説をしてゐる本またはサイトは以下略。
続いてリスト関係。
ul,ol,dl { /* 箇条書きリスト、番号つきリスト、定義リストのまとめ設定 */
font-size:100% ;
line-height:1.5em ;
margin:0 ;
padding-left:1em ;
list-style-position:inside ;
}
div.main ol { /* 日記本文内にある番号つきリスト */
margin:1em 0 ;
padding:0 ;
}
div.main ul { /* 日記本文内にある箇条書きリスト */
list-style-type:none ;
margin:1em 0 ;
padding:0 ;
}
div.main li { /* 日記本文内にある箇条書き・番号つきリストの項目の装飾 */
border-width :1px 0 ;
border-color:#999 ;
border-style:solid ;
color:#fff ;
background-color:#666 ;
margin:0 ;
padding:0.2em ;
}
dt { /* 定義リストの定義語部分 */
line-height:2em ;
font-weight:bold ;
padding:0.5em 0 0 0 ;
border-bottom:1px #fff solid ;
}
dd { /* 定義リストの説明文 */
padding:0 0 1em 0 ;
}
それぞれかうなる。
- 箇条書きサンプル
- 入れ子の箇条書き
- もひとつ箇条書き
それから
- 番号つきリスト1
- 番号つきリスト2
- 番号つきリスト3
もひとつ
- 定義リスト1
- 説明文1
- 定義リスト2
- 説明文2
文字装飾関係、といふか強調。
em {
font-size:100% ;
font-weight:bold ;
font-style:normal ;
}
strong {
font-size:120% ;
font-weight:bold ;
font-style:normal ;
}
em要素による強調と、strong要素による強調。いづれもイタリック体はキャンセルしてゐる。日本語フォントをイタリック体で表示すると強調どころか弱弱しく見えると思ふがどうか。可読性も下がるので、私は好かない。
その他、雑多なもの。
hr { margin:1em 0 ; }
pre {
font-size:100% ;
line-height:1.5em ;
padding:0 0.5em ;
}
div.section table {
margin:1em ; color:#fff ;
background-color:transparent ;
font-size:80% ;
}
td.lead { color:#fff ; background-color:#339 ; }
td.behind { color:#fff ; background-color:#933 ; }
table要素はバトルギアのタイムを示すのに多用する。td要素の"lead"と"behind"はその時のタイム比較用なので、他人の参考にはならないだらう。
それから画像表示関係。
img.right,img.left {
float:right ;
margin:10px;
border: none ;
}
ul.catalog {
list-style-type:none ;
padding:2px 16px ;
background-color:#336 ;
border-color:#999 ;
border-width:4px 0 ;
border-style:dotted ;
}
ul.catalog li {
display:inline ;
margin:4px 2px ;
padding:0 ;
}
imgのクラス名"right""left"はまつたく正しくない。私が悪かつた。過去に遡つてクラス名を変へるのも面倒なので、それは後日の課題とする。とりあへず今はleftであつても右寄せで配置してしまふことにした。
ul.catalogはモーターショーのレビューの時に産み出したスタイルだ。自分としてはわりと気に入つてゐる。
最後に、小見出しに表示されてゐる更新時刻表示を非表示にして、一応スタイルは完成。
.timestamp { display:none ; }
とりあへず、作業としてはここまで。細かいデバッグや調整も施した完成版スタイルをid:yms-zun:20030106に置いた。
また後でこの作業を通じて感じたことなどを記していきたい。
追記(2006.11.08)
はてなダイアリーのテーマを公開する機能がついたので同じスタイル(とヘッダとフッタ)を公開デザイン「yms-zunさんのデザイン」 - はてなダイアリーに公開した。参考にされる方はインポートなどされるとよからう。
ただしヘッダやフッタは現状の当日記のものをそのままコピペしただけで到底他者の使用に耐へるものではないので、適宜変更されたい。
