私の個人的なカスタマイズです。nicky!制作者様には絶対に質問等はしないで下さい!!!!

ご自由にお使い下さって構いません。但し、サポートは出来ませんので参考と言う事で、自己責任で使って下さい。
よって、当方へのリンクは全く必要有りません。

主なUpdate ( この様に修正等有りますので、参考される方は、時々覗いて下さい。)
02.26,2005 cssの.mtable .pastmsg .pasty .pastmのスタイルにミスが有ったので修正。(意味の無い指定をしていただけなので、直さなくても一応大丈夫です)。and この関係の注釈をcssの末尾に追加。
02.04.2005 nicky.cgiのバージョンアップに伴い、cssの一部(リンクテキストのスタイル)、「ヘッダ」、コメントのカスタマイズの「入力欄(プレビュー用)」の変更。(これらは、コメントのhpアドレスの関係です。)
02.06.2005 cssのtdのスタイルを変更し、ユーザーカスタマイズの「トラックバック($tbTagに入ります)」の部分を簡略化しました。


『 旧 徒然-Diary 』のcss 『旧 徒然-Diary』サンプル

cssでの記述はブラウザやOSによって表示が異なる事が有りますので、ご注意下さい。表示確認はWindows2000、XPでIE6とNetscape7.1、Opra7.5のみです。

手順
スキンデータを配布してしまえば簡単ですが、サポート責任が持てないので、自己責任で自力で書換えして下さい。


1, 初めて設置の場合、最新のnicky.cgiを設置し書込みの確認をする。(初期設定等は未だ変更しない)

2, 次に最新のlist.cgiを設置し、list.cgiへアクセス確認する。

3. 先に挙げた「フレーム表示HTMLの書き方」より、フレームhtmlを作成し、フレームhtmlにへアクセスし確認。

4. 「nicky!用叩き台スキン」で、スキンデータのダウンロードをし、設置する。(これを元に書換えて行きます)
使用途中からスキンの変更をされる方は、必ずバックアップを取っておいて下さい。

5. 再びフレームhtmlにアクセスしてみる。(この段階ではレイアウト色等、大変おかしいですが気にしない。)

6. タイトルリストはlist.cgiを触らないとスタイル指定が出来ない箇所が有るので、その項目を「初期設定」で、変更しておく。
 *「過去ログにまつわる設定」の「以下月単位指定時に有効」の項目の「背景色」を#RRGGBBフル記入に変更。『旧徒然-Diary』サンプルは#ffffffです。文字色は好みで。(「nicky!用叩き台スキン」では省略記述(?)になっていますが、それだと本体の方は問題有りませんが、タイトルリストの方の過去ログ表が黒になってしまうので。)
 *「タイトルリストの年月日のサイズ」を指定する。『旧徒然-Diary』サンプルは全て2です。

7. 「初期設定」の「その他」の「アンカーをCGIに出力」で「させる」を選択。(忘れずに!!!)

8. 「初期設定」の「その他」の「画像レイアウト右上&左上指定タグ」で「Transitional」を選択。

その他の日記機能については、後でお好みに設定して下さい。(余談:「曜日の表現」を途中変更した場合、各記事を「記事編集」で(何もしないで)「書込み」クリックしないと反映されません)

9. 日記記事枠上に有る、「editcss」をクリック(もしくは、nicky.cgi?editcssとURL指定して)editcssを呼び出し、下記のcssをコピーペーストし書き換える。(ブラウザを最新情報に更新して、cssの書換えを有効にしておく)

10.下記のヘッダ/フッタ」「ユーザーカスタマイズ」「コメントのカスタマイズ」をコピーペーストし書き換え。
  「ヘッダ/フッタ」は「記事作成」ボタンの隣から、「ユーザーカスタマイズ」はnicky.cgi?UserCustomで、「コメントのカスタマイズ 」はnicky.cgi?UserCustomCで、呼び出し書換えます。

注意:ブラウザを最新情報に更新しないと、cssの書換えは反映されません!!!
css
nickyの「日記装飾関連(初期設定と連動)の変数」も使用出来るのですが、cssで設定出来る項目は敢えて変数を使用していません。
<各class名の説明>  nickyで配布されている、「nicky!用叩き台スキン」のクラス名をほぼ継承しています。

