OSDN Git Service

表記統一版
[nucleus-jp/nucleus-jp-ancient.git] / utf8 / nucleus / documentation / skins.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP" xml:lang="ja-JP">
3 <head>
4         <!-- $Id: skins.html,v 1.6 2007-02-04 06:28:45 kimitake Exp $ -->
5         <!-- $NucleusJP: skins.html,v 1.5 2006/07/12 07:11:46 kimitake Exp $ -->
6         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
7         <title>Nucleus - スキンとテンプレートについて</title>
8         <link rel="stylesheet" type="text/css" href="styles/manual.css" />
9 </head>
10 <body>
11
12 <div class="heading">
13 スキン &amp; テンプレート
14 </div>
15
16 <h1>Introduction</h1>
17
18 <p>
19 <a href="index.html">Nucleusマニュアルに戻る</a>
20 </p>
21
22 <p>Nucleusのインストールは無事完了したと思います。ここでは、ページ表示を定義するスキン/テンプレートの編集について説明をしたいと思います:</p>
23 <ol>
24         <li>標準でインストールされるスキン/テンプレートの編集画面に入ります(又はこれを複製した物を編集すればいつでも標準表示に戻れます)</li>
25         <li>標準でインストールされるスキン/テンプレートを元に、希望通りの修正を行います</li>
26         <li>自分で編集したスキン/テンプレートを元に、スタイルシートを定義します</li>
27 </ol>
28 <p>このドキュメントは、これらの作業を行うにあたりヒントになる事項を紹介します。</p>
29
30 <h1><a id="toc"></a>目次</h1>
31
32 <ul>
33         <li><a href="#htmlcss">HTMLとCSSの関係について</a></li>
34         <li><a href="#defaultskin">標準のデザインで使用するファイル</a></li>
35         <li><a href="#templatesvsskins">テンプレートとスキンの相互関係</a></li>
36         <li><a href="#skincascade">適用されるスキンの優先順位</a></li>
37         <li>Howto:
38                 <ul>
39                         <li><a href="#howto-additem">「アイテムの追加」フォームの埋込み方法</a></li>
40                         <li><a href="#howto-cssforms">入力フォームのデザインを定義するスタイルシート情報</a></li>
41                         <li><a href="#howto-karma">投票機能を有効にする方法</a></li>
42                         <li><a href="#howto-edit">「アイテムの編集」リンクの設置</a></li>
43                 </ul>
44         </li>
45         <li><a href="#export">スキン/テンプレートのインポート/エクスポートについて</a></li>
46 </ul>
47
48 <h1>HTMLとCSSの関係について <a id="htmlcss" href="#top" class="toplink"><img src="icon-up.gif" width="15" height="15" alt="back to top" /></a></h1>
49
50 <p>
51 スキンとテンプレートを編集するにあたっては、HTMLとCSSの基礎知識が必要です。このセクションでは基礎知識を得る事ができる解説サイトを紹介しておきます。
52 </p>
53
54 <ul>
55         <li><a href="http://www.w3schools.com/">W3Schools</a>: online web building tutorials (HTML, XHTML, CSS)</li>
56         <li><a href="http://thenoodleincident.com/tutorials/css/">CSS Panic Guide</a>: links to various CSS resources</li>
57         <li><a href="http://hotwired.lycos.com/webmonkey/authoring/html_basics/index.html">Webmonkey: HTML Basics</a></li>
58         <li><a href="http://hotwired.lycos.com/webmonkey/authoring/stylesheets/">Webmonkey: Stylesheets</a></li>
59         <li><a href="http://diveintoaccessibility.org">Dive Into Accessibility</a>: Online book, not really about HTML, but about accessibility and how to make your site more accessible.</li>
60 </ul>
61
62
63
64
65
66
67
68 <h1>標準のデザインで使用するファイル <a id="defaultskin" href="#top" class="toplink"><img src="icon-up.gif" width="15" height="15" alt="back to top" /></a></h1>
69
70 <p>このセクションでは、標準のスキンで使用しているファイル名と、編集の注意点を説明します。</p>
71
72 <p>標準のスキンは以下の3つのファイルを使用しています:</p>
73 <ol>
74         <li><tt>default.css</tt> (v3.0は <tt>grey.css</tt>): ページのデザインを定義するCSS(カスケーディング・スタイルシート)ファイル。色指定やレイアウト指定などを定義します。</li>
75         <li><tt>atom.gif</tt>: ページの左上に表示されるロゴ。</li>
76         <li><tt>nucleus2.gif</tt>: Nucleus ロゴ。</li>
77 </ol>
78
79 <p>CSSファイル (<tt>default.css</tt> / <tt>grey.css</tt>) には、標準のスキン/テンプレートを使用した際のページ構成(ブロック構造)を書き入れています。 基本的には<tt>.contents</tt>、 <tt>.logo</tt>、<tt>.menu</tt>の3つのdivブロックとなっています。</p>
80
81 <p><tt>default.css</tt> / <tt>grey.css</tt>を編集するにあたっては、テキストエディタを使用してください。 例えばWindowsに標準添付されている「Notepad」やemacs や TextPadなどです。
82 「WordPad」、「Word」、「OpenOffice Writer」などは余計なデータが混入しますので、<strong>絶対に使用しないでください</strong>。
83 </p>
84
85
86
87
88
89
90 <h1>テンプレートとスキンの相互関係 <a id="templatesvsskins" href="#top" class="toplink"><img src="icon-up.gif" width="15" height="15" alt="back to top" /></a></h1>
91
92 <p>
93 Nucleusではページ表示に「スキン」と「テンプレート」の両方を使用します。ではこれら2つの違いは何でしょう?
94 </p>
95
96 <ol>
97         <li>
98                 <b>スキン</b> とは出力する内容(タグを含むソース)を定義するものです。1つのスキンでもいくつかの種別ごとに定義が必要で、メインページや個別アイテムページ、アーカイブページなど(標準で8タイプ)があります。
99                 スキン内の定義内容は、どの部分にblogデータを展開するのか、どのテンプレートを使用して展開するのかなどの指定を含みます。
100         </li>
101         <li>
102                 <b>テンプレート</b>とは、blogデータを展開するのに使われるひな形です。スキン内で指定されたテンプレートをひな形に、blogデータが指定された場所に出力されるのです。もちろん、複数のスキンで1つのテンプレートを使い回しすることもできますし、逆に1つのページに複数のテンプレートを使用するケースもあります。
103         </li>
104 </ol>
105
106 <p>下のサンプル画像をご覧下さい。ページ全体のソースはスキンで定義しています。その中の赤点線で囲った部分(カテゴリリストとblog記事)はテンプレートをひな形にして展開されたデータ部分です。この赤点線部分をどこに出力させるのかはスキンの方で指定しています。</p>
107
108 <div class="screenshot">
109 <img src="pics/skinsandtemplates.png" width="300" height="283" alt="Skins and Templates example" />
110 </div>
111
112
113
114
115
116
117
118
119
120 <h1>適用されるスキンの優先順位 <a id="skincascade" href="#top" class="toplink"><img src="icon-up.gif" width="15" height="15" alt="back to top" /></a></h1>
121
122 <p>
123 このセクションではページ表示に使うスキンを設定する方法を説明します。
124 </p>
125
126 <h2>スキンのタイプ</h2>
127
128 <p>
129 まず最初に、スキンタイプの種別について紹介しておきます。NucleusはアクセスされたURLを元に表示するスキンタイプを判別してページ表示に使います。下記が種別のリストです。(実際のURLは状況に応じて他のクエリが付加され、様々に変化します。)
130 </p>
131
132 <table>
133         <tr><th>クエリ文字列</th><th>スキンの種別</th><th>表示される記事</th></tr>
134         <tr><td>?itemid=..</td><td>item(個別アイテム)</td><td>指定された<i>itemid</i>の記事</td></tr>
135         <tr><td>?archive=..</td><td>archive(アーカイブ)</td><td>標準のblog記事、又は<i>blogid</i>で指定されたblog記事(の該当記事)</td></tr>
136         <tr><td>?archivelist=...</td><td>archivelist(アーカイブリスト)</td><td>指定された<i>archivelist</i>のblog記事(のリスト)</td></tr>
137         <tr><td>?archivelist</td><td>archivelist(アーカイブリスト)</td><td>標準のblog記事(のリスト)</td></tr>
138         <tr><td>?query=...</td><td>search(検索)</td><td>標準のblog記事、又は<i>blogid</i>で指定されたblog記事(の該当記事)</td></tr>
139         <tr><td>?memberid=..</td><td>member(メンバー)</td><td>なし</td></tr>
140         <tr><td>?imagepopup=..</td><td>imagepopup(ポップアップ画像)</td><td>なし (画像のみ表示するポップアップ・ウィンドウ)</td></tr>
141         <tr><td><i>(その他 又は クエリなし)</i></td><td>index(メイン)</td><td>標準のblog記事、又は<i>blogid</i>で指定されたblog記事</td
142         ></tr>
143 </table>
144
145 <p>
146 これら7つのタイプに併せて、エラーの場合に使われる <i>error</i> タイプがあります。
147 </p>
148
149 <h2>スキンの補完適用</h2>
150
151 <p>
152 上の表において、それぞれのケースで選択適用するblogがどれになるかを併せて説明しています。
153 表示に使用するスキンは、blog設定で設定した「標準のスキン」です。
154 </p>
155
156 <p>
157 新しくスキンを作成する際はすべてのスキンタイプを定義する必要はありません。選択適用するスキンタイプが定義されていない場合は、グローバル設定において設定した「標準のスキン」を代替適用します。(下記参照)。つまり、エラーページのスキンタイプだけを定義したスキンを使用するといったことが可能な訳です。
158 </p>
159
160 <h2>標準のスキン</h2>
161
162 <p>
163 Nucleus は「標準のスキン」が必ず必要です。この標準のスキンは、スキンタイプ定義が見あたらない場合の補完表示に使われるからです。もし、標準のスキンにおいても適用すべきスキンタイプの定義が見あたらない場合は、エラーメッセージが表示されてしまいます。
164 </p>
165
166 <p>
167 また、指定されたblogが見あたらない場合は、適用するスキンのblog設定そのものが存在しませんから、エラーメッセージを表示するためのページデザインとして「標準のスキン」がかならず必要なのです。
168 </p>
169
170
171
172
173
174
175
176
177 <h1>Howto: 「アイテムの追加」フォームの埋込み方法 <a id="howto-additem" href="#top" class="toplink"><img src="icon-up.gif" width="15" height="15" alt="back to top" /></a></h1>
178
179 <p>
180 Nucleus ではblogページに新規投稿フォームを埋め込む機能を設けています。「新規投稿」リンクをページ内のどこかに作り、このリンクをクリックすると新規投稿フォームの表示/非表示の切り替えができます。 このフォームに入力後プレビュー機能が使えますので、どのように記事が表示されるかを瞬時に確認できて便利です。
181 </p>
182
183 <p>
184 方法は、「メインの目次ページ」を編集するだけです。テンプレートの編集は必要ありません。
185 </p>
186
187 <h2>1. JavaScript コードの呼出し</h2>
188 <p>
189 まず最初に、edit.jsをページ上に呼び出すコードを追加します。&lt;head&gt; と &lt;/head&gt; タグの間のどこかに下のコードを追加して下さい。このファイルを呼び出す事によって新規投稿のプレビュー機能とフォームの表示/非表示切替え機能が有効になります。
190 </p>
191
192 <pre>
193 &lt;script type="text/javascript"
194         src="nucleus/javascript/edit.js"&gt;&lt;/script&gt;
195 </pre>
196
197 <h2>2. 新規投稿フォームを埋め込む場所を指定</h2>
198
199 <p>
200 新規投稿フォームを埋め込みたい場所に追加します。"display:none;"は必ず間違えずに記述してください。
201 </p>
202
203 <pre>
204 &lt;div id="edit" style="display:none;"&gt;
205 ...
206 &lt;/div&gt;
207 </pre>
208
209 <h2>3. 入力フォームとプレビューエリアを埋め込むコードを追加</h2>
210
211 <p>
212 次に、このdivブロックの中に入力フォームとプレビューエリアを埋め込むコードを追加します。入力フォームは&lt;%additemform%&gt; と、プレビューエリアは &lt;%preview(<i>テンプレート名</i>)%&gt;と書く事によってそこに展開されます。あとは好きなコードを追加してください。 例えば次のように書きます。
213 </p>
214
215 <pre>
216 &lt;h2&gt;Add Item&lt;/h2&gt;
217 &lt;%additemform%&gt;
218
219 &lt;h2&gt;Preview&lt;/h2&gt;
220 &lt;%preview(mytemplate)%&gt;
221 </pre>
222
223 <h2>4. 新規投稿リンクの追加</h2>
224 <p>
225 最後に、このエリアを表示/非表示させるための切替えリンクをどこか別の場所に追加します。サンプルとして2つのコードを紹介しておきます。</p><p>1つめはシンプルなタイプ:
226 </p>
227
228 <pre>
229 &lt;a href="javascript:showedit();"&gt;add item&lt;/a&gt;
230 </pre>
231
232 <p>
233 2つ目はページ左上隅に切替えリンクを配置するタイプ:
234 </p>
235
236 <pre>
237 &lt;div style="position: absolute; left: 0px;
238             top: 0px; width: 10px; height: 10px"
239      onclick="javascript:showedit();"&gt;
240 &lt;/div&gt;
241 </pre>
242
243
244
245
246
247
248 <h1>Howto: 入力フォームのデザインを定義するスタイルシート情報 <a id="howto-cssforms" href="#top" class="toplink"><img src="icon-up.gif" width="15" height="15" alt="back to top" /></a></h1>
249
250 <p>
251 例えばスキン内に。 &lt;%searchform%&gt; や &lt;%commentform%&gt; と記述することによって、それぞれ検索フォームやコメント投稿フォームに置き換えられてページ内に表示されます。これらの入力フォームやボタンや入力フォーム領域には標準でクラス名が定義されていますので、cssファイル内でクラスの定義をすればスタイルの変更が可能です。</p>
252
253 <p>
254 入力フォーム領域のクラス名は下記のように指定されています。クラス名はフォーム全体を囲ったdivブロックを修飾しています。
255 </p>
256
257 <table>
258         <tr>
259                 <th>フォームの種類</th>
260                 <th>記述コード</th>
261                 <th>CSS クラス名</th>
262         </tr>
263         <tr>
264                 <td>新規投稿フォーム</td>
265                 <td>&lt;%additemform%&gt;</td>
266                 <td>.blogform</td>
267         </tr>
268         <tr>
269                 <td>コメント投稿フォーム</td>
270                 <td>&lt;%commentform%&gt;</td>
271                 <td>.commentform</td>
272         </tr>
273         <tr>
274                 <td>ログインフォーム</td>
275                 <td>&lt;%loginform%&gt;</td>
276                 <td>.loginform</td>
277         </tr>
278         <tr>
279                 <td>検索フォーム</td>
280                 <td>&lt;%searchform%&gt;</td>
281                 <td>.searchform</td>
282         </tr>
283         <tr>
284                 <td>メンバー間のメール送信フォーム</td>
285                 <td>&lt;%membermailform%&gt;</td>
286                 <td>.mailform</td>
287         </tr>
288 </table>
289
290 <p>
291 ボタンと入力フォームのクラス名は以下のように指定しています。
292 </p>
293
294 <table>
295         <tr>
296                 <th>タイプ</th>
297                 <th>CSS クラス名</th>
298         </tr>
299         <tr>
300                 <td>単行/複数行のテキスト入力フィールド</td>
301                 <td>.formfield</td>
302         </tr>
303         <tr>
304                 <td>ボタン</td>
305                 <td>.formbutton</td>
306         </tr>
307 </table>
308
309 <p>
310 スタイルシート内で実際にこれらを定義するサンプルです:
311 </p>
312
313 <pre>
314 /* applies to all input fields */
315 .formfield {
316   background-color: gray;
317 }
318
319 /* only applies to buttons for comment forms */
320 .commentform .formbutton {
321   border: 1px solid #000;
322   background-color: #ddd;
323   color: #000;
324   font-size: xx-large;
325 }
326 </pre>
327
328 <p>上のサンプルでは、Nucleusが自動生成するテキスト入力フィールドの全部が「 背景色 = 濃灰色 」で、コメント投稿フォーム内のボタンだけが「 文字サイズ = 大 / 四辺 = 黒色の1ピクセルの太さの線 / 文字色 = 黒 / 背景色 = 淡灰色 」とする、と定義しています。</p>
329
330
331 <h1>Howto: 投票機能を有効にする方法 <a id="howto-karma" href="#top" class="toplink"><img src="icon-up.gif" width="15" height="15" alt="back to top" /></a></h1>
332
333 <p>標準添付のスキン/テンプレートでは投票機能を表示させていません(使わない方がよいのかもしれません)。ここでは投票機能が表示されるようにテンプレートを書換える方法を紹介します。</p>
334
335 <h2>1. 表示に使用する「メインの目次ページ」タイプで指定したテンプレートの編集画面を開く</h2>
336
337 <p><tt>'default'</tt> ( v3.0では <tt>'grey/short'</tt> ) という名前のテンプレートの編集画面を開きます。(このテンプレート名はあくまでも新規インストール直後の状態で適用されているものです。複製や新規作成などにより変更している場合は読み替えてください。)</p>
338
339 <h2>2. アイテムの本体部分の書換え</h2>
340
341 <p>アイテムの本体部分の最後の方を以下のように書換えます:</p>
342
343 <pre>
344 &lt;div class="iteminfo"&gt;
345   &lt;%time%&gt; -
346   &lt;a href="&lt;%authorlink%&gt;"&gt;&lt;%author%&gt;&lt;/a&gt; -
347   karma: &lt;%karma%&gt;
348     [&lt;a href="&lt;%karmaposlink%&gt;"&gt;+&lt;/a&gt;/&lt;a href="&lt;%karmaneglink%&gt;"&gt;-&lt;/a&gt;] -
349   &lt;%edit%&gt;
350   &lt;%comments%&gt;
351 &lt;/div&gt;
352 </pre>
353
354 <p>編集後にメインページにアクセスすると記事詳細情報が下のように表示が変更されているのが確認できると思います:</p>
355
356 <div><i>9:00:39 PM - <a href="">God</a> - karma: 5 [<a href="">+</a>/<a href="">-</a>] - <a href="">edit</a></i></div>
357
358 <h2>3. アイテムの個別ページのテンプレート</h2>
359
360 <p>上記の編集作業ではメインページでのみ投票スコアが表示される状態です。アイテムの個別ページでも同様に投票を表示したい場合は、スキンの「アイテムの個別ページ」で使用しているテンプレートに同様の修正を行ってください。新規インストール直後の状態では<tt>'detailed'</tt> ( v3.0では <tt>'grey/full'</tt> ) という名前のテンプレートがそれに該当します。</p>
361
362
363
364
365
366
367 <h1>Howto: 「アイテムの編集」リンクの設置 <a id="howto-edit" href="#top" class="toplink"><img src="icon-up.gif" width="15" height="15" alt="back to top" /></a></h1>
368
369 <p>Nucleus標準添付のスキンでは記事の編集権限を持つユーザーにだけ表示される「アイテムの編集」リンクを埋め込んでいます。 ここではどこでそのリンクを埋め込んでいるのかを説明します。</p>
370
371 <h2>「アイテムを編集するためのリンク」の表示の設定</h2>
372
373 <p>テンプレートの編集画面の「アイテムを編集するためのリンク」部分でアイテムの編集リンクの表示を定義しています。 標準添付のテンプレートでは以下のように定義しています:</p>
374 <pre><code>&lt;a href="&lt;%editlink%&gt;" onclick="&lt;%editpopupcode%&gt;"&gt;edit&lt;/a&gt;</code></pre>
375
376 <p>ポップアップ編集画面ではなく管理エリアの記事編集画面を使いたい場合は次のように修正してください:</p>
377
378 <pre><code>&lt;a href="nucleus/index.php?action=itemedit&amp;amp;itemid=&lt;%itemid%&gt;"&gt;edit&lt;/a&gt;
379 </code></pre>
380
381 <h2>「アイテムの編集」リンクを表示する場所の指定</h2>
382
383 <p>表示形式を決めたら、次にどこにこれを表示するのかを設定します。通常なら「アイテムの本体」の中に<code>&lt;%edit%&gt;</code>と記述します。この<code>&lt;%edit%&gt;</code>の部分が上で設定した表示形式に置き換えられてコードが自動生成されます。</p>
384
385 <p>「アイテムの本体」の中の記述例は <a href="#howto-karma">投票機能を有効にする方法</a> を参照してください。</p>
386
387
388
389
390 <h1>スキン/テンプレートのインポート/エクスポートについて <a id="export" href="#top" class="toplink"><img src="icon-up.gif" width="15" height="15" alt="back to top" /></a></h1>
391
392 <p>バージョンv2.0以降からスキンとテンプレートをインポート/エクスポートする機能が追加されています。ここでは、スキンを作成する手順を追ってその機能をわかりやすく説明したいと思います。</p>
393
394 <h2>新規スキンの作成</h2>
395
396 <ol>
397         <li>
398                 <p>まず管理エリアにてスキンを新規作成します。管理エリアに入り、「スキンの編集」画面の一番下にある「新しいスキン」の所に入力します。ここでは例として名前を「<strong>vista</strong>」とします。</p>
399         </li>
400         <li>
401                 <p>スキンの一覧にこの「vista」という名前のスキンが追加されていますので、その行の右横「編集」リンクをクリックして編集画面に入ります。content type は 「<code>text/html</code>」としてください。 これから説明する作業を行うにあたって必要な設定となりますので、よく確認して設定してください。</p>
402                 <p>さらにその下の <code>Include モード</code> と <code>Include プリフィックス</code> もよく注意して設定してください。スキンを移植したり配布したりする事を考えて、デザインに使用する画像やcssファイルなどは1つのディレクトリの中に格納しておく事とします。 </p>
403                  <p><code>Include モード</code> と <code>Include プリフィックス</code> が適用される仕組みを簡単に説明しておきましょう。<code>config.php</code>で定義している「<code>$DIR_SKINS</code>」の値と、管理エリアのグローバル設定の中で設定している「<code>スキンURL</code>」が関連してきます。
404                  例えばそれぞれ以下のような値になっているとします:</p>
405                 <pre><code>/home/user/example/htdocs/skins/
406 http://example.org/skins/</code></pre>
407                 <p>この設定を準用してデザインに使用する画像やcssファイルなどを格納するディレクトリを次のように設定させます</p>
408                 <pre><code>/home/user/example/htdocs/skins/vista/
409 http://example.org/skins/vista/</code></pre>
410                 <p>このように準用適用させる設定が<code>Include モード</code>です。準用させるためには<code>Include モード</code>を「<strong>skindirを使う</strong>」にしてください。</p>
411                 <p>さらに <strong><code>Include プリフィックス</code></strong> は 「<strong>vista/</strong>」と入力してください。</p>
412                 <p>この画面の設定:</p>
413                 <ul>
414                         <li><strong>名前</strong>: vista</li>
415                         <li><strong>Content Type</strong>: text/html</li>
416                         <li><strong>Include モード</strong>: skindirを使う</li>
417                         <li><strong>Include プリフィックス</strong>: vista/</li>
418                 </ul>
419         </li>
420 </ol>
421
422 <h2>スキンの編集</h2>
423
424 <p>スキン内に記述するコードのうち、<code>include</code> と <code>phpinclude</code> と <code>parsedinclude</code>で読み込むファイルの場所指定に、この「<code>Include モード</code>」 と 「<code>Include プリフィックス</code>」の設定が適用されます。また、このほかに<code>skinfile</code>という記述コードでもこれらの設定を読み込んでURLの自動生成が行われます。</p>
425
426 <p>例えばスキン内に以下のように記述したとします:</p>
427
428 <pre><code>&lt;%skinfile(myFile.jpg)%&gt;</code></pre>
429
430 <p>これはページ生成時に以下のように自動変換されます:</p>
431
432 <pre><code>http://example.org/skins/vista/myFile.jpg</code></pre>
433
434 <p>仕組みの説明はこのくらいにして、実際にスキンを編集してみましょう。<code>vista/</code> ディレクトリの中に「<code>pagefoot.inc</code>」 と 「<code>pagehead.inc</code>」 という名前の2つのファイルを作成して、これらのファイルを使い回す事によって作業効率を上げる方法をご紹介します:</p>
435
436 <h3>pagehead.inc</h3>
437
438 <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
439 &lt;html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
440 &lt;head&gt;
441         &lt;title&gt;My Site&lt;/title&gt;
442         &lt;link rel="stylesheet" type="text/css" href="&lt;%skinfile(layout.css)%&gt;" /&gt;
443 &lt;/head&gt;
444 &lt;body&gt;
445
446 &lt;div id="contents"&gt;</code></pre>
447
448 <h3>pagefoot.inc</h3>
449
450 <pre><code>&lt;/div&gt;&lt;!-- contents div end --&gt;
451
452 &lt;div id="stuffbar"&gt;
453         &lt;h2&gt;Navigation&lt;/h2&gt;
454
455         &lt;ul&gt;
456                 &lt;li&gt;&lt;a href="&lt;%todaylink%&gt;"&gt;Today&lt;/a&gt;&lt;/li&gt;
457                 &lt;li&gt;&lt;a href="&lt;%archivelink%&gt;"&gt;Archives&lt;/a&gt;&lt;/li&gt;
458         &lt;/ul&gt;
459
460         &lt;h2&gt;About&lt;/h2&gt;
461
462         &lt;ul&gt;
463                 &lt;li&gt;&lt;a href="http://www.nucleuscms.org/"&gt;Nucleus&lt;/a&gt; Power!&lt;/li&gt;
464         &lt;/ul&gt;
465 &lt;/div&gt;&lt;!-- stuffbar end --&gt;
466
467 &lt;/body&gt;
468 &lt;/html&gt;</code></pre>
469
470 <p>このような共通して使えるコードを書いたファイルを使い回します: (上のサンプルは重要な部分だけを抜粋した物です。実際に使用する際は標準添付のスキンを参考に、もっとたくさんのコードを書き込んだ方が良いでしょう。)</p>
471
472 <h3>メインの目次ページ</h3>
473 <pre><code>&lt;%parsedinclude(pagehead.inc)%&gt;
474
475 &lt;h1&gt;My Blog&lt;/h1&gt;
476
477 &lt;%blog(vista/main,10)%&gt;
478
479 &lt;%parsedinclude(pagefoot.inc)%&gt;</code></pre>
480
481 <h3>アイテムの個別ページ</h3>
482
483 <pre><code>&lt;%parsedinclude(pagehead.inc)%&gt;
484
485 &lt;h1&gt;My Blog&lt;/h1&gt;
486
487 &lt;h2&gt;Item&lt;/h2&gt;
488 &lt;%item(vista/detailed)%&gt;
489
490 &lt;h2&gt;Comments&lt;/h2&gt;
491 &lt;%comments(vista/detailed)%&gt;
492
493 &lt;h2&gt;Add Comment&lt;/h2&gt;
494 &lt;%commentform%&gt;
495
496 &lt;%parsedinclude(pagefoot.inc)%&gt;</code></pre>
497
498 <p>上のサンプルでは使用するテンプレート名を「<strong>vista/main</strong>」 、 「<strong>vista/detailed</strong>」と指定していることに注意してください。テンプレート名はスキン名と揃えて置いた方が後々編集する時にわかりやすくて便利です。単純に標準添付の 「<strong>default</strong>」 と 「<strong>detailed</strong>」(v3.0 では「<strong>grey/short</strong>」 と 「<strong>grey/full</strong>」) をそれぞれ複製して名前を付け替えただけの物でも構いません。</p>
499
500 <h3>アーカイブ一覧ページ</h3>
501
502 <pre><code>&lt;%parsedinclude(pagehead.inc)%&gt;
503
504 &lt;h1&gt;My Blog&lt;/h1&gt;
505
506 &lt;%archivelist(vista/main)%&gt;
507
508 &lt;%parsedinclude(pagefoot.inc)%&gt;</code></pre>
509
510 <h3>アーカイブページ</h3>
511
512 <pre><code>&lt;%parsedinclude(pagehead.inc)%&gt;
513
514 &lt;h1&gt;My Blog&lt;/h1&gt;
515
516 &lt;%archive(vista/main)%&gt;
517
518 &lt;%parsedinclude(pagefoot.inc)%&gt;</code></pre>
519
520 <h2>スキンをエクスポートする</h2>
521
522 <p>これでvistaスキンのできあがりです。では、このスキンをエクスポートしてみましょう。管理エリアの「スキンのインポート/エクスポート」画面に入り、以下の作業を行います:</p>
523
524 <ol>
525         <li>書き出すスキン/テンプレートを選択するリストの中から「vista」、「vista/detailed」、「vista/main」の3つを選択してください。</li>
526         <li>その下の「追加情報」欄にこれから書き出すスキン/テンプレートについての説明書きを(必要ならば)入力し、<code>選択されたスキン/テンプレートを書き出し</code> ボタンを押します。 Nucleusにて「<code>skinbackup.xml</code>」の自動作成が行われます。</li>
527         <li>この「<code>skinbackup.xml</code>」ファイルを保存し、<code>vista/</code>ディレクトリの中に他の画像ファイルなどと一緒に格納してください。</li>
528         <li>この<code>vista/</code>ディレクトリごとzipファイルなどに圧縮します。</li>
529         <li>これでスキンパッケージのできあがりです。この圧縮ファイルを配布するだけでデザインの配布ができます。</li>
530 </ol>
531
532 <h2>スキンをインポートする</h2>
533
534 <p>スキンをインポートするには、上と逆の手順を踏みます:</p>
535
536 <ol>
537         <li>圧縮ファイルを解凍して生成されたディレクトリ(<code>vista/</code>)をサーバのスキンディレクトリ内に配置します(ひとつのスキンで1つのディレクトリを使用します)。</li>
538         <li>管理エリアの「スキンのインポート/エクスポート」画面にて、ドロップダウンリストから「vista」を選択し、「読み込み」ボタンを押します。</li>
539         <li>表示される説明に従います。(すでに同じ名前のスキン/テンプレートが存在する場合はその旨の警告が出ますので、上書きしたい場合は「既に存在するスキンを上書きする (ぶつかるスキン名を参照) 」のチェックを入れてから読み込むボタンを押せば上書きされます。)</li>
540         <li>これでスキンの読込みは完了です。ページ表示に使用したい場合はblog設定でこのスキン名を選択すれば適用されます。</li>
541 </ol>
542
543 </body>
544 </html>