テーマ作成Tips
テーマ作成に役立つ情報や小技などを掲載します。テーマ作成関連の記事など書かれましたらトラックバックしてください。
ヘッダ部
div.adminmenu
ようこそ ゲスト さん ログイン
部を出力しています。標準では右寄せになっていますが、例えばumiテーマなどでは位置やメッセージを変更しています（メッセージ変更はIE非対応）。
<span class="welcome"> <span class="welcome-prefix">ようこそ</span> <span class="welcome-name"><a class="guest">ゲスト</a></span> <span class="welcome-postfix">さん</span> </span> <span class="admin-links"> <span class="adminmenu"><a class="login" href="?login"><span>ログイン</span></a></span> </span>
div.adminmenuについている「id="simple-header"」ははてな互換のための要素です。使用しないでください。
span.welcome
前半部の「ようこそ○○さん」の部分です。ログイン時はユーザー名の部分がリンクとなることがあります（IDに対応する日記帳があるときリンクになります）。
また「ようこそ」の部分もリンクになっています。通常トップ画面へ移動します（シングルモードのときはディフォルトIDの日記帳が表示されます）。
span.admin-links
ログインや、管理者用のリンク「日記を書く 管理 ログアウト」が表示されます。各要素は<span class="adminmenu"><a href=""><span>～～～</span></a></span>となっています。中の空span要素は、before: afeter: 擬似要素をリンクを書き換える際に利用しますが、通常は気にする必要はありません。
要素はいくつ表示されるかわかりません*1。間に区切りを表示する場合は、最終要素に"last"クラスが出力される（Ver1.44～）ことを利用して次のようにします。
span.adminmenu {
padding-right: 0.3em;
border-right: 1px solid #555;
}
span.adminmenu.last {
border-right: none;
}
追記
間に区切りを表示するもう一つの方法として、first-child疑似要素を利用します。konomiテーマでは以下のようにしています。（Ver1.44未満でも有効ですが、IEが:first-childに対押ししていないためIE非対応です。）
span.admin-links span {
border-left: 1px solid #555;
}
span.admin-links span:first-child {
border-left: none;
}
a.newcome-mark
新着のコメントやトラックバックがある際に「管理」の横に表示される『♪』マークです。このマーク自体は「管理」のspan要素内に出力されます。
<span class="adminmenu"> <a class="diary-admin"><span>管理</span></a> <a href="xxx" class="newcome-mark"><span>♪</span></a> </span>
div.page-title
ページタイトル部です。中の要素はH1のみになります。
<div class="page-title"> <h1><a href="<@v.myself>">ページタイトル</a></h1> </div>
リンクのa要素はないことがあります。
タイトル部に特定の画像を使う場合は、div.page-title自体に背景として幅と高さを取り、その要素内の任意の位置にh1要素をタイトルとして配置するという使い方が多いようです。
またタイトルの文字列を文字ではなく画像で指定することもでき（日記帳の設定）、その場合は次のようになります。
<div class="page-title"> <h1><a href="<@v.myself>"><img src="タイトル画像のURL"></a></h1> </div>
基本構造と全体配置
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"を使用のこと）
ルール
ルール
テーマファイルは必ず最初に文字コード宣言を含んでください（例はEUC-JPですが文字コードは正しく指定されていれば何でも構いません）。
@charset "EUC-JP";
文字コード指定は"@charset"のあとに半角1つ分の空白を入れてコードを指定します。CSS仕様に従い必ずこのルールを守ってください。
続いてどのCSS表記（コメント除く）よりも先に
@import url("../base.css");
を含んでください。色違いテーマなど、別のテーマを先に import する場合は、base.cssのimportは省略します。*1
base.cssの役割
base.css には adiary の機能（や記法）に関連するようなスタイルシートが記述されています。adiaryの機能が追加・拡張されスタイルシートの記述を増やす必要が出た際、satsuki/ 以下の各ファイルをすべて書き換えていては大変な手間を要するため、それらは一括して base.css に記述する約束になっています。
したがって、satsukiテンプレートを使用する各テーマでは必ず base.css をインポートしなければなりません。
システムモードの対応について
satsukiテンプレート用CSSは、比較的容易に（または何もしなくても）システムモードに対応することができます。これはシステムモードが、satsukiテンプレートとほとんど同じHTML構造をしているためです。
しかし細かい部分で出力構造が違いますので、必ず表示確認を行ってからシステムモード対応を決めてください。（他人に配布する際は）少なくとも、次の各ページをIE6、Firefox最新版で表示確認をお願いします。
- 記事編集画面
- 日記帳の設定画面（詳細モード）
テーマCSSのルール
各種ルール
ファイル名
テーマディレクトリ名と必ず同じファイル名に拡張子".css"を付加したものでなければなりません。違うファイル名にした場合、テーマとして正しく認識されません。
文字コード宣言
テーマファイルは必ず最初の行に（正しい）文字コード宣言を含んでください。@charsetと文字コードの間は必ず半角スペース１つでなければなりません。
@charset "EUC-JP";
画像ファイル、CSSファイル
画像ファイルなど参照するファイルはすべてテーマディレクトリ内に納めてください。
唯一例外として、他の（同じテンプレートを使用する）テーマを元に少し改造して別テーマを作成した場合は、import により別テーマのCSSを参照させることができます。
例えばsatsukiテーマの色違いや、-multisideとなっているテーマはこれに該当します。
satsuki-multiside.css の先頭部 @import url("../satsuki/satsuki.css"); satsuki_pink.css の先頭部 @import url("../satsuki/satsuki.css");
この場合、テーマ名の先頭部分に「元となったテーマ名」を含んでいなければなりません。
JavaScript
CSS中にJavaScript（IE専用です）を書くことは推奨できません。
配布・収録テーマのルール
adiary配布物に収録するテーマは次の条件を満たす必要があります。
- ライセンスがGPLであること。
- JavaScriptを含まないこと。
- IE6で表示させて、（どの画面でも）大きく表示が崩れないこと。
- Firefoxの最新版で表示させて、（どの画面でも）大きく表示が崩れないこと。
adiaryに収録しても構わない自作テーマがありましたら、ご連絡ください。
オリジナルテーマ作成時の注意
adiaryに収録されているテーマファイルやはてな/tDiaryなどの（大半を占める）GPLなテーマは、それを元に改造することで自由にテーマを作成・発表することができます。しかしながら、それらテーマはまたGPLとなり誰でも自由に使用出来ることを認めねばならなくなります。