.baseline----日記(本体)全体の位置サイズ関係のclass名 (この値はフレームとのバランスで決めています。フレームを使わない時は適宜値を変えて下さい)
.hptitle----日記の名前
.line----記事(日記)の枠部分
.title----記事(日記)のタイトル
.date----記事(日記)の日付
.title_l----記事(日記)のタイトルの下線(設定によっては日記タイトル枠としても使えます)
.article----記事(日記)の本文
.tb----トラックバック
.cmntf ----コメントフィールド 。nicky.cgiが設定しているclass名なのでこの名を変更すると反映されません。
.cname----コメント者の名前
.cdate----コメント日付
.cmsg----コメント本文
.button----サブミット関係のボタン
.ciname----コメント者の名前記入欄の「名前」(name)
.nameform----コメント者の名前とhp urlを記入するテキストフォーム
.mesgform----コメントメッセージを記入するテキストフォーム
.mtable .pastmsg .pasty .pastm----過去ログ・月単位指定時の月リスト関係。このスタイルを有効にするには「初期設定」の「その他」で「過去ログへのリンクタグ」を「Strict/XHTML」に選択する必要が有ります。叩き台スキンは選択しているので問題無いです。 (nickyが設定しているclass名です。)
.listlink----(タイトルリストのフレーム内に置いた)検索等のリンク
.mlist----タイトルリストの月リストリンクのテーブル(nickyが設定しているclass名です。)
.clink----(タイトルリストのフレーム内に置いた)各プログラム著作権リンク
.listhr----タイトルリスト内の水平線

