DiaryCGI nicky!ユーザーカスタマイズモード

　　--　目次　--

ユーザーカスタマイズモード
実際にやってみる
ユーザーカスタマイズモードのフォーマット
変数一覧
nicky!とCSS
参考例
注意点

DiaryCGI nicky!
User Customize Mode

HTMLを書ける方向けのカスタマイズモードです

ユーザーカスタマイズモード
nicky!は、HTMLとCGI/Perlを知らない人でも使える日記CGIを目標に開発していましたが、何故か今のnicky!ユーザは強力なメンツ揃いなので（最初のドキュメントとコメントが怖いからだ）日記のHTML出力をユーザーが自由に設定できるモードを追加しました。

なお、コメントフィールドのカスタマイズはこちらを参照してください。
実際にやってみる
実際にやってみましょう。

まず、以下のようにnickyをユーザーカスタマイズモードで呼び出します。
http://設置したURL/nicky.cgi?UserCustom

すると、ユーザーカスタマイズ画面が表示されますので、ここでは画像が無い表示パターンをカスタマイズしてみます。
1. 『画像無し』の『カスタマイズする』をチェックする
  ユーザーカスタマイズ画面の上記チェックボックスをクリックしてチェック印をつけます。
2. HTMLタグを書く
  『1.』のチェックボックスの下にあるテキスト入力エリアに、以下のHTMLをコピー＆ペーストします。
```
<dl>
  <dt>$Title</dt>
  <dd>$Msg</dd>
</dl>
```
3. UserCustomボタンをクリックする
  コピー＆ペーストしたら『UserCustom』ボタンをクリックします。
  ※『UserCustom』ボタンは複数ありますが、どれをクリックしても同じです。
4. 実際に表示させて確認する
  nicky.cgiで画像ファイルのない日記を普通に表示させてみてください。
  『2.』で書いたHTMLに沿った表示ができているはずです。
ユーザーカスタマイズモードのフォーマット
見た通りです。１記事分を出力するHTMLタグと変数を記述すればＯＫ。
『変数』は数学っぽい用語ですが、ここでは数学と関係なく『文字が入っている入れ物』と覚えれば理解完了です。

例えばnicky.cgiでは変数$Titleに日記のタイトルが入っていますので、$Titleと書くと、書いた場所に日記のタイトルが表示されます。

では、上記例では日付が表示されていないので、日付を表示させてみましょう。
nicky.cgiでは、変数$Dateに日付の文字列を入れていますので、例えば上記例の$Titleの直前に$Dateを加えて$Date$Titleと記述し、Customボタンをクリックして日記を表示させてみてください。

日記タイトルの直前に日付が表示されるようになりましたね。

使えそうな変数を以下に並べておきます。

記事本文関連
変数名	格納されている文字
$Date	記事の日付
$Title	記事のタイトル
$Msg	記事本文
$Message	記事本文（エフェクト前）
$year, $month, $day, $week	記事の年、月、日、曜日
$Year, $Month, $Day	『年』『月』『日』の文字
画像関連
変数名	格納されている文字
$ImgLINK	画像リンク表示用HTMLタグ
$ImgTAG	画像表示用HTMLタグ
$GrpPath	画像ファイル相対パス
$w	画像の横幅（単位無し）
$h	画像の縦幅（単位無し）
$wpx	画像の横幅（px単位付き）
$hpx	画像の縦幅（px単位付き）
日記装飾関連（初期設定と連動）
変数名	格納されている文字
$NickyWidth	日記を表示させる画面幅
$TitleBgColor	日記タイトルの背景色
$TSize	タイトルの縦幅
$TitleSize	日記タイトルの文字サイズ
$TitleFontColor	日記タイトルの文字色
$DateSize	日付の文字サイズ
$DateFontColor	日付の文字色
$TitleHead	日記タイトルの先頭に付加する文字
$TitleHeadL	日記タイトルの先頭に付加する文字（リンク反映）
$MsgSize	日記本文の文字サイズ
$MsgColor	日記本文の表示色
$MsgBgColor	日記本文の背景色
$NickyLineWidth	枠線の太さ
$NickyLineSpan	枠線と本文の間隔

補足

画像のサイズについて
画像のサイズには$w/$h(単位無し)と$wpx/$hpx（px単位つき）があります。
例えば400×200の画像ファイルの場合、$w=400, $h=200, $wpx=400px, $hpx=200pxが格納されます。

一応念の為に言及。HTMLの決まりでは、<img>タグ内のwidth/heightは単位をつけずにwidth="400" height="200"のように指定する決まりがあります。 Win系のブラウザではpx単位を付加して指定しても問題無く表示されますが、他機種の一部のブラウザでは、px単位が付加されていると正しく表示されません。

一方、画像をブロック要素で囲む場合のwidth/height指定は、単位を明確に指定しなければ正しく表示されません。このような場合は$wpx/$hpxをご利用ください。

例）画像をセンタリングする場合
```
<div style="width:$wpx;margin:auto;">$ImgLINK$ImgTAG</div>
```

nicky!とCSS
nicky.cgi Ver2004/07/31よりユーザーカスタマイズの要領で変数を指定し、スタイルシートファイルを出力する機能を追加しました。
例えば、
```
.date{color:$DateFontColor;font-size:$DateSize;}
```
と定義すると変数が初期設定で設定された値に置き換わり、以下のような内容のファイルが作成されます。
```
.date{color:#000;font-size:10px;}
```
スタイルシート慣れされていないユーザー向けに付けた機能（将来nicky.cgiがデフォルトで使う予定）なので、無理せず今まで通りにスタイルシートをご利用される事をお勧めします。

スタイルシートファイルの作り方
1. nicky.cgi?editcss とURIを指定する。
  入力枠が表示されるので、オモムロにこんな↓のを記述する。
```
.date{color:$DateFontColor;font-size:$DateSize;}
.title{color:$TitleFontColor;font-size:$TitleSize;}
```
  そしたら『save』ボタンをクリック。
2. スタイルシートを読み込むタグを追加する。
  ヘッダ／フッタボタンクリック→ヘッダ内に以下の１行を追加する。
```
<link rel="stylesheet" href="d.css" type="text/css">
```
ファイルd.cssは、nicky.cgi?editcssもしくは初期設定を実施したタイミングで更新されます。

補足１：使える変数について
上記『変数一覧』の『日記装飾関連』で記されている変数全てがご利用いただけます。

補足２：ヘッダ／フッタの編集でも同様の変数がご利用いただけます

補足３：nicky.cgi?editcssにて作成されるd.cssについて
nicky.cgi?editcss→saveボタンクリック後、ファイルd.cgiに保存→d.cssを作成します。
えーと。つまりd.cssファイルは直接編集なさらないようにお願いします。

補足４：外部スタイルシートファイルについて
スタイルシートを外部ファイルにした場合、スタイルシートのファイルを変更した後、強制リロード（Winの場合は[CTRL]キーを押しながらリロードボタンをクリック）しないと反映されない場合があるようです。これはnicky!に限った現象ではありません。
参考例
叩き台スキンを用意しました。（シンプル版もあります）
注意点
- ブラウザでソースの表示をした時に、改行を入れたい場所には『\n』を記述します。
- 変数は大文字と小文字を区別します。
- 半角の『@』『$』『\』『'』を表示させたい場合は、直前に半角の『\』をつける必要があります。
  例）\@
  
  それと、行末に\を記述するとPerlがエラーを出力します。

(raelian@din.or.jp)