日記Cのスキンの作り方

基本構造 | ヘッダ部 | 記事表示部 | フッタ部 | 使用の様子
  1. 基本構造。（↓ | ↑）
    ヘッダ部、記事表示部、フッタ部の３つに別れる。
    サンプルのスキンを例にすると・・・

    スキンファイルもまずこの３部に分けます。それぞれの境界で、<!--cut-->と記述します。
    サンプルのスキンを例にすると・・・
    <HTML Lang="ja">
    <HEAD>
    <META Http-equiv="content-type" Content="text/html; charset=Shift_JIS">
    <TITLE>日記</TITLE>
    <STYLE Type="text/css">
    <!--
    a{ text-decoration:none;background:#aa7733}
    body,td,a,th{ font-size:12px;}
    input,textarea,{ border-style:solid; border-width:1;background:#ffffff;}
    -->
    </STYLE>
    </HEAD>
    <body bgcolor="#fffffa" text="#444444" link="#ffffff" vlink="#ffffee" alink="#ff0000">
    <center>

    <table width="700" bgcolor="#aa7733" border=0 cellspacing=0 cellpadding=1>
    <tr><td><a href="BACK">←Back</a></td>
    <td><center>
    <a href="HOME">HOME</a>
    | <a href="SEARCH">SEARCH</a>
    | <a href="EDIT">for Administer</a>
    </center>
    </td>
    <td align="right">
    <a href="KAKO">Next→</a>
    </td></tr></table>

    <h2><i>Diary C</i></h2>

    <p>kakotitle<!--s-->
     <!--cut-->
    <a name="daten<!--s-->"></a>
    <table width="700" bgcolor="#aa7733" border=0 cellspacing=0 cellpadding=1>
    <tr><td><font color="#ffffff"><b>subject<!--s--></b>-----keywords<!--s--></font></td>
    <td align="right"><font size=2 color="#cccccc">date<!--s--></font></td>
    </tr></table>
    <table width="700" border=1 cellspacing=0>
    <tr><td style="line-height:140%;font-size:12px">
    message<!--s-->
    <div align="right"></div>
    </td></tr></table>
    <p>
     <!--cut-->
    <p>
    <table width="700" bgcolor="#aa7733" border=0 cellspacing=0 cellpadding=1>
    <tr><td><a href="BACK">←Back</a></td>
    <td><center>
    <a href="HOME">HOME</a>
    | <a href="SEARCH">SEARCH</a>
    | <a href="EDIT">for Administer</a>
    </center>
    </td>
    <td align="right">
    <a href="KAKO">Next→</a>
    </td></tr></table>
    </center>
    </body></html>

    境界を示す、
    <!--cut-->
    を記述する行には、他の文字は入れずに、これだけにしてください。
    HTMLではコメントになりますので、表示されません。

  2. ヘッダ部（↓ | ↑）
    ヘッダ部については、
    HOME（リンク元のページ）へのリンク。過去ログへのリンク。検索フォームへのリンク。管理人用フォーム（パス入力と処理選択）へのリンク。
    それから、
    過去ログの名称。
    を適したものに変換します。他はそのまま使います。タイトルなどを記述してください。
    画像ファイルやリンクのURLはCGIから見た相対パスか、http://から記述したURLで。

    HOMEへのリンク。→　<a href="HOME"
    diaryc.cgiの初期設定で、$home="";として設定したURLへのリンクに変換します。
    <a href="HOME"
    と記述してある部分を変換。HOMEは大文字、他は小文字で。
    <a href="HOME"以降はそのまま使います。</a>の後で改行してください。

    検索フォームへのリンク。→　<a href="SEARCH"
    検索フォームへのリンクに変換します。
    SEARCHは大文字、他は小文字で。
    <a href="SEARCH"以降はそのまま使います。</a>の後で改行してください。

    管理人用フォームへのリンク。→　<a href="EDIT"
    管理人用フォーム（処理選択・パス入力画面）へのリンクに変換します。
    EDITは大文字、他は小文字で。
    <a href="EDIT"以降はそのまま使います。</a>の後で改行してください。
    フォームタグでパス入力フォームを作ってもいいです。こちらは変換しません。フォームの書き方は次の通り。
    <form action="diaryc.cgi" method="POST">
    <input type="hidden" name="mode" value="new_add_view">
    <input type="password" name="pass" size=8>
    <input type="submit" value="管理人用">
    </form>

    new_add_viewをadd_viewに変えると、「日記記入フォーム＋編集ログ選択フォーム＋過去ログの作成・削除＋ログのダウンロード」画面になります。
    new_add_viewのままなら、「日記記入フォーム＋最新日記表示」画面です。一方の画面から他方の画面へのリンクはついています。管理人用フォーム画面では、いずれかの画面を選択できます。

    もどるリンク。→　<a href="BACK"
    もどるリンク。過去ログ表示のときは、より新しいログへのリンク。それ以外のときは生成したHTMLへのリンクになります。
    BACKは大文字、他は小文字で。
    <a href="BACK"以降はそのまま使います。</a>の後で改行してください。

    過去ログへのリンク。→　<a href="KAKO"
    過去ログへのリンク。過去ログ表示のときは、より古いログへのリンクになります。
    KAKOは大文字、他は小文字で。
    <a href="KAKO"以降はそのまま使います。</a>の後で改行してください。
    また、
    todate<!--s-->　→　2001/2/25(Sun.)
    のように、todate<!--s-->は、過去ログの作成された日付（〜までの分）に変換されます。
    logno<!--s-->　→　1
    のように、logno<!--s-->は、過去ログの番号に変換されます。

    kakotitle<!--s-->　→　ログファイルを示す。
    今表示しているログファイルを示します。
    「2001/2/25(Sun.)までの日記」のように、「(過去ログの作成された日付)までの日記」という言葉に変換されます。
    最新の日記の場合は「現在の日記」です。ただし、検索フォームやその結果の画面、生成されたHTMLの画面では表示されません。 小文字で記述してください。

    サンプルのスキンを例にすると・・・
    <HTML Lang="ja">
    <HEAD>
    <META Http-equiv="content-type" Content="text/html; charset=Shift_JIS">
    <TITLE>日記</TITLE>
    <STYLE Type="text/css">
    <!--
    a{ text-decoration:none;background:#aa7733}
    body,td,a,th{ font-size:12px;}
    input,textarea,{ border-style:solid; border-width:1;background:#ffffff;}
    -->
    </STYLE>
    </HEAD>
    <body bgcolor="#fffffa" text="#444444" link="#ffffff" vlink="#ffffee" alink="#ff0000">
    <center>

    <table width="700" bgcolor="#aa7733" border=0 cellspacing=0 cellpadding=1>
    <tr><td><a href="BACK">←Back</a></td>
    <td><center>
    <a href="HOME">HOME</a>
    | <a href="SEARCH">SEARCH</a>
    | <a href="EDIT">for Administer</a>
    </center>
    </td>
    <td align="right">
    <a href="KAKO">Next→</a>
    </td></tr></table>

    <h2><i>Diary C</i></h2>

    <p>kakotitle<!--s-->

  3. 記事表示部分（↓ | ↑）
    アンカー用日付，日付，項目１，項目２，日記本文を表示します。
    daten<!--s-->　→　アンカー用日付
    daten<!--s-->の部分は、20010225のように、日記の日付（８桁の半角数字）に変換されます。
    <a name="daten<!--s-->"></a>
    のように使います。小文字で。

    sub<!--s-->　→　日付
    date<!--s-->の部分は、2001/2/25(Sun.)のように、日記の日付に変換されます。小文字で。

    subject<!--s-->　→　項目１
    subject<!--s-->の部分は、その日記の”項目１”の内容に変換されます。
    項目１が無記入の記事では消えます。小文字で。

    message<!--s-->　→　
    message<!--s-->の部分は、その日記の本文に変換されます。小文字で。

    keywords<!--s-->　→　項目２
    keywords<!--s-->の部分は、その日記の”項目２”の内容に変換されます。
    項目２が無記入の記事では消えます。
    diaryc.cgiの初期設定部分で、@k2factを設定している場合は、@k2factの要素に置換されます。小文字で。

    サンプルのスキンを例にすると・・・
    <a name="daten<!--s-->"></a>
    <table width="700" bgcolor="#aa7733" border=0 cellspacing=0 cellpadding=1>
    <tr><td><font color="#ffffff"><b>subject<!--s--></b>-----keywords<!--s--></font></td>
    <td align="right"><font size=2 color="#cccccc">date<!--s--></font></td>
    </tr></table>
    <table width="700" border=1 cellspacing=0>
    <tr><td style="line-height:140%;font-size:12px">
    message<!--s-->
    <div align="right"></div>
    </td></tr></table>
    <p>

  4. フッタ部（↓ | ↑）
    ヘッダ部とまったく同じ変換が適用されるので、ヘッダ部を参照してください。
    変換する部分がなければ、スキンに記述したそのままのタグ等が使用されるので、適当に記述してください。

    サンプルのスキンを例にすると・・・
    <p>
    <table width="700" bgcolor="#aa7733" border=0 cellspacing=0 cellpadding=1>
    <tr><td><a href="BACK">←Back</a></td>
    <td><center>
    <a href="HOME">HOME</a>
    | <a href="SEARCH">SEARCH</a>
    | <a href="EDIT">for Administer</a>
    </center>
    </td>
    <td align="right">
    <a href="KAKO">Next→</a>
    </td></tr></table>
    </center>
    </body></html>

  5. 使用している様子。（↑）
    サンプルのスキンで使用した様子。過去ログファイルを表示した場合。

もどる