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>