1
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
4
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
4
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5
5
<meta name="Author" content="TADA Tadashi">
6
<link rev="MADE" href="mailto:sho@spc.gr.jp">
6
<link rev="MADE" href="mailto:t@tdtds.jp">
7
7
<link rel="INDEX" href="http://www.tdiary.org/">
8
8
<meta http-equiv="content-style-type" content="text/css">
9
9
<link rel="stylesheet" href="doc.css" type="text/css" media="all">
10
10
<title>tDiary: How to make theme</title>
13
<h1>tDiary<br><span style="font-size:medium">�ơ��ޤκ����</span></h1>
15
<h2>�ơ�����������ä�</h2>
17
<p>�ơ��ޤ�tDiary 1.1.0�ʹߤǻȤ���褦�ˤʤä��������θ��ɤ����ñ���ѹ�������ȤߤǤ����ơ��ޤ�CSS(���������ǥ��������륷����)�Ǽ¸�����Ƥ���Τǡ�CSS�ν������狼��к�뤳�Ȥ��Ǥ��ޤ���CSS�ν����ˤĤ��ƤϤ����ǤϽҤ٤ޤ����Υɥ�����ȤǤϡ�tDiary�Υơ��ޤ���Ȥ�����«���������������ޤ���</p>
19
<p>�ʤ���tDiary����������HTML�ϡ�1.5�����礭���Ѥ��ޤ���������Ū��1.4�ޤǤΥơ��ޤȤθߴ����Ϥ���ޤ���ư�Ѵ��ġ���(misc/theme_convert)����°���Ƥ��ޤ����������ǤϤ���ޤ����Ѵ���η�̤ϡ�������ȳ�ǧ����褦�ˤ��Ƥ���������</p>
21
<p>tDiary�Υơ��ޤϡ����ȡ���ǥ��쥯�ȥ�ˤ���theme�ǥ��쥯�ȥ�����äƤ��ޤ���tDiaryɸ�ॻ�åȤǤ�Default�������ե륻�åȤǤϥơ����ˤ��뤹�٤ƤΥơ��ޤ����äƤ��ޤ���</p>
23
<h2>�ơ������δ��ܥ롼��</h2>
25
<p>tDiary�ơ��ޤˤϡ��ʲ��Τ褦�ʴ���Ū����«��������ޤ����������CSS�Ǥ���Фʤ�Ǥ⤫�ޤ�ʤ��ΤǤ�����theme�ǥ��쥯�ȥ�����֤���tDiary��������̤��������ꡢ�ơ��ޡ������������褦�ʥơ��ޤˤ���ʤ顢��������«�����ä������ɤ��Ǥ��礦��</p>
13
<h1>tDiary<br><span style="font-size:medium">テーマの作り方</span></h1>
17
<p>テーマはtDiary 1.1.0以降で使えるようになった、日記の見栄えを簡単に変更する仕組みです。テーマはCSS(カスケーディングスタイルシート)で実現されているので、CSSの書き方がわかれば作ることができます。CSSの書き方についてはここでは述べません。このドキュメントでは、tDiaryのテーマを作るときの約束事だけを説明します。</p>
19
<p>なお、tDiaryが生成するHTMLは、1.5から大きく変わりました。基本的に1.4までのテーマとの互換性はありません。自動変換ツール(misc/theme_convert)は付属していますが、完全ではありません。変換後の結果は、きちんと確認するようにしてください。</p>
21
<p>tDiaryのテーマは、インストールディレクトリにあるthemeディレクトリに入っています。tDiary標準セットではDefaultだけ、フルセットではテーマ集にあるすべてのテーマが入っています。</p>
25
<p>tDiaryテーマには、以下のような基本的な約束事があります。もちろん、CSSであればなんでもかまわないのですが、themeディレクトリに配置してtDiaryの設定画面から選択したり、テーマ・ギャラリーに入るようなテーマにするなら、これらの約束事を守った方が良いでしょう。</p>
29
<li>theme�ǥ��쥯�ȥ�β��˥ơ���̾�Υǥ��쥯�ȥ������������β��˴�Ϣ����ե�����٤�Ǽ���</li>
30
<li>�ơ���̾�ϱѾ�ʸ���ޤ��Ͽ����ǻϤޤ�Ѿ�ʸ������������_�ס�-�פ���Ĥ��롣�ʤ���_�פ�ñ�����ڤ�ȡ�tDiary��������̤ΰ����ǡ�_�פ�������֤��������뤳�Ȥ�Ф��Ƥ�����»�Ϥʤ�</li>
31
<li>�ơ���̾��ʸ���������¤Ϥʤ��������ޤ�Ĺ���������ʤ��褦��</li>
32
<li>(���ʤ��Ȥ�������뵤������Τʤ�)�ơ����ˤޤ��ޤޤ�Ƥ��ʤ�̾�Τ�Ĥ���٤��Ǥ���</li>
33
<li>���Υơ��ޤ�ɽ�������Τ�üŪ��ɽ����̾�Τ�˾�ޤ���</li>
38
<li>�ġ��Υơ��ޤΥǥ��쥯�ȥ�ľ���ˡ֥ơ���̾.css�פȤ����ե�����̾�Ǻ�������</li>
39
<li>�����default.css�˴ޤޤ�Ƥ��륨����Ȥϴޤ�褦�ˤ���(�������ץ饰����˴ؤ��뵭�Ҥ�Ǥ��)����Ҥ���֥ƥ��ȥ٥���פdz�ǧ������ɤ�</li>
42
<li>��Ϣ�ե�����(README��������ե�����ʤ�)
44
<li>�ơ��ޤ˴�Ϣ����ե�����ϡ��ġ��Υơ��ޥǥ��쥯�ȥ�ˤ��٤�Ǽ���</li>
45
<li>���Υơ��ޤ�������README�Ȥ����ե�����̾�ˤ��롣���Υե��������Ƭ�˸�Ҥ���ե����ޥåȤǴ�ñ��������Ƥ����ȡ��ơ��ޡ�������Ǻܻ��ˤ������Ƥ��Ȥ���</li>
46
<li>����¾�Υե�����̾���ä����¤Ϥʤ������ơ��ޤ�̿̾��Ʊ���٤ε�§��Ŭ�Ѥ���Τ�˾�ޤ���������Ȥ��ơ�����������ˤ�sanchor.png(���������)��canchor.png(�ĥå���)��̾�Τ��褯�Ȥ��롣</li>
51
<li>div.section(������ʸ)�ǻȤ���ʸ��������(font-size)�ϡ���100%�פ��侩���롣����������Ǥ�ʸ������������ꤷ�Ƥ��ʤ����ˤ�̵����Ǥ褤���ޤ����ĥå��������ɼԤˤ褯�ɤޤ���ǽ���Τ��륨����ȤǤ⡢90%�������ʤ�ʸ���������λ���Ͽ侩���ʤ���</li>
52
<li>div.main��div.sidebar�ϡ������ɥС�(�����ȥ�ꥹ������������Ĺ�Υܥå���)��¸����뤿����Ѱդ���Ƥ��롣div.main����ʸ�ѡ�div.sidebar�ϥ����ɥС��ѤΥ�����ȡ�������������Ƥ����ȡ�¾�Υơ��ޤȶ��̤Τ�����ǥ����ɥС������֤Ǥ���褦�ˤʤ롣</li>
53
<li>�⤷�������ɥС��ΰ��֤Ȥ���div.sidebar�ǻ��ꤷ���Τ�ȿ��¦�ˤ�Ф���褦�ˤ��������ˤϡ�div.main2��div.sidebar2��������롣</li>
29
<li>themeディレクトリの下にテーマ名のディレクトリを作成し、その下に関連するファイルをすべて納める</li>
30
<li>テーマ名は英小文字または数字で始まる英小文字・数字・「_」「-」からつける。なお「_」で単語を区切ると、tDiaryの設定画面の一覧で「_」が空白に置き換えられることを覚えておいて損はない</li>
31
<li>テーマ名の文字数に制限はないが、あまり長くしすぎないように</li>
32
<li>(少なくとも公開する気があるのなら)テーマ集にまだ含まれていない名称をつけるべきである</li>
33
<li>そのテーマが表現するものを端的に表した名称が望ましい</li>
38
<li>個々のテーマのディレクトリ直下に「テーマ名.css」というファイル名で作成する</li>
39
<li>最低限default.cssに含まれているエレメントは含むようにする(ただしプラグインに関する記述は任意)。後述する「テストベンチ」で確認すると良い</li>
42
<li>関連ファイル(README、イメージファイルなど)
44
<li>テーマに関連するファイルは、個々のテーマディレクトリにすべて納める</li>
45
<li>そのテーマの説明はREADMEというファイル名にする。このファイルの先頭に後述するフォーマットで簡単な説明を書いておくと、テーマ・ギャラリー掲載時にその内容が使われる</li>
46
<li>その他のファイル名に特に制限はないが、テーマの命名と同程度の規則を適用するのが望ましい。慣例として、イメージアンカーにはsanchor.png(セクション)、canchor.png(ツッコミ)の名称がよく使われる。</li>
51
<li>div.section(日記本文)で使われる文字サイズ(font-size)は、「100%」を強く推奨する。もちろん、親要素で文字サイズを指定していない場合には無指定でよい。また、ツッコミ等の読者によく読まれる可能性のあるエレメントでも、90%に満たない文字サイズの指定は推奨しない。</li>
52
<li>div.mainとdiv.sidebarは、サイドバー(タイトルリスト等を入れる縦長のボックス)を実現するために用意されている。div.mainは本文用、div.sidebarはサイドバー用のエレメント。これらを定義しておくと、他のテーマと共通のやり方でサイドバーが設置できるようになる。</li>
53
<li>もし、サイドバーの位置としてdiv.sidebarで指定したのと反対側にも出せるようにしたい場合には、div.main2、div.sidebar2を定義する。</li>
57
<p>�ʤ����ºݤΥ�����Ȥ䥯�饹��tDiary��ǻ��İ�̣�ϡ���°��default/default.css�˥����ȤȤ��ƽ�Ƥ��ޤ��Τǡ����ͤˤ��Ƥ���������</p>
59
<h2>�ơ��ޡ�������Ѥ�����</h2>
61
<p>tDiary.Net�ˤϡ��ơ��ޡ������<<a href="http://www.tdiary.org/20021001.html">http://www.tdiary.org/20021001.html</a>>�Ȥ����ڡ���������ޤ����ơ�������Ͽ���줿�ơ��ޤϤ����ǥ������åȤȤ�ɤ�������뤳�Ȥ��Ǥ��ޤ���������ɽ������Ƥ�����̾�䥳���Ȥϡ��ơ�����°��README(1.4�λ���̾�Ĥ�css�ե���������Ѥ���Ƥ���)�˰���Υե����ޥåȤǽ�Ƥ����Τ�ưŪ��ȴ���Ф��Ƥ����ΤǤ���</p>
62
<p>�ǽ餫�餳�Υե����ޥåȤǽƤ����ȡ��ơ��������ä����˸��ɤ������ޤ����ʲ��ˤ��Υե����ޥåȤˤĤ��Ʋ��⤷�ޤ���</p>
57
<p>なお、実際のエレメントやクラスがtDiary上で持つ意味は、付属のdefault/default.cssにコメントとして書かれていますので、参考にしてください。</p>
59
<h2>テーマ・ギャラリー用の説明</h2>
61
<p>tDiary.Netには、テーマ・ギャラリー<<a href="http://www.tdiary.org/20021001.html">http://www.tdiary.org/20021001.html</a>>というページがあります。テーマ集に登録されたテーマはここでスクリーンショットともども一覧することができます。ここに表示されている作者名やコメントは、テーマ付属のREADME(1.4の時の名残でcssファイルも利用されている)に一定のフォーマットで書かれているものを自動的に抜き出しているものです。</p>
62
<p>最初からこのフォーマットで書いておくと、テーマ集に入った時に見栄えがします。以下にそのフォーマットについて解説します。</p>
69
Comment: �ͤ��դΥ������С����դ���ä�������ץ�Ǥ��襤�餷���ơ���
69
Comment: 四つ葉のクローバーの葉をあしらった、シンプルでかわいらしいテーマ
73
calendar2��recent_list��footnote��amazon�ץ饰�����б���
73
calendar2、recent_list、footnote、amazonプラグイン対応。
76
<p>���������ϡ�README�κǽ�ιԤ��鵭�Ҥ��ޤ����֥����פȡ��͡פ��: �פǶ���������ǡ�1����1�Ԥǽޤ������ܸ��Ȥ��ϡ�ʸ�������ɤ�EUC-JP�ˤ��Ʋ��������Ѹ������������С�README.en�Ȥ����ե�����ˤ��Ƥ���������</p>
77
<p>�ƹ��ܤΰ�̣�ϰʲ��ΤȤ���Ǥ����ʤ������ߥ���������Ѥ���Ƥ�����ܤ�Title��Author��License��Comment�����Ǥ���</p>
76
<p>この説明は、READMEの最初の行から記述します。「キー」と「値」を「: 」で挟んだ形式で、1項目1行で書きます。日本語を書くときは、文字コードをEUC-JPにして下さい。英語の説明があれば、README.enというファイルにしてください。</p>
77
<p>各項目の意味は以下のとおりです。なお、現在ギャラリーで利用されている項目はTitle、Author、License、Commentだけです。</p>
80
<li>Title: �ơ��ޤΥ����ȥ�Ǥ����ե�����̾�����Ǥ�̣���ʤ��Ȼפä��顢���ι��ܤ�Ƥ����������ʤ��Ƥ⤫�ޤ��ޤ���</li>
82
<li>Access: ��Ԥ�Ϣ���衣��륢�ɥ쥹����URL��</li>
83
<li>License: �饤�������Ҥ��ʤ�����tDiary��Ʊ��GPL�ˤʤ�ޤ�</li>
84
<li>Comment: ���Υơ��ޤ˴ؤ����ñ������</li>
80
<li>Title: テーマのタイトルです。ファイル名だけでは味気ないと思ったら、この項目を書いてください。なくてもかまいません。</li>
82
<li>Access: 作者の連絡先。メールアドレスか、URLを</li>
83
<li>License: ライセンス。記述しない場合はtDiaryと同じGPL2になります</li>
84
<li>Comment: このテーマに関する簡単な説明</li>
87
<p>�����Τ��Ȥ˶����Ԥ���С�����ʲ��ˤϲ���Ƥ⤫�ޤ��ޤ��쥤�����Ⱦ�Υ��ɥХ����䡢��Ԥλפ�����������������ʤ褦�˻ȤäƤ���������</p>
89
<h2>�ơ��ޡ��ƥ��ȥ٥��</h2>
91
<p>�ơ��ޤθ��������ǧ���뤿��Ρ��ƥ��ȥ٥��<<a href="http://www.tdiary.org/theme/themebench.rhtml">http://www.tdiary.org/theme/themebench.rhtml</a>>�Ȥ����ڡ���������ޤ���������Υ������åȤȰۤʤꡢ������Ǥ��͡��ʥ�����Ȥθ������䡢��ɽŪ�ʥץ饰�����ɽ�����ǧ���뤳�Ȥ��Ǥ��ޤ����ơ������������Ѥ��Ƥ���������</p>
87
<p>これらのあとに空改行をあければ、それ以下には何を書いてもかまいません。レイアウト上のアドバイスや、作者の思い入れを語る等、好きなように使ってください。</p>
91
<p>テーマの見え方を確認するための、テストベンチ<<a href="http://www.tdiary.org/theme/themebench.rhtml">http://www.tdiary.org/theme/themebench.rhtml</a>>というページがあります。ギャラリーのスクリーンショットと異なり、こちらでは様々なエレメントの見え方や、代表的なプラグインの表示を確認することができます。テーマ作成時に利用してください。</p>