~ubuntu-branches/ubuntu/saucy/tdiary/saucy-proposed

« back to all changes in this revision

Viewing changes to doc/HOWTO-make-theme.html

  • Committer: Bazaar Package Importer
  • Author(s): Daigo Moriwaki
  • Date: 2011-04-11 21:53:16 UTC
  • mfrom: (1.2.3 upstream)
  • Revision ID: james.westby@ubuntu.com-20110411215316-ih4gt4q8p29d2wf8
Tags: 3.0.1-1
* New upstream release (Closes: #542801, #594947)
* debian/control:
 - Bumped up Standards-Version to 3.9.1.
 - Updated version dependency.
* debian/tdiary-setup.rb: Followed the upstream changes, incorporating js and
  index.fcgi

Show diffs side-by-side

added added

removed removed

Lines of Context:
1
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2
2
<html lang="ja-JP">
3
3
<head>
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>
11
11
</head>
12
12
<body>
13
 
<h1>tDiary<br><span style="font-size:medium">�ơ��ޤκ����</span></h1>
14
 
 
15
 
<h2>�ơ��޺���������ä�</h2>
16
 
 
17
 
<p>�ơ��ޤ�tDiary 1.1.0�ʹߤǻȤ���褦�ˤʤä��������θ��ɤ����ñ���ѹ�������ȤߤǤ����ơ��ޤ�CSS(���������ǥ��󥰥������륷����)�Ǽ¸�����Ƥ���Τǡ�CSS�ν������狼��к�뤳�Ȥ��Ǥ��ޤ���CSS�ν����ˤĤ��ƤϤ����ǤϽҤ٤ޤ��󡣤��Υɥ�����ȤǤϡ�tDiary�Υơ��ޤ���Ȥ�����«���������������ޤ���</p>
18
 
 
19
 
<p>�ʤ���tDiary����������HTML�ϡ�1.5�����礭���Ѥ��ޤ���������Ū��1.4�ޤǤΥơ��ޤȤθߴ����Ϥ���ޤ��󡣼�ư�Ѵ��ġ���(misc/theme_convert)����°���Ƥ��ޤ����������ǤϤ���ޤ����Ѵ���η�̤ϡ�������ȳ�ǧ����褦�ˤ��Ƥ���������</p>
20
 
 
21
 
<p>tDiary�Υơ��ޤϡ����󥹥ȡ���ǥ��쥯�ȥ�ˤ���theme�ǥ��쥯�ȥ�����äƤ��ޤ���tDiaryɸ�ॻ�åȤǤ�Default�������ե륻�åȤǤϥơ��޽��ˤ��뤹�٤ƤΥơ��ޤ����äƤ��ޤ���</p>
22
 
 
23
 
<h2>�ơ��޺����δ��ܥ롼��</h2>
24
 
 
25
 
<p>tDiary�ơ��ޤˤϡ��ʲ��Τ褦�ʴ���Ū����«��������ޤ����������CSS�Ǥ���Фʤ�Ǥ⤫�ޤ�ʤ��ΤǤ�����theme�ǥ��쥯�ȥ�����֤���tDiary��������̤������򤷤��ꡢ�ơ��ޡ������꡼������褦�ʥơ��ޤˤ���ʤ顢��������«�����ä������ɤ��Ǥ��礦��</p>
 
13
<h1>tDiary<br><span style="font-size:medium">テーマの作り方</span></h1>
 
14
 
 
15
<h2>テーマ作成に先だって</h2>
 
16
 
 
17
<p>テーマはtDiary 1.1.0以降で使えるようになった、日記の見栄えを簡単に変更する仕組みです。テーマはCSS(カスケーディングスタイルシート)で実現されているので、CSSの書き方がわかれば作ることができます。CSSの書き方についてはここでは述べません。このドキュメントでは、tDiaryのテーマを作るときの約束事だけを説明します。</p>
 
18
 
 
19
<p>なお、tDiaryが生成するHTMLは、1.5から大きく変わりました。基本的に1.4までのテーマとの互換性はありません。自動変換ツール(misc/theme_convert)は付属していますが、完全ではありません。変換後の結果は、きちんと確認するようにしてください。</p>
 
20
 
 
21
<p>tDiaryのテーマは、インストールディレクトリにあるthemeディレクトリに入っています。tDiary標準セットではDefaultだけ、フルセットではテーマ集にあるすべてのテーマが入っています。</p>
 
22
 
 
23
<h2>テーマ作成の基本ルール</h2>
 
24
 
 
25
<p>tDiaryテーマには、以下のような基本的な約束事があります。もちろん、CSSであればなんでもかまわないのですが、themeディレクトリに配置してtDiaryの設定画面から選択したり、テーマ・ギャラリーに入るようなテーマにするなら、これらの約束事を守った方が良いでしょう。</p>
26
26
<ul>
27
 
        <li>�ơ��ޤ�����
28
 
        <ul>
29
 
                <li>theme�ǥ��쥯�ȥ�β��˥ơ���̾�Υǥ��쥯�ȥ������������β��˴�Ϣ����ե�����򤹤٤�Ǽ���</li>
30
 
                <li>�ơ���̾�ϱѾ�ʸ���ޤ��Ͽ����ǻϤޤ�Ѿ�ʸ������������_�ס�-�פ���Ĥ��롣�ʤ���_�פ�ñ�����ڤ�ȡ�tDiary��������̤ΰ����ǡ�_�פ�������֤��������뤳�Ȥ�Ф��Ƥ�����»�Ϥʤ�</li>
31
 
                <li>�ơ���̾��ʸ���������¤Ϥʤ��������ޤ�Ĺ���������ʤ��褦��</li>
32
 
                <li>(���ʤ��Ȥ�������뵤������Τʤ�)�ơ��޽��ˤޤ��ޤޤ�Ƥ��ʤ�̾�Τ�Ĥ���٤��Ǥ���</li>
33
 
                <li>���Υơ��ޤ�ɽ�������Τ�üŪ��ɽ����̾�Τ�˾�ޤ���</li>
34
 
        </ul></li>
35
 
 
36
 
        <li>CSS�ե�����̾
37
 
        <ul>
38
 
                <li>�ġ��Υơ��ޤΥǥ��쥯�ȥ�ľ���ˡ֥ơ���̾.css�פȤ����ե�����̾�Ǻ�������</li>
39
 
                <li>�����default.css�˴ޤޤ�Ƥ��륨����Ȥϴޤ�褦�ˤ���(�������ץ饰����˴ؤ��뵭�Ҥ�Ǥ��)����Ҥ���֥ƥ��ȥ٥���פdz�ǧ������ɤ�</li>
40
 
        </ul></li>
41
 
 
42
 
        <li>��Ϣ�ե�����(README�����᡼���ե�����ʤ�)
43
 
        <ul>
44
 
                <li>�ơ��ޤ˴�Ϣ����ե�����ϡ��ġ��Υơ��ޥǥ��쥯�ȥ�ˤ��٤�Ǽ���</li>
45
 
                <li>���Υơ��ޤ�������README�Ȥ����ե�����̾�ˤ��롣���Υե��������Ƭ�˸�Ҥ���ե����ޥåȤǴ�ñ��������񤤤Ƥ����ȡ��ơ��ޡ������꡼�Ǻܻ��ˤ������Ƥ��Ȥ���</li>
46
 
                <li>����¾�Υե�����̾���ä����¤Ϥʤ������ơ��ޤ�̿̾��Ʊ���٤ε�§��Ŭ�Ѥ���Τ�˾�ޤ���������Ȥ��ơ����᡼�����󥫡��ˤ�sanchor.png(���������)��canchor.png(�ĥå���)��̾�Τ��褯�Ȥ��롣</li>
47
 
        </ul></li>
48
 
 
49
 
        <li>�������
50
 
        <ul>
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>
 
27
        <li>テーマの配置
 
28
        <ul>
 
29
                <li>themeディレクトリの下にテーマ名のディレクトリを作成し、その下に関連するファイルをすべて納める</li>
 
30
                <li>テーマ名は英小文字または数字で始まる英小文字・数字・「_」「-」からつける。なお「_」で単語を区切ると、tDiaryの設定画面の一覧で「_」が空白に置き換えられることを覚えておいて損はない</li>
 
31
                <li>テーマ名の文字数に制限はないが、あまり長くしすぎないように</li>
 
32
                <li>(少なくとも公開する気があるのなら)テーマ集にまだ含まれていない名称をつけるべきである</li>
 
33
                <li>そのテーマが表現するものを端的に表した名称が望ましい</li>
 
34
        </ul></li>
 
35
 
 
36
        <li>CSSファイル名
 
37
        <ul>
 
38
                <li>個々のテーマのディレクトリ直下に「テーマ名.css」というファイル名で作成する</li>
 
39
                <li>最低限default.cssに含まれているエレメントは含むようにする(ただしプラグインに関する記述は任意)。後述する「テストベンチ」で確認すると良い</li>
 
40
        </ul></li>
 
41
 
 
42
        <li>関連ファイル(README、イメージファイルなど)
 
43
        <ul>
 
44
                <li>テーマに関連するファイルは、個々のテーマディレクトリにすべて納める</li>
 
45
                <li>そのテーマの説明はREADMEというファイル名にする。このファイルの先頭に後述するフォーマットで簡単な説明を書いておくと、テーマ・ギャラリー掲載時にその内容が使われる</li>
 
46
                <li>その他のファイル名に特に制限はないが、テーマの命名と同程度の規則を適用するのが望ましい。慣例として、イメージアンカーにはsanchor.png(セクション)、canchor.png(ツッコミ)の名称がよく使われる。</li>
 
47
        </ul></li>
 
48
 
 
49
        <li>エレメント
 
50
        <ul>
 
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>
54
54
        </ul></li>
55
55
</ul>
56
56
 
57
 
<p>�ʤ����ºݤΥ�����Ȥ䥯�饹��tDiary��ǻ��İ�̣�ϡ���°��default/default.css�˥����ȤȤ��ƽ񤫤�Ƥ��ޤ��Τǡ����ͤˤ��Ƥ���������</p>
58
 
 
59
 
<h2>�ơ��ޡ������꡼�Ѥ�����</h2>
60
 
 
61
 
<p>tDiary.Net�ˤϡ��ơ��ޡ������꡼&lt;<a href="http://www.tdiary.org/20021001.html">http://www.tdiary.org/20021001.html</a>&gt;�Ȥ����ڡ���������ޤ����ơ��޽�����Ͽ���줿�ơ��ޤϤ����ǥ����꡼�󥷥�åȤȤ�ɤ�������뤳�Ȥ��Ǥ��ޤ���������ɽ������Ƥ�����̾�䥳���Ȥϡ��ơ�����°��README(1.4�λ���̾�Ĥ�css�ե���������Ѥ���Ƥ���)�˰���Υե����ޥåȤǽ񤫤�Ƥ����Τ�ưŪ��ȴ���Ф��Ƥ����ΤǤ���</p>
62
 
<p>�ǽ餫�餳�Υե����ޥåȤǽ񤤤Ƥ����ȡ��ơ��޽������ä����˸��ɤ������ޤ����ʲ��ˤ��Υե����ޥåȤˤĤ��Ʋ��⤷�ޤ���</p>
 
57
<p>なお、実際のエレメントやクラスがtDiary上で持つ意味は、付属のdefault/default.cssにコメントとして書かれていますので、参考にしてください。</p>
 
58
 
 
59
<h2>テーマ・ギャラリー用の説明</h2>
 
60
 
 
61
<p>tDiary.Netには、テーマ・ギャラリー&lt;<a href="http://www.tdiary.org/20021001.html">http://www.tdiary.org/20021001.html</a>&gt;というページがあります。テーマ集に登録されたテーマはここでスクリーンショットともども一覧することができます。ここに表示されている作者名やコメントは、テーマ付属のREADME(1.4の時の名残でcssファイルも利用されている)に一定のフォーマットで書かれているものを自動的に抜き出しているものです。</p>
 
62
<p>最初からこのフォーマットで書いておくと、テーマ集に入った時に見栄えがします。以下にそのフォーマットについて解説します。</p>
63
63
 
64
64
<pre>
65
 
Title: �������С�
66
 
Author: ����������
67
 
Access: sho@spc.gr.jp
 
65
Title: クローバー
 
66
Author: ただただし
 
67
Access: t@tdtds.jp
68
68
License: GPL
69
 
Comment: �ͤ��դΥ������С����դ򤢤���ä�������ץ�Ǥ��襤�餷���ơ���
 
69
Comment: 四つ葉のクローバーの葉をあしらった、シンプルでかわいらしいテーマ
70
70
 
71
 
�ո����Υơ��ޤǤ���
72
 
�����ɥС��б���
73
 
calendar2��recent_list��footnote��amazon�ץ饰�����б���
 
71
春向きのテーマです。
 
72
サイドバー対応。
 
73
calendar2、recent_list、footnote、amazonプラグイン対応。
74
74
</pre>
75
75
 
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>
78
78
 
79
79
<ul>
80
 
        <li>Title: �ơ��ޤΥ����ȥ�Ǥ����ե�����̾�����Ǥ�̣���ʤ��Ȼפä��顢���ι��ܤ�񤤤Ƥ����������ʤ��Ƥ⤫�ޤ��ޤ���</li>
81
 
        <li>Author: ���̾</li>
82
 
        <li>Access: ��Ԥ�Ϣ���衣�᡼�륢�ɥ쥹����URL��</li>
83
 
        <li>License: �饤���󥹡����Ҥ��ʤ�����tDiary��Ʊ��GPL�ˤʤ�ޤ�</li>
84
 
        <li>Comment: ���Υơ��ޤ˴ؤ����ñ������</li>
 
80
        <li>Title: テーマのタイトルです。ファイル名だけでは味気ないと思ったら、この項目を書いてください。なくてもかまいません。</li>
 
81
        <li>Author: 作者名</li>
 
82
        <li>Access: 作者の連絡先。メールアドレスか、URLを</li>
 
83
        <li>License: ライセンス。記述しない場合はtDiaryと同じGPL2になります</li>
 
84
        <li>Comment: このテーマに関する簡単な説明</li>
85
85
</ul>
86
86
 
87
 
<p>�����Τ��Ȥ˶����Ԥ򤢤���С�����ʲ��ˤϲ���񤤤Ƥ⤫�ޤ��ޤ��󡣥쥤�����Ⱦ�Υ��ɥХ����䡢��Ԥλפ�����������������ʤ褦�˻ȤäƤ���������</p>
88
 
 
89
 
<h2>�ơ��ޡ��ƥ��ȥ٥��</h2>
90
 
 
91
 
<p>�ơ��ޤθ��������ǧ���뤿��Ρ��ƥ��ȥ٥��&lt;<a href="http://www.tdiary.org/theme/themebench.rhtml">http://www.tdiary.org/theme/themebench.rhtml</a>&gt;�Ȥ����ڡ���������ޤ��������꡼�Υ����꡼�󥷥�åȤȰۤʤꡢ������Ǥ��͡��ʥ�����Ȥθ������䡢��ɽŪ�ʥץ饰�����ɽ�����ǧ���뤳�Ȥ��Ǥ��ޤ����ơ��޺����������Ѥ��Ƥ���������</p>
 
87
<p>これらのあとに空改行をあければ、それ以下には何を書いてもかまいません。レイアウト上のアドバイスや、作者の思い入れを語る等、好きなように使ってください。</p>
 
88
 
 
89
<h2>テーマ・テストベンチ</h2>
 
90
 
 
91
<p>テーマの見え方を確認するための、テストベンチ&lt;<a href="http://www.tdiary.org/theme/themebench.rhtml">http://www.tdiary.org/theme/themebench.rhtml</a>&gt;というページがあります。ギャラリーのスクリーンショットと異なり、こちらでは様々なエレメントの見え方や、代表的なプラグインの表示を確認することができます。テーマ作成時に利用してください。</p>
92
92
 
93
93
</body>
94
94
</html>