Part2：Wikiを設置してみよう

スキンって何？

　デフォルトのレイアウトでは、出力されたHTMLファイルのソースを読んでみると、<div>～</div>で区切られて大きく7つの部分から成り立っているのがわかります。この構造を作り出しているのがskinファイルです。

　では、理解しやすい①の部分のHTMLソースとskinファイルを見比べながら説明しましょう。skinファイルは「skin/pukiwiki.skin.php」です。

　次に同じ部分のskinファイルを示します。

　skinファイルには<?php ～　?>に囲まれた箇所がたくさんあります。この囲まれた部分がphpスクリプトで、phpインタプリタが逐次解釈して文字列に置き換えていきます。たとえばロゴの画像のリンク先は、<?php echo $link['top'] ?>です。[ ]は配列変数を表しています。配列変数は複数の値を持った変数で、[ ]内のラベルに対応した値を持ちます。このスクリプトの意味は、リンク先URLが入っている配列変数からtopページ（$link['top']）のURLを書き出せ（echo）というものです。同じように、イメージソースは<?php echo IMAGE_DIR. $image['logo'] ?>>で表され、初期設定ファイルで定められたグローバル変数IMAGE_DIR（値は'image/'）とイメージのファイル名が収められた配列変数からロゴ（$image['logo']）のファイル名を繋げて書き出されています。なお、PHPの中での「.」は前後の文字列を繋げるという意味です。

　次に、ページタイトル部分は<?php echo $page ?>でこの$pageに現在出力しているページ名とURLが入っていると理解できます。下のリンク表示を出力するphpスクリプトには制御文が入っていますので詳しい説明は省きますが、「パンくずリスト表示プラグイン」がオンになっていれば、リストから同じページをリロードするように書き出し、オフになっていれば直接プラグインのスクリプトを呼び出しこのページのURLを書き出す（結果は同じ）という意味です。

文字などの詳細を決めるスタイルシート

　さて、よくソースを読んでみると、フォントの大きさや色などの情報が入っていません。
そこでキーとなるのがタグの中にあるidやclassです。これらidやclassで別けられた文字や画像（オブジェクトという）の属性を決める役割をしているのがスタイルシート（CSS：カスケーディングスタイルシート）と呼ばれるものです。スタイルシートの役割を理解しやすいように、上のソースでスタイルシートがある場合（通常）とない場合の対比を次の図に示しました。

　スタイルシートがない場合は単にブロックごとに上から画像や文字が並んでいるだけです。これに対し、スタイルシートがある場合は、細かいレイアウトや文字装飾が加わっています。これがスタイルシートの働きです。skinファイルとスタイルシートで、スキンは成り立っているのです。

　ではスタイルシートを概要を説明しましょう。PukiWikiのデフォルトスキンで使用されているスタイルシートは「skin/pukiwiki.css.php」です。このファイルもPHPスクリプトとなっています。普通スタイルシートはテキストファイル（拡張子は.css）ですが、PukiWikiでは状況に応じて動的にスタイルシートが作り出されるようになっています。では、テキストエディタで開いてみましょう。

　スタイルシートの書式は

となっています。セレクタにはスタイルを適応する対象を指定します。プロパティはセレクタで指定された範囲に適用される属性です。詳しくはスタイルシートの解説書を参照してください。

　header部分を例にとると、下図の①～④にあたる部分が、スタイルシートの<div id="header">～</div>で囲まれた部分で以下のように指定されています。

①（332行目から336行目）

②（443行目から449行目）

③（118行目から125行目）

④（207行目）

　①ではセレクタが「div#header」となっています。これは「idがheaderとされているdiv」という意味です。つまり<div id="header">～</div>にあるすべてのオブジェクトが次に書かれているプロパティを持つということになります。そのプロパティとは、

　　　padding:0px;
　　　margin:0px;

ですので、オブジェクト間のスペースをなしにすることを意味しています。パディングとマージンはほぼ同じ意味合いですが、ブラウザによって解釈の違いがあるので両方の指定となっています。

　②はid="logo"のimgについての記述です。条件文で印刷モードなら表示しないとされていて、その他の場合は以下のように表示されます。

　③のセレクタh1.titleはclass="title"（クラスがtitle）にあるh1（最上位の見出し）という意味です。本例では「FrontPage」と表示されている部分です。プロパティは以下の通りです。

　④のセレクタ.smallは*.smallの省略形で、クラスがsmall（class="small"）のオブジェクトすべてに適応されるという意味です。

　このように文字やイメージの配置や形状など殆どの属性がスタイルシートで指定できることがわかりました。スキンやスタイルシートは奥深いですが、難解というほどでもありません。ブラウザに表示されたレイアウトとそのソース、「skin.php」、「css.php」を見比べていくとその相関関係が見えてくると思います。なお、スタイルシート機能は閲覧者のブラウザ上で動作するので、ブラウザの種類によって若干の表示の差異が存在します。

ロゴを変えてみよう

文字の大きさやフォントを変えてみよう

フリーのスキンをインストールする

　本項では人気のあるirid（ありぃ氏制作）をインストールしてみましょう。iridには3種類のスタイルシートが入っています。どのデザインを使うかは「pukiwiki.skin.php」で指定することになります。

iridのダウンロード

　デスクトップ上でのファイル展開が終わったら、使用するスタイルシートを設定します。展開した「irid」フォルダにある「pukiwiki.skin.php」をテキストエディタで開きます。4行目の

　がスキンを設定するスクリプトです。cloudwalkでよければこのままで、orangeboxの方がよければ

と変更します。文字コードがEUCになっていることを確認し、上書き保存してファイルを閉じます。FTPでpukiwikiがインストールされているディレクトリの「skin/」以下にフォルダごと転送します。

cloudwalk（左）とorangebox（右）。好みに合わせて選択しましょう。

　次にpukiwiki.ini.phpを編集します。86行目の

を、次のように変更します。

　編集したファイルを保存し、元のディレクトリに転送します。これでスキンが適応されました。サーバにアクセスして確認しましょう。

　ここではUNIX系OSを採用したレンタルサーバ用の手順を説明しましたが、WindowsにPukiWikiをインストールしている場合も、同じように行なうことができます。その際も、「pukiwiki.skin.php」の文字コードはEUCにする必要があります。もしShift-JISにするなら、PukiWiki本体の文字コードと設定をすべて変更することになるので注意が必要です。