nicky!用叩き台スキン

nicky!がデフォルトで出力するレイアウトを、<table> / <font> / bgcolor タグを用いずに<div>とスタイルシートで組み直しました。
表示サンプルその1 / その2 / その3
スタイルシートでレイアウトや色調を設定していますが、初期設定の内容をスタイルシートに反映させる機能により、スタイルシートに明るくない方でも初期設定から簡単に調整ができます。

ゼロからカスタマイズするのは手間暇かかるので、このスキンを叩き台に好き勝手変更してご利用ください。著作権表示は特に必要ありません。

また、STRICTモードと連動させている為、W3CよりVALID HTML4.01 STRICTと認められます。
Valid HTML 4.01! Valid CSS! ←このアイコンを貼る権利が獲得できます。

HTML4.01 STRICTの検証は、HTMLの仕様を決めているW3Cの HTML Validator & CSS Validator にて行っています。

表示の確認は、Win( IE6.0 / N7.1 / Opera / Firefox )とMacOS Classic( IE5.1 / N7.0 ), MacOS X( Safari / IE5.2 / N7.1 / Firefox )にて行っています(どれでもほぼ同じように表示されます)。
また、N4でスタイルシートを適用した場合は不具合が多発する為、N4ではスタイルシートを読み込ませないようにしています。この結果、N4での表示結果は着色されないシンプルなものとなりますが表示は崩れません。

設置方法

以下の手順に従って設置します。

  1. ftpでnicky.cgiが設置されているフォルダにあるNickyAdmin.cgiのパーミッションをメモる。
  2. スキンデータのダウンロード

    以下のリンクを右クリック→対象をファイルに保存→ファイルの種類=全てと操作して、PCにダウンロードします。

    ダウンロードしたファイルの拡張子をcgiに変更します(d.cssを除く)。

  3. サーバへ転送

    ダウンロードしたファイルを全てサーバへftpのバイナリモードで転送します。

  4. パーミッションの変更

    転送したファイルの全てを『1.』でメモした値に変更します。

以上で作業完了です。
早速nicky.cgiへアクセスしてみましょう。

カスタマイズ

このスキンのカスタマイズ例を以下に記します。

  • 枠線をドットに変更する→サンプル2

    枠線をドットに変更するには、nicky.cgi?editcss →.day内の border:solid $NickyLineWidth の solid を dashed に変更します。

  • タイトルと記事を独立させる→サンプル3

    推定作業時間5分

    1. nicky.cgi?UserCustomで記事のヘッダを以下のように修正する。

      <div class="titleline">\n
      <span class="date">$TitleHeadL$Date</span>\n
      <span class="title">$Title</span>
      </div>\n
      <div class="day">

    2. 日記タイトルの背景色をページの背景色と同じにする

      nicky.cgi?editcss →.titlelineからbackground:$TitleBgColor;を削除

    3. タイトルのpaddingを変更する。

      nicky.cgi?editcss →.titleline の padding を $TSize 1em 0.2em 0em;に変更する。

    以上で作業完了です。

補足:レイアウト右と左について

この手のCGIとレイアウトを決めるfloatやposition系のCSSはすこぶる相性が悪いです。
よって、配布しているレイアウトデータのうち、画像レイアウト左と右にはやむなく <table> を使用しています。
<table>を使わない場合の左と右のレイアウトデータの例を以下に記します。

左指定時:

$UserCustomHead
<div style="float:left;width:auto;">
<div class="article">$Msg</div>
</div>
<div style="float:left;width:$wpx;height:$hpx">$ImgLINK$ImgTAG</div>
<div style="clear:left;"></div>
$UserCustomFoot

右指定時

$UserCustomHead
<div style="float:right;width:$wpx;height:$hpx">$ImgLINK$ImgTAG</div>
<div style="float:right;width:auto;">
<div class="article">$Msg</div>
</div>
<div style="clear:right;"></div>
$UserCustomFoot

注意1:他に手段が無い為、style="float:left;〜"を使用していますが、N4でスタイルシートのfloatを読み込ませると不具合が発生する為、お勧めできません。

注意2:テキストのブロック要素に width:auto を使用しています。width の auto 指定は正式な文法ですが、現状これをサポートしているのは Win の IE6.0 だけのようです。

例えば 画像サイズ + padding + margin + 記事の横幅 を不変の値として扱える場合は、スタイルシートを適用する事で無理無く<table>を使わずに実現できますが、汎用的な使われ方を想定する一般配布型スキンではこのヘンが限界です。

よくある質問とその答え

スキン導入時によく受ける質問を以下に記します。

  1. 初期設定からタイトルや記事の色を変更しても反映されない。

    設置したスキンデータのパーミッションにCGIからのライト権がありません。
    もし設置方法に沿ってパーミッションの変更をしたのに初期設定で設定した内容が反映されない場合は、666(rw-rw-rw)/660(rw-rw----)/606(rw----rw-)/600(rw-------)を試してみてください。

  2. 『年』や『過去ログ』が文字化けしている。

    スキンデータをサーバへ転送する際にバイナリモードを指定しないと文字化けします。
    例えばアスキー転送+SHIFT-JIS変換モードで転送すると文字化けしますので気をつけてください。

〜楽しく快適なインターネットライフを共に〜

(raelian@din.or.jp)