WhiteBOX設定編/(9)Wiki-skin

Last-modified: 2008-07-02 (水) 11:57:32 (5797d)

Pukiwikiの画面をカスタマイズ †

無事に動いて、コンテンツを書き始めると、画面のそっけなさが、いかにもという感じです。
実は、wikiを公開した時点で既に画面のカスタマイズは半分くらい完了しており、デフォルトの画面イメージは出してませんが、こんな感じだったのです。

同じpukiwikiを使っているサイトへ行くと全く同じイメージで、誰のページかわからんみたいなところが気になってきます。

手っ取り早いカスタマイズで、まずは他人様の作ってくれた skinを使い、それを手直しすることにしました。skinというのは、音楽再生ソフトの画面イメージを変えたりするのによく使われてますが、WWWページの場合は、どちらかといえば「スタイル」と言われてます。
WWWデザインで「スタイルシート」を変えることで、同じコンテンツでも画面イメージが一新しますが、このWikiも見た目は完全に変わっていることが分かると思います。以下は、その変更プロセスを記録したものです。

Pukiwikiの画面をカスタマイズ

irid のインストール †

pukiwiki用のskinもいくつか公開されていています。今回は、ありぃ氏の自作skin「irid」を採用しました。

ダウンロードして、解凍したら、wiki/skin ディレクトリー内にコピーします。

pukiwiki.ini.php の編集

// Skins / Stylesheets
define('SKIN_DIR', 'skin/irid/');

iridは、さらに２種類のスタイルを持っています。これでがらっとイメージが変わりますがが、今回は cloudwalk をベースにしました。オリジナルイメージはこうです。

スタイルを変更する設定は、irid/pikiwiki.skin.php を編集します。
```
// 使用するスタイル
$irid_style_name = "cloudwalk";
```

改造したいところ †

少しかまってみたり、オリジナルと比較すると、いいところや気に入らないところがはっきりしてきます。改造のポイントは以下のようになりました。

イメージの差替え：これはこれで良いけど、オリジナルのイメージを使いたいなぁ。。というわけで、雲を北信五岳の写真に変更しよう
フォント：英数字がどうも気に入らない！オリジナルと同じにしたい
バックカラー：白なので同じに見えるのかな？　というわけで色を付けたい
タイトルや文章のレイアウト：全体に間延びしている！　文字サイズも含めて少し密度を上げたい
メニューバー：もう少し幅を狭くして、文字も小さくしたい

さて、問題はどこを直せばカスタマイズが実現するのでしょうか？！

設定情報はどこに？ †

カスタマイズ画面が用意されているわけではないので、ソースを修正するのしかないのですが、これがなかなかのお仕事になりました。スタイルシートなるものに初めて触れることになったのです。

まず、設定ファイルの構成を見てみると

cloudwalk/
   +-- cloudwalk.css         　[スタイルシート本体]
   +-- color.cloudwalk.css　 　[カラーシート]
   +-- cloudwalk.jpg　　　　 　[トップのイメージ]
   +-- sky1.jpg　　　　　　　　[サイドバーのイメージ1]
   +-- sky2.jpg　　　　　　　　[サイドバーのイメージ2]

cloudwalk.css の中身はといえば、別のskin：orangeboxのスタイルシートをimportしており、カラー設定だけがオリジナルであることが分かります。
```
@import url("../orangebox/base_3float.css");
@import url("../orangebox/plugin.css");
@import url("color_cloudwalk.css");
```

ここから先は、もう試行錯誤の力仕事でした(^^;)　各ファイルのパラメータを一つずつ変えてみて画面の様子を見て、機能をチェックしながら仕上げていきました。

実際の修正内容のポイント †

改造したいポイントに対応した修正個所は以下のとおりです。
1. イメージの差替え
  　ファイル構成で見たとおり、3つのファイルがあります。基本的には、これを差し替えればOKでした。なお、イメージのサイズ(ピクセル数)はオリジナルに合わせたほうが間違いないです。また、sky1とsky2はサイドバー用ですが、上から、sky1、sky2、sky1 の順で貼り付けられています。　color_cloudwalk.css にファイル名が記述されているので、ここを変更するという手もありました。
2. 本文のフォントやレイアウト
  　フォントタイプやフォントサイズなど文字に関する設定は、base_3float.css にありました。これを、少しずつ直しながら、決めました。
```
body{
        font-size:14px; 　　　　/* フォントサイズ デフォルト15px */
        font-family:verdana, arial, helvetica, Sans-Serif;
　　　　　　　　　　　　　　　　/* フォント種類 デフォルト無し */

div#body{
       line-height:1.3em; 　　　/* 行間  デフォルト 1.5em */
```
3. バックカラー
  　全体の文字色や背景色設定は、color_cloudwalk.css にありました。
```
body{
      color:#000;                 /*文字色*/
      background-coloro:#eeffff;　/*背景色　デフォルトは #ffffff(白) */
```
4. メニューバー
  　メニューバーを細くしたいのですが、その比率設定は　base_3float.css にありました。デフォルトは 20%-80% でしたので、5%減増してみました。
```
div#wrap_content{
        float:right;
        width:85%;         　　 /* デフォルト80% */
/*      min-width:74%;*/
}
div#wrap_sidebar{
        float:left;
        width:15%;　　　　　　　/* デフォルト 20% */
}
```
  ただ、これだけでは、メニューバーのフォントが大きくて収まりが悪いので、サイズ変更をしたい。ところが、これは苦労した(^^;)　結論的には、同じファイル base_3float.css でしたが、もともと記述がなかったからでした。
```
#sidebar,
#subbar{
        overflow:hidden;
        font-size:13px; 　　　　/* 追加した！ */
}
```

細かいところは略してありますが、だいたいこんな形でカスタマイズ作業を進めました。　　出来上がりはたいしたことではないのですが、まぁ、少しは独自イメージになったかなぁ。
おまけですが、これをきっかけにスタイルシートに、ちっとだけ目覚めました(^^)　これからコマンド関係を少しずつ勉強してみたいと思います。(2005/2/27)

添付ファイル:

wiki_org_skin.jpg 1165件 [詳細]

irid_cloudwalk.jpg 1449件 [詳細]