-- 目次 -- |
DiaryCGI nicky! User Customize Mode |
HTMLを書ける方向けのカスタマイズモードです
nicky!は、HTMLとCGI/Perlを知らない人でも使える日記CGIを目標に開発していましたが、何故か今のnicky!ユーザは強力なメンツ揃いなので(最初のドキュメントとコメントが怖いからだ)日記のHTML出力をユーザーが自由に設定できるモードを追加しました。
なお、コメントフィールドのカスタマイズはこちらを参照してください。
実際にやってみましょう。
まず、以下のようにnickyをユーザーカスタマイズモードで呼び出します。
http://設置したURL/nicky.cgi?UserCustom
すると、ユーザーカスタマイズ画面が表示されますので、ここでは画像が無い表示パターンをカスタマイズしてみます。
ユーザーカスタマイズ画面の上記チェックボックスをクリックしてチェック印をつけます。
『1.』のチェックボックスの下にあるテキスト入力エリアに、以下のHTMLをコピー&ペーストします。
<dl> <dt>$Title</dt> <dd>$Msg</dd> </dl>
コピー&ペーストしたら『UserCustom』ボタンをクリックします。
※『UserCustom』ボタンは複数ありますが、どれをクリックしても同じです。
nicky.cgiで画像ファイルのない日記を普通に表示させてみてください。
『2.』で書いたHTMLに沿った表示ができているはずです。
見た通りです。1記事分を出力するHTMLタグと変数を記述すればOK。
『変数』は数学っぽい用語ですが、ここでは数学と関係なく『文字が入っている入れ物』と覚えれば理解完了です。
例えば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.cgi Ver2004/07/31よりユーザーカスタマイズの要領で変数を指定し、スタイルシートファイルを出力する機能を追加しました。
例えば、
.date{color:$DateFontColor;font-size:$DateSize;}
と定義すると変数が初期設定で設定された値に置き換わり、以下のような内容のファイルが作成されます。
.date{color:#000;font-size:10px;}
スタイルシート慣れされていないユーザー向けに付けた機能(将来nicky.cgiがデフォルトで使う予定)なので、無理せず今まで通りにスタイルシートをご利用される事をお勧めします。
スタイルシートファイルの作り方
入力枠が表示されるので、オモムロにこんな↓のを記述する。
.date{color:$DateFontColor;font-size:$DateSize;} .title{color:$TitleFontColor;font-size:$TitleSize;}
そしたら『save』ボタンをクリック。
ヘッダ/フッタボタンクリック→ヘッダ内に以下の1行を追加する。
<link rel="stylesheet" href="d.css" type="text/css">
ファイルd.cssは、nicky.cgi?editcssもしくは初期設定を実施したタイミングで更新されます。
補足1:使える変数について
上記『変数一覧』の『日記装飾関連』で記されている変数全てがご利用いただけます。
補足2:ヘッダ/フッタの編集でも同様の変数がご利用いただけます
補足3:nicky.cgi?editcssにて作成されるd.cssについて
nicky.cgi?editcss→saveボタンクリック後、ファイルd.cgiに保存→d.cssを作成します。
えーと。つまりd.cssファイルは直接編集なさらないようにお願いします。
補足4:外部スタイルシートファイルについて
スタイルシートを外部ファイルにした場合、スタイルシートのファイルを変更した後、強制リロード(Winの場合は[CTRL]キーを押しながらリロードボタンをクリック)しないと反映されない場合があるようです。これはnicky!に限った現象ではありません。
叩き台スキンを用意しました。(シンプル版もあります)
例)\@
それと、行末に\を記述するとPerlがエラーを出力します。