5/10現在のスタイル
現時点のスタイルのバックアップ用に、設定の内容をアップ。
はてなダイアリー - 暗中 こちらのサンプルをベースに作成
スタイルシートの基本 -- ごく簡単なHTMLの説明
はてなダイアリー画像一覧
はてなダイアリーガイド・応用編
自分だけのスタイルを作ってみよう
◆ページのヘッダ
<div class="main">
<div class="logo"></div>
<hatena name="calendar" delimiter="◇">
◆ページのフッタ
</div>
<div class="sidebar">
<!-- calender -->
<div class="limbo">
◇カレンダー
</div>
<hatena name="calendar2">
<!-- icon -->
<div class="icon">
<a href="http://a.hatena.ne.jp/append?http://d.hatena.ne.jp/panda728/"><img src="http://a.hatena.ne.jp/images/append.gif" border="0" title="アンテナに追加"></a>
<a href="http://d.hatena.ne.jp/keyword/%a4%cf%a4%c6%a4%ca%a5%c0%a5%a4%a5%a2%a5%ea%a1%bc%a5%ac%a5%a4%a5%c9"><img src="http://d.hatena.ne.jp/dav/guide/images/d.gif" border="0" title="はてなダイアリーガイド"></a>
<a href="http://d.hatena.ne.jp/panda728/rss"><img src="http://d.hatena.ne.jp/dav/images/icon/rss_m.gif" border="0" title="はてなダイアリーのRSSファイル"></a>
</div>
<!-- selection -->
<div class="limbo">
◇よりぬきログ
</div>
<li><a href="http://d.hatena.ne.jp/panda728/20040508#p1">MARCH後向@超弩級逆</a>
<li><a href="http://d.hatena.ne.jp/panda728/20040506#p2">MARCH後向@超弩級B逆</a>
<li><a href="http://d.hatena.ne.jp/panda728/20040417#p2">REV氏@匠超弩級順</a>
<!-- category -->
<div class="limbo">
◇カテゴリ
</div>
<li>[<a href="http://d.hatena.ne.jp/panda728/searchdiary?word=%2a%5bbg3%5d">バトルギア3</a>]
<li>[<a href="http://d.hatena.ne.jp/panda728/searchdiary?word=%2a%5bReply%5d">リプレイ</a>]
<li>[<a href="http://d.hatena.ne.jp/panda728/searchdiary?word=%2a%5btop%5d">トップ画像</a>]
<!-- title -->
<hatena name="section" listlimit="10" titlelength="9" moduletitle="最近の見出し" showcategory="false" template="list">
<!-- photo-->
<div class="limbo">
◇最近の画像
</div>
<hatena name="photo" listlimit="5" size="small">
<!-- ranking -->
<div class="limbo">
◇マイランキング<br>@超弩級B逆走
</div>
<table border="0" cellspacing="1" cellpadding="3" class="hairline" class="px10">
<tr class="ranktitle" align="center">
<td>車種</td>
<td>順位</td>
<td colspan="2">タイム</td>
</tr>
</table>
(2004/05/08 09:16更新)
<br>
<!-- course -->
<div class="limbo">
◇コースマップ(ネコサダさん作成)
</div>
<table border="0" cellpadding="0" cellspacing="0" class="px12" align="center">
</table>
<!-- hatena info -->
<hatena name="antenna" listlimit="25" titlelength="20" dateformat="%m-%d %H:%i" gid="91704">
<hatena name="keyword" listlimit="10">
<hatena name="hotkeyword" listlimit="10">
<hatena name="hoturl" listlimit="10">
<!-- google -->
<form method=GET action="http://www.google.co.jp/search">
<div class="limbo">
<fieldset><legend>google検索</legend>
<input type=text name=q size=20 maxlength=255 value="">
<input type=hidden name=hl value="ja">
<input value="EUC-JP" type="hidden" name="ie">
<input type=submit name=btnG value="Go!">
<input type=hidden name=domains value="d.hatena.ne.jp"><br>
<input type=radio name=sitesearch value="">www<br>
<input type=radio name=sitesearch value="d.hatena.ne.jp" checked>d.hatena.ne.jp<br>
<a href="http://www.google.co.jp/">google.co.jp</A>
</fieldset></div></form>
<!-- amazon -->
<form method="get" action="http://www.amazon.co.jp/exec/obidos/external-search">
<div class="limbo">
<fieldset><legend>amazon検索</legend>
<input type="text" name="keyword" size="20" value="">
<input type="hidden" name="mode" value="blended">
<input type="hidden" name="tag" value="hatena-22">
<input type="hidden" name="encoding-string-jp" value="日本語">
<input value="Go!" type="submit" name="Go"><br>
<a href="http://www.amazon.co.jp/exec/obidos/redirect-home?tag=hatena-22">Amazon.co.jp</a>
</fieldset></div></form>
<!-- goo辞書 -->
<form method="GET" name="search" action="http://dictionary.goo.ne.jp/search.php" target="goo">
<div class="limbo">
<fieldset><legend>goo辞書</legend>
<input type="text" name="MT" value="" size="20">
<input type="submit" value="Go!"><br>
<input id="ej" type="radio" name="kind" value="ej" checked><label for="ej">英和</label>
<input id="je" type="radio" name="kind" value="je"><label for="je">和英</label>
<input id="jn" type="radio" name="kind" value="jn"><label for="jn">国語</label>
<input type="hidden" name="FROM" value="USER"><br>
<a href="http://www.goo.ne.jp/">goo.ne.jp</a>
</fieldset></div></form>
<!-- counter -->
<div class="limbo">
◇はてなカウンター<br>
<hatena name="counter">Hits <div class="px10" align="right">(since 2004.04.15)</div>
</div>
</div>
/*【アンカー】*/
a { text-decoration:none;}
a:link { color: #2D41A4; } /*リンク*/
a:visited { color: #3B9690; } /*訪問済みリンク*/
a:hover { color: #52E84A; background-color: #D4FED3; } /*カーソルが乗っている時*//*【body】*/
body{
/*背景画像＊画像のＵＲＬを指定*/
background-image: url("http://www.oct.zaq.ne.jp/afadz200/line.jpg");/*ウィンドウのスクロールを動かした時の背景の動作
一緒にスクロールする(scroll),スクロールしない(fixed)*/
background-attachment: fixed;/*背景画像の並べ方＊
敷き詰める(repeat),縦方向のみ並べる(repeat-y),横方向のみ並べる(repeat-x),ひとつだけ表示する(no-repeat)*/
background-repeat: repeat-y;/*背景画像の位置
横方向の位置＊左端(left),中央(center),右端(right),割合(50% ),ピクセル(0px)
縦方向の位置＊上端(top),中央(center),下端(bottom),割合(50%),ピクセル(0px)
background-position: 横% 縦%;*/
background-position: 0px 59px;*//*背景色 透明(transparent),背景色を指定(#ddd)*/
background-color: #fff;/*文字の配置＊左寄せ(left),中央(center),右寄せ(right)*/
text-align: left;/*
はてなロゴのあるナビゲーションバーの外側の余白
margin:天px 右px 地px 左px;*/
margin: 0px 0px 0px 0px;
}/*【タイトル】*/
h1{
/*テキストで表示した時は(display: none;)を消す事*/
display: none;/*タイトルの下に線*/
border-bottom: 1px dotted #000000;/*文字の色*/
color: #000000;/*文字の配置＊左寄せ(left),中央(center),右寄せ(right)*/
text-align: left;/*線の外側の余白＊margin: 天px 右% 地px 左px*/
margin: 0px 10px 30px 10px;/*線の内側の余白＊padding: 天px 右px 地px 左px*/
padding: 4px 0px 4px 0px;
}/*【サイドバーの右側＊ロゴタイトル、カレンダー、日記の位置】*/
div.main {
/*border: 1px dotted #CC0000;＜チェック用*/
margin-top: 0px;
margin-left: 160px;
margin-right: 10px;
/*width: 680*/;
}/*【サイドバー】*/
div.sidebar {
font-size: 80%;
color: #000000;/*テキストの高さ(行間),規定値(normal)*/
/*line-height: 130%;*//*文字の配置＊左寄せ(left),中央(center),右寄せ(right)*/
text-align: left;/*サイドーを横に表示するのに必要*/
position: absolute;/*天の余白*/
top: 80;/*左の余白*/
left: 2px;/*サイドバーの幅*/
width: 155px;/*サイドバーの内側の余白*/
/*天,右,地,左*/
padding: 0px 0px 0px 0px;
}/*【アンテナのアイコン等＊独自拡張】*/
div.icon {
/*天,右,地,左*/
margin: 0px 0px 4px 0px;
padding: 0px 0px 0px 0px;
}/*【ログ＊独自拡張】*/
div.limbo {
/*背景画像*/
background-image: url("http://www.oct.zaq.ne.jp/afadz200/line.jpg");
background-repeat: repeat-y;border-top: 3px double #000000;
border-bottom: 1px dotted #000000;/*天,右,地,左*/
margin: 5px 0px 5px 0px;
padding: 0px 0px 2px 0px;
}/*【アンテナorキーワードモジュールのタイトル】*/
p.recentitem{
/*背景画像*/
background-image: url("http://www.oct.zaq.ne.jp/afadz200/line.jpg");
background-repeat: repeat-y;/*背景色＊透明(transparent),背景色を指定(#ddd)*/
background-color: transparent;border-top: 3px double #000000;
border-bottom: 1px dotted #000000;/*天,右,地,左*/
margin: 0px 0px 4px 0px;
padding: 0px 0px 2px 0px;
}/*【アンテナorキーワードモジュールのリスト】*/
div.recentsubtitles{
/*背景色＊透明(transparent),背景色を指定(#ddd)*/
background-color: transparent;/*天,右,地,左*/
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
}/*【タイトルロゴ＊独自拡張】*/
div.logo{
/*背景画像*/
background-image: url("http://www.oct.zaq.ne.jp/afadz200/logo4.jpg");
background-repeat: no-repeat;/*背景に色を表示したい場合は(transparent)を背景色(#ddd)にする*/
background-color: transparent;/*
線の種類＊無し(none),点線(dotted),破線(dashed),実線(solid)
線の種類＊以下の線種は線幅を(3px)以上しないと潰れてしまう
線の種類＊二重線(double),谷線(groove),山線(ridge),内線(inset),外線(outset)
上(border-top),左(border-left),下(border-bottom),右(border-right)
border: 1px solid #000000;＜天地左右全部線が引ける*/
border-left: 1px solid #000000;
border-right: 1px solid #000000;/*文字の配置＊左寄せ(left),中央(center),右寄せ(right)*/
text-align: center;height: 80px;
/*天,右,地,左*/
margin: 0px 0px 0px 0px;
padding: 2px 2px 2px 2px;
}/*【月別カレンダー】*/
.calendar{
/*背景に色を表示したい場合は(transparent)を背景色(#ddd)にする*/
background-color: transparent;border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;font-size: 90%;
/*文字の配置＊左寄せ(left),中央(center),右寄せ(right)*/
text-align: left;/*天,右,地,左*/
margin: 0px 0px 2px 0px;
padding: 2px 2px 2px 12px;
}
table.calendar a{width:100%;}/*【前の何日分／おとなり日記】*/
.main .calendar{}
/*【一日の表示】*/
div.day{
/*背景画像*/
background-image: url("");
background-repeat: no-repeat;/*背景色＊透明(transparent),背景色を指定(#ddd)*/
background-color: transparent;font-size: 100%;
color: #000000;
/*文字の配置＊左寄せ(left),中央(center),右寄せ(right)*/
text-align: left;border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
/*border: 1px solid #CC0000;＜チェック用*//*天,右,地,左*/
margin: 0px 0px 2px 0px;
padding: 0px 10px 0px 0px;
}/*【img.photo、section、footnoteを内包している】*/
div.body{
/*border: 1px solid #CC0000;＜チェック用*//*天,右,地,左*/
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}/*【添付画像】*/
img.photo {
background-image: url("http://www.oct.zaq.ne.jp/afadz200/line.jpg");
background-repeat: repeat-y;/*背景色＊透明(transparent),背景色を指定(#ddd)*/
background-color: #fff;border:1px solid #000000;
/*
画像などの表示位置
左(left)または、右(right)と指定すると、テキストがその周りを回り込むように表示される*/
float: right;/*天,右,地,左*/
margin: 10px 20px 10px 10px;
padding: 10px 10px 10px 20px;
}/*【日付】*/
h2{
/*背景色＊透明(transparent),背景色を指定(#ddd)*/
background-color: transparent;font-size: 100%;
/*書かないとボールドになる*/
font-weight: normal;
text-align: left;/*天,右,地,左*/
margin: 0px 0px 10px a0px;
padding: 2px 2px 2px 2px;
}/*【セクション】*/
div.section{
/*border: 1px solid #CC0000;＜チェック用*//*天,右,地,左*/
margin: 0px 0px 0px 0px;
}/*文字*/
div.section p {
/*border: 1px solid #CC0000;＜チェック用*/font-size: 100%;
/*テキストの高さ(行間),規定値(normal)*/
line-height: 170%;/*天,右,地,左*/
margin: 3px 5px 5px 8px;
}/*【小見出】*/
h3{
background-image: url("http://www.oct.zaq.ne.jp/afadz200/line.jpg");
background-repeat: repeat-y;/*背景色＊透明(transparent),背景色を指定(#ddd)*/
background-color: transparent;border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;font-size: 100%;
/*書かないとボールドになる*/
font-weight: normal;/*文字の配置＊左寄せ(left),中央(center),右寄せ(right)*/
text-align: left;/*天,右,地,左*/
margin: 0px 10px 0px 2px;
padding: 4px 4px 4px 4px;
}/*【■】*/
h3 span.sanchor{}/*【*t*で表示される時間】*/
h3 span.timestamp {
font-weight: normal;
font-size: 80%;
}/*天,右,地,左*/
ul{ margin: 10px 10px 10px 30px; } /*【リスト】*/
dl{ margin: 10px 10px 10px 30px; } /*【定義リスト】*/
ol{ margin: 10px 10px 10px 30px; } /*【数字付きリスト】*//*【キーワード】*/
a.keyword{
/*文字の色*/
color:#000000;/*
線の種類＊無し(none),点線(dotted),破線(dashed),実線(solid)
線の種類＊以下の線種は線幅を(3px)以上しないと潰れてしまう
線の種類＊二重線(double),谷線(groove),山線(ridge),内線(inset),外線(outset)
border-bottom: 1px(線幅) solid(実線) #00ff00(色);
キーワード文字列の下に線を表示*/
border-bottom: 1px solid #00ff00;
}/*【追記＊自動的に時間が記録される】*/
ins {
border-bottom: 3px double #E8BCE2;
text-decoration: none;
/*天,右,地,左*/
padding: 0px 0px 0px 0px;
}
ins:after {
content: "("attr(datetime)")";
}/*【削除＊自動的に時間が記録される】*/
del {
border-bottom: 3px double #99D3E8;
/*天,右,地,左*/
padding: 0px 0px 0px 0px;
}
del:after {
content: "("attr(datetime)")";
}/*【インライン引用文】"*/
q {
border-bottom: 3px double #E8A076;
text-decoration: none;
/*天,右,地,左*/
padding: 0px 4px 0px 4px;
}/*【引用の設定】*/
/*引用先*/
div.body blockquote {
/*背景色＊透明(transparent),背景色を指定(#ddd)*/
background-color: #E7F5FE;border-top: 3px double #999;
border-bottom: 3px double #999;font-size: 90%;
text-align: left;/*天,右,地,左*/
margin: 10px 10px 10px 30px;
padding: 10px 10px 10px 10px;
}/*引用本文*/
div.body blockquote p {
color: #555;
font-size: 100%;/*天,右,地,左*/
margin: 0px 0px 0px 0px;
}/*【整形済みテキスト】*/
pre {
/*背景色＊透明(transparent),背景色を指定(#ddd)*/
background-color: #FFE6EE;border-top: 3px double #999;
border-bottom: 3px double #999;/*天,右,地,左*/
margin: 5px 10px 5px 10px;
padding: 4px 4px 4px 4px;
}/*【脚注】*/
div.footnote {
font-size: 80%;
color: #000000;
/*文字の配置＊左寄せ(left),中央(center),右寄せ(right)*/
text-align: left;/*天,右,地,左*/
margin: 10px 10px 10px 30px;
padding: 0px 0px 0px 0px;
}/*脚注ひとつ分*/
div.footnote p {
/*背景色＊透明(transparent),背景色を指定(#ddd)*/
background-color: #eee;border-top: 1px dotted #000000;
border-bottom: 1px dotted #000000;/*天,右,地,左*/
margin: 6px 0px 6px 0px;
}/*【コメントを書く】*/
div.caption{
background-image: url("");
background-repeat: repeat-y;/*背景色＊透明(transparent),背景色を指定(#ddd)*/
background-color: transparent;border-top: 1px solid #000000;
border-left: 1px solid #000000;font-size: 90%;
/*文字の配置＊左寄せ(left),中央(center),右寄せ(right)*/
text-align: right;/*天,右,地,左*/
margin: 30px 0px 0px 60px;
padding: 2px 2px 2px 2px;
}/*【コメントの表示】*/
div.commentshort {
/*背景色＊透明(transparent),背景色を指定(#ddd)*/
background-color: transparent;border-left: 1px solid #000000;
font-size: 100%;
color: #000000;/*文字の配置＊左寄せ(left),中央(center),右寄せ(right)*/
text-align: left;/*天,右,地,左*/
margin: 0px 0px 5px 60px;
padding: 3px 2px 3px 2px;
}/*【コメント一個分の表示】*/
div.commentshort p {
/*背景色＊透明(transparent),背景色を指定(#ddd)*/
background-color: #ccc;border-top: 1px solid #ccffcc;
border-bottom: 1px solid #ccffcc;/*文字の配置＊左寄せ(left),中央(center),右寄せ(right)*/
text-align: left;/*天,右,地,左*/
margin: 8px 10px 8px 10px;
}/*【コメントした人の名前】*/
span.commentator {
/*文字にアンダーライン*/
text-decoration: underline;
}/*【検索窓で検索した結果の文字の表示】*/
span.highlight {
/*文字の背景色*/
background-color:#5EEEFE;
/*文字の色*/
color: black;
}/*【入力フォーム拡大】*/
textarea{ width: 800px; height: 350px;}/*【ランキング表用の書式】*/
.px10 { font-size: 10px; line-height: 110%; }
.px12 { font-size: 12px; line-height: 110%; }
.px14 { font-size: 14px; line-height: 110%; }
.px18 { font-size: 18px; line-height: 110%; }.ranktitle {
font-size: 10px;
font-weight: bold;
text-align: left;
color: #ffffff;
background: #333333;
line-height: 95%;
text-indent: 5px;
}.rankbtn{
font-size: 9px;
background-color:#ff8000;
width:10px;
height:10px;
}
/*【はてなphoto サムネイル表示用設定】*/
img.hatena_photo {
border: 0px;
}ul.hatena_photo {
margin: 1em;
padding: 0;
}ul.hatena_photo li {
display: block;
margin: 2px;
padding: 0;
list-style-type: none;
}ul.hatena_photo li a:hover, ul.hatena_photo li a:focus {
position: relative;
top: 1px;
left: 1px;
background-color: transparent;
color: transparent;
}
とりあえず知っている限りの要素を詰め込んでいます。
もう他にネタはないのかな・・・(^^;
