全体配置とbodyクラス

はじめに

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

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

*1 : adiaryの過去バージョンで(完全オリジナルな)テンプレートを自作した人は居なかったと記憶しているので、他のテンプレートについて考える必要はほぼないと思います(苦笑)

全体の構成

body.png

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

*2 : メイン部は「複数存在することがあり得る」ためです。今のところはデバッグメッセージを出力にしか使われていませんが(サイドバー出力後に再び<div class="main"></div>で出力されます)将来的にはわかりません。

bodyに設定されるクラス

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

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

ブラウザクラス

CSSでの対応のため、ブラウザhack用のクラスが body に出力されます。ブラウザクラスはJavaScriptで動的に設定されますので、HTMLソースには記述はありません。

クラス対応環境UA判別
GCChrome および WebKitWebKit/
FxFirefox および GeckoGecko/
EdgeEdgeEdge/
IEIEMSIE
IExIE 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;
}

*3 : 入れ替えなくてもabsolute指定をすれば、今度はsidebarが高くなるとフッターを突き抜けるという問題が出てきます。

OK キャンセル 確認 その他