基本構造と全体配置

satsukiテンプレートは、ヘッダ部、メイン部、サイドバー部の３つからなります。

構造

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html><body class="（agent_class）（mode_class）">
<div class="adiary-body">

<!--ヘッダ部-->
<div class="adminmenu">
　　ようこそxxxさん　ログイン
</div>
<div class="page-title">
<h1><a href="xxx">ページタイトル</a></h1>
</div>

<div class="hetane-body-top"></div>
<div class="hatena-body">

<!--メイン部-->
<div class="main">
　記事などのデータ
<div class="footer">
<hr class="footer">
　フッター
</div>
</div>

<!--サイドバー部-->
<div class="sidebar">
  <div class="side-a">
    サイドバー前半
  </div>
  <div class="side-b">
    サイドバー後半
  </div>
</div>


</div><!-- End of hatena-doby -->
<div class="hetane-body-bottom"></div>
</div><!-- End of adiary-body -->
</body></html>

HTMLヘッダ

１行目には DOCTYPE が来ます。上の例では標準準拠モードとなります。標準準拠モードでレンダリングが基本です。*1

IE6やIE7に標準準拠モードでレンダリングさせると表示が崩れる上、いわゆるアンダースコアハックが無効となるため、IE7以前では後半部は出力されず互換モードとしてレンダリングされます（IE8以降は標準準拠モードです）。

body

（agent_class）部に利用ブウラザに応じたクラスが出力されます。あまり推奨されませんが、必要最小限のブラウザ別CSSハックとして利用できます。

出力クラス	バージョンクラス例	対応ブラウザ
IE	IE5,IE6	Internet Explorer
Fx	Fx1 Fx2	Firefoxエンジンブラウザ
Fx	-	Geckoエンジンブラウザ
Opera	O8, O9	Opera
Safari	Sa2, Sa3	Safari
NotIE	-	IE以外のブラウザ

（mode_class）には表示モードが出力されます。

出力クラス	意味
normal	記事表示などのノーマルモード（Ver1.44～）
system	管理画面などのシステムモード

div.adiary-body

div.adiary-body は body要素と同じ部分を含みます。miyabiテーマのような横サイズ固定テーマでサイズ固定の壁紙（background-image）を使用する際に利用できます。

div.hatena-body

ヘッダ部を除く、メイン部とサイドバー部を両方含む要素です。

片サイドバーのための方法

ただ単純に表示した場合、サイドバーを実現することはできません。片サイドバーを実現するためには、例えば次のようなスタイルシートを記述します（他にも方法はあります）。

/* 全体配置用 */
div.hatena-body {
	position:		relative;
	width:			98%;
}
/* 日記部 */
div.main {
	margin-left:		200px;
}
/* 左側にメニューを配置 */
div.sidebar
{
	position:		absolute;
	left:			0px;
	top:			0px;
	width:			180px;
}

両サイドバーのための方法

同じく両サイドバーを実現するための基本配置法（のサンプル）です。

div.hatena-body {
	position:		relative;
	width:			1000px;
}
div.main {
	margin-left:		200px;
	width:			600px;
}
div.side-a
{
	position:		absolute;
	left:			0px;
	top:			0px;
	width:			180px;
}
div.side-b
{
	position:		absolute;
	left:			810px;
	width:			180px;
}

はてな互換のためのクラス

次の要素ははてな互換のためのクラス名/IDです。利用しないでください。

<div id="simple-header">（class="adminmenu"を使用のこと）

関連記事