全体配置とbodyクラス

はじめに

ここからはadiary標準の satsuki2 テンプレートでのテーマ作成について述べます。*1

adiaryでは出力されるすべての要素がHTML5に準拠しています。

全体の構成

adiaryは大枠で4つの要素からなります。

ヘッダー。<header id="header">>タグで囲まれた要素です。
メイン。<div class="main">で囲まれた要素です。
サイドバー。<aside id="sidebar">で囲まれた要素です。次の2つの子要素を持ちます。
- 両サイドバー要素a。<div id="side-a">
- 両サイドバー要素b。<div id="side-b">
フッター。<footer id="footer">

HTMLでの記述

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body id="body">
<div id="adiary-body">

<!--ヘッダ部================================================================-->
<header id="header">
</header>

<!--Start of body ==========================================================-->
<div id="hatena-body"><div>

<!--内容====================================================================-->
<div class="main" id="main-first">
</div> <!-- End of main -->

<!--サイドバー===============================================================-->
<aside id="sidebar">
<div id="side-a">

</div> <!-- End of side-a -->
<div id="side-b">

</div> <!-- End of side-b -->
</aside> <!-- End of sidebar -->
</div></div> <!-- End of #hatena-body -->
<!--End of body ============================================================-->

<footer id="footer"><!--フッタ-->
<div class="adiary"><a href="http://adiary.org/">adiary</a> Version 3.00</div>
</footer>

</div> <!-- End of #adiary-body -->

</body>
</html>

メイン部の配置は id=main-first ではなく class="main" を使用してください。idはJavaScriptの為だけに設定されています。*2

#hatena-bodyに空<div>が付いているのは、こうしないとどうしても実現できないデザインがあるためです。（例:satsuki2/nature-sky）

bodyに設定されるクラス

<body>要素には次のようなクラスが設定されます。

blog-owner : 表示している人はブログ管理者である。
blog-editor : 表示している人はブログの編集権限を持っている。
system : 現在システムモード（管理画面）である。
sp : スマホモード時に出力。
amp : AMPモード時に出力。AMP時は sp も常に出力されます。

【Ver3.50廃止】ブラウザクラス

CSSのための、ブラウザhack用のクラスが body に出力されます。JavaScriptで動的に設定されます。

クラス	対応環境	UA判別
GC	Chrome および WebKit	WebKit/
Fx	Firefox および Gecko	Gecko/
Edge	Edge	Edge/
IE	IE	MSIE
IEx	IE Version X (ex:IE9, IE10, IE11)

記述例

固定ピクセル、片サイドバー

/* 全体配置 */
#adiary-body {
	width:			900px;
	margin:			0 auto;
}
/* 記事部 */
.main {
	float:			right;
	width:			780px;			
}
/* サイドバー */
#sidebar {
	float:			left;
	width:			216px;
}
/* float解除 */
#hatena-body:after {
	content:		"";
	clear:			both;
	display:		block;
}

可変ピクセル、片サイドバー

/* 全体配置 */
#adiary-body {
	min-width:		600px;
	max-width:		920px;
	margin:			0 auto;
}
/* 記事部 */
.main {
	float:			right;
	width:			calc(100% - 168px);
}
/* サイドバー */
#sidebar {
	float:			left;
	width:			160px;
}
/* float解除 */
#hatena-body:after {
	content:		"";
	clear:			both;
	display:		block;
}
/* for IE8 (not support calc) */
.IE8 #adiary-body {
	width:			800px;
}
.IE8 .main {
	width:			612px;
}

両サイドバーを実現するには、<div class="main"> と <aside id="sidebar"> の位置を入れ替えないとなかなか難しいものがあります*3。CSSでの設定によりHTML構造を入れ替える方法があり、それを使った両サイドバーの実現方法を示します。

/* adiary.js でサイドバーのHTML位置を変更する */
#sidebar-move-to-before-main {
	min-width:		1px;
}

/* 全体配置 */
#adiary-body {
	min-width:		600px;
	max-width:		920px;
	margin:			0 auto;
}
/* 記事部 */
.main {
	float:			left;
	width:			calc(100% - 340px);
	padding-left:		8px;
	padding-right:		4px;
}
/* サイドバー */
#sidebar {
	float:			none;
	width:			auto;
}
#side-a {
	float:			left;
	width:			160px;
}
#side-b {
	float:			right;
	width:			160px;
}
/* float解除 */
#hatena-body:after {
	content:		"";
	clear:			both;
	display:		block;
}

/* for IE8 (not support calc) */
.IE8 #adiary-body {
	width:			900px;
}
.IE8 .main {
	width:			560px;
}

adiary開発マニュアル