cssの色サイズを変更する事で多少アレンジできます。更にアレンジしたい場合はスタイルシートの記述方法を検索してみましょう。
(スタイルシートのリファレンスの参考……「Webページ作りのお勉強 HTMLタグでHP作り」 「eWeb」

アレンジの時の注意 .line のmargin-bottomは必ず0.1emでも良いので取って下さい。これを指定しない、又は0指定にすると、トラックバックを受け付けていない場合で且つ画像ファイルが有る場合、 ブラウザによってはブラウザサイズを変更した時、記事(日記)枠のアンダーラインがコメントフィールドと重なり切れてしまう様です。(IEでは問題有りません)
body { font-size: 10pt;
color: #000000;
background: #ffffff;
line-height :120%;
scrollbar-track-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-highlight-color: #999999;
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #999999;
scrollbar-darkshadow-color: #ffffff;
scrollbar-arrow-color: #666666; }

a { color:#000000; }
a:link { color:#797979; }
a:visited { color:#000000; }
a:hover { color:#CC0000; text-decoration:none; }

.baseline { width:90%;
margin-left:30px; }

.hptitle { padding-top:2em;
padding-bottom:1.5em;
color:#000000;
font-weight:bold;
font-size:11pt;
text-align:center;
text-decoration:underline; }

.line { border:solid 1px #333333;
text-align:left;
background:#ffffff;
padding:1.3em 1.5em 1.5em 1.8em;
margin-bottom: 0.2em; }

.title { color:#000000;
font-size:10pt;
font-weight:bold; }

.date { color:#000000;
font-size:9pt;
padding-left:1em; }

.title_l { color:#000000;
border-top:none;
border-right:none;
border-bottom:solid 1px #000000;
border-left:none;
padding-bottom:0.3em; }

.article { background:#ffffff;
color:#000000;
font-size:10pt;
line-height:140%;
padding-top:1em; }

.tb { font-size:8pt;
text-align:right; }

.cmntf { margin-bottom: 3em;
margin-left: 60px;
text-align:left;
border:solid 1px #ffffff;
background:#ffffff;
padding:0.5em 0.5em 0.5em 0.5em; }

.cname { font-size:9pt;
color:#000000;
font-weight:bold; }

.cdate {font-size:8pt;
color:#999999;
padding-left:1em;}

.cmsg { font-size:9pt;
line-height:130%;
color:#000000;
padding:0.4em 0.8em 1.5em 2em; }

.button { color:#000000;
font-size: 10pt;
background-color:#ffffff;
border-bottom:#333333 1px solid;
border-left:#333333 1px solid;
border-right:#333333 1px solid;
border-top:#333333 1px solid; }

.ciname { font-size:9pt; }

.nameform { color:#000000;
font-size: 10pt;
background-color:#f7f7f7;
border:#333333 1px solid;
width:15em;
height:1.5em; }

.mesgform { color:#000000;
font-size: 10pt;
background-color:#f7f7f7;
border:#333333 1px solid;
width:25em;
height:6em; }

.mtable { background:#ffffff; }

.pastmsg { color:#000000;
font-size:8pt;
background:#ffffff; }

.pasty { background:#ffffff;
color:#000000;
font-size:8pt;
text-align:center;
width:4.5em; }

.pastm{ background:#ffffff;
color:#000000;
font-size:8pt;
width:;
padding:1px; }

.listlink { font-size:9pt; }
.mlist { width:260px; }
.clink { font-size:9pt; padding-top:0.5em; }
.listhr { color:#000000;
border-top:none;
border-right:none;
border-bottom:solid 1px #000000;
border-left:none;
padding-bottom:0.3em; }
注: .pastm のwidthの値が空欄になっていますが、過去ログの月表示の枠幅を変えたい時(例えば〜6月〜12月と言う様に二段にするとか)は、このwidthに値を入れて調整する。
尚、過去ログの「年・月」を「/」に変更する場合は初期設定の「過去ログにまつわる設定-以下月単位指定時に有効」で、指定する。空欄にする事も可能。
特に、フレームに月単位過去ログを表示する時は、「年」「月」の文字を変更した方が幅を取らないので良いと思う。




ヘッダ
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=euc-jp">
<meta http-equiv="Content-style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" href="d.css" type="text/css">
<title>徒然-Diary</title>
<script type="text/JavaScript">
function cmnt_name(id){
if( id.value=="" )
id.value=read_cookie('CommentName');
}
function cmnt_uri(id){
if( id.value=="" )
id.value=read_cookie('CommentURI');
}
function write_cookie2(nm,ul){
var expire = new Date();
var tmg=new Date(0);
var gs=tmg.getTime();
if( gs > 0 ) expire.setTime(expire.getTime() - gs);
expire.setTime(expire.getTime() + 180*24*3600*1000);
document.cookie="CommentName=" + escape(nm) + "; expires=" + expire.toGMTString() + ";";
document.cookie="CommentURI=" + escape(ul) + "; expires=" + expire.toGMTString();
}
function read_cookie (name){
var target = name + '=';
var c = document.cookie;
var cookieStartIndex = c.indexOf(target);
if (cookieStartIndex == -1)
return '';
var cookieEndIndex = c.indexOf(";", cookieStartIndex + target.length);
if (cookieEndIndex == -1)
cookieEndIndex = c.length;
return unescape(c.substring(cookieStartIndex + target.length, cookieEndIndex));
}
function getcookie(name, uri){
name.value=read_cookie('CommentName');
uri.value=read_cookie('CommentURI');
}
</script>
</head>
<body>
<div class="baseline">
<div align="center">
<div class="hptitle">徒然-Diary</div>
フッタ
</div>
</div>
</body>
</html>
タイトル一覧ヘッダ
基本のcssは日記本体と同じ物(d.css)を呼び出して使用。但し、日記本体とは別の指定をしたい箇所だけ、ヘッダでスタイル指定をし直しています。
(当然ですが、d.cssを使用せず、別個のcssファイルを作っても構いません。)
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=euc-jp">
<meta http-equiv="Content-style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" href="d.css" type="text/css">
<title>徒然-Diary</title>
<style type="text/css">
<!--
body,tr,td { font-size: 10pt; color: #cccccc; }
a:link { color:#777777; text-decoration:none; }
a:visited { color:#000000; text-decoration:none; }
a:hover { color:#CC0000; text-decoration:none; }
-->
</style>
</head>
<body>
<div>
<div class="listlink" align="right">
<a href="HomeのURL" target="_top">Home</a>
&nbsp;&nbsp; <a href="list.cgi?clnum=1?align=left?target=frame2?vect=ON?lang=3?monthlist=OFF?TitleList" target="frame1">+C</a>
&nbsp;&nbsp; <a href="list.cgi?num=15?align=left?target=frame2?TitleList" target="frame1">List</a>
&nbsp;&nbsp; <a href="list.cgi?usehead=first?usefoot=first?size=125?wn=3?hn=3?spacing=4?border=0?Illust" target="frame2">Catalog</a>
&nbsp;&nbsp; <a href="nicky.cgi?SetSerch" target="frame2">Search</a>
</div>
<br>
<div class="title">徒然-Diary</div>
<div class="listhr"></div>
<br>
タイトル一覧フッタ
<br>
<div class="listhr"></div>
<div class="clink">
<a href="http://www.din.or.jp/~raelian/ReadMeNicky.html" target="_blank">DiaryCGI=Nicky!</a><br>
<a href="http://shichan.jp/" target="_blank">PaintBBS=Shi-dow</a><br>
<a href="http://www.wondercatstudio.com" target="_blank">DynamicPalette=WonderCatStudio</a></div>
</div>
</body>
</html>


編集画面の最後尾に出力するタグ」を
<hr>
<a href="./nicky.cgi?page=0">記事最新ページへ</a>/
<a href="./nicky.cgi?HEADEDIT">ヘッダ/フッタの編集</a>/
<a href="./nicky.cgi?MakeSetup">初期設定</a>/
<a href="./nicky.cgi?PassWord">パスワード再設定</a>/
<A HREF="./nicky.cgi?UserCustom">ユーザーカスタマイズ</A>/
<A HREF="./nicky.cgi?UserCustomC">コメントカスタマイズ</A>/
<A HREF="./nicky.cgi?editcss">css編集</A>
にすると色々と便利かも。
更に、「コマンド一覧表」の「*お持ち帰りはコチラからドウゾ*」で、nicky-command.htmlを設置すると色々便利かも。



ユーザーカスタマイズ
「nicky!用叩き台スキン」と基本的に同じです。( 注: 画像の横幅がとても大きい時、ブラウザによっては画像が記事枠からはみ出て表示されてます…)
記事のヘッダ(変数$UserCustomHeadに入ります)
<div class="line">\n
<div class="title_l">\n
<span class="title">$TitleHeadL$Title</span>\n
<span class="date">$Date</span>\n
</div>\n
記事のフッタ(変数$UserCustomFootに入ります)
</div>\n
$tbTag
画像なし
$UserCustomHead
<div class="article">$Msg</div>\n
$UserCustomFoot
画像レイアウト左
$UserCustomHead
<table border="0" cellpadding="2" cellspacing="0" summary="article"><tr>\n
<td class="article">$ImgLINK$ImgTAG</td>\n
<td class="article">$Msg</td>\n
</tr></table>\n
$UserCustomFoot
画像レイアウト右
$UserCustomHead
<table border="0" cellpadding="2" cellspacing="0" summary="article"><tr>\n
<td class="article">$Msg</td>\n
<td class="article">$ImgLINK$ImgTAG</td>\n
</tr></table>\n
$UserCustomFoot
画像レイアウト上
$UserCustomHead
<div class="article">$ImgLINK$ImgTAG</div>\n
<div class="article">$Msg</div>\n
$UserCustomFoot
画像レイアウト下
$UserCustomHead
<div class="article">$Msg</div>\n
<div class="article">$ImgLINK$ImgTAG</div>\n
$UserCustomFoot
画像レイアウト左上
$UserCustomHead
<div class="article">$ImgLINK$ImgTAG\n
$Msg</div>\n
<div style="clear:left;"></div>\n
$UserCustomFoot
画像レイアウト右上
$UserCustomHead\n
<div class="article">$ImgLINK$ImgTAG\n
$Msg</div>\n
<div style="clear:right;"></div>\n
$UserCustomFoot
画像レイアウト上中央
$UserCustomHead
<div class="article" align="center">$ImgLINK$ImgTAG</div>\n
<div class="article">$Msg</div>\n
$UserCustomFoot
画像レイアウト下中央
$UserCustomHead
<div class="article">$Msg</div>\n
<div style="article" align="center">$ImgLINK$ImgTAG</div>\n
$UserCustomFoot
トラックバック($tbTagに入ります)
<div class="tb">
<a href="./tb.cgi?__mode=list&amp;tb_id=$pt" onkeypress="window.open(this.href, '_blank', 'width=480,height=480,scrollbars=yes,status=yes'); return false;" onclick="window.open(this.href, '_blank', 'width=480,height=480,scrollbars=yes,status=yes'); return false">Trackback($tbnum)</a>
</div>
トラックバックは別途tb.cgiを設置する必要が有ります。tb.cgiを設置していない時は、「トラックバック($tbTagに入ります)」の項目は存在しません。よって「記事のフッタ(変数$UserCustomFootに入ります)」の所の「$tbTag」は外して構いません。(記入したままでも問題有りません。)


コメントのカスタマイズ
ヘッダ
<!-- $CommentStr -->
コメント本文
<span class="cname">・$name</span>\n
<span class="cdate">$time</span>\n
<div class="cmsg">$msg</div>\n
入力欄(表示用)
<div align="right">\n
<input class="button" type="submit" name="CPREVIEW" value="コメント">
</div>\n
入力欄(プレビュー用)
$br
<span class="ciname">name&nbsp;&nbsp;</span><input class="nameform" type="text" name="CommentName" value="$CommentName" onfocus="cmnt_name(this);">
$br
hp url <input class="nameform" type="text" name="CommentURI" value="$CommentURI" onfocus="cmnt_uri(this);">
$br
<textarea class="mesgform" name="CommentMsg">$CommentMsg</textarea>
$br
よろしければ『post』ボタンをクリックしてください
$br
<input class="button" type="submit" name="CPREVIEW" value="preview">
 <input class="button" type="submit" name="CINPUT" value=" post " onclick="write_cookie2(CommentName.value, CommentURI.value);">
フッタ
..
空欄です。



戻る