[目次へ戻る]

すぐ使えるCGI 画像付 ウェブページ更新ツール(Shift_JIS 版) 説明書

デザイン変更チュートリアル

基本的な動作を確認したら、テンプレートを編集してデザイン変更を行ってみましょう。
設置がまだ済んでいない場合は「ステップ by ステップガイド」から初めて下さい。


  1. 一覧ページのデザイン変更

    まずは一覧ページのデザイン変更を行ってみます。

    1. テキストエディタでファイルを開く

      最初に解凍したファイルのうち、 templates/article/article_list.html をテキストエディタで開いて下さい。

      「テキストエディタ」が無い場合は、下記のオンラインツールを使用して下さい。
      http://sugutsukaeru.jp/cgi/j/36/

    2. ファイルの修正

      title および h1 タグ内に「記事一覧」と書いてある部分があるので、これを試しに変更してみます。「○○株式会社 社長日記」等、お好きなように変更して下さい。

      変更前 (templates/article/article_list.html)
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html lang="ja">
      <head>
      <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
      <title>記事一覧</title>
      </head>
      <body bgcolor="#ffffff">

      <h1>記事一覧</h1>

      <ul>
      <!-- article list : generate from article_list.txt -->
      %_article_list_%

      </ul>
      </body>
      </html>
      変更後 (templates/article/article_list.html)
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html lang="ja">
      <head>
      <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
      <title>○○株式会社 社長日記</title>
      </head>
      <body bgcolor="#ffffff">

      <h1>○○株式会社 社長日記</h1>

      <ul>
      <!-- article list : generate from article_list.txt -->
      %_article_list_%

      </ul>
      </body>
      </html>
    3. 上書き保存

      変更が終わったらファイルを保存して下さい。
      保存の際の文字コードは Shift_JIS(または CP932 など) にして下さい。

    4. アップロード

      保存したファイルを、サーバにもう一度アップロードします。
      FTPソフトでサーバの templates/article/ ディレクトリに移動して、 編集後の article_list.html をアップロードして下さい。

    5. テンプレート修正後のテスト

      article_list.html をアップロードしたら、管理画面から更にもう1件データを登録してみて下さい。

      登録が終わったら、もう一度「編集結果をチェック: [一覧]」のリンクからページを表示して下さい。
      表示内容が変わらないようであればページの再読み込みをして下さい。

      今度はタイトルが、「○○株式会社 社長日記」と表示されますか?
      このように、デザインはHTML形式で自由に変更する事ができます。

  2. 一覧ページのリスト部分の変更

    先ほどの変更では、一覧ページの全体のデザインが変更されました。
    今度は、記事の内容が表示される部分を変更してみます。

    1. テキストエディタでファイルを開く

      今度は最初に解凍したファイルのうち、 templates/article/article_list.txt をテキストエディタで開いて下さい。

      「テキストエディタ」が無い場合は、下記のオンラインツールを使用して下さい。
      http://sugutsukaeru.jp/cgi/j/36/

    2. ファイルの修正

      日付を表示する部分で「%_yyyy_%-%_mm_%-%_dd_%」と記載されている部分がありますので、これに色を付けてみることにします。
      <font> タグなどのコードを足してみて下さい。

      変更前 (templates/article/article_list.txt)
      <!-- Shift_JIS(または CP932 など) で保存して下さい -->
      <li>
      %_yyyy_%-%_mm_%-%_dd_%
      <a href="%_d_%.html">%_subject_%</a>
      <br>
      <img src="%_d_%/%_imagename_escaped_1_%" width="50" alt="">
      </li>
      変更後 (templates/article/article_list.txt)
      <!-- Shift_JIS(または CP932 など) で保存して下さい -->
      <li>
      <font color="#00cc00">%_yyyy_%-%_mm_%-%_dd_%</font>
      <a href="%_d_%.html">%_subject_%</a>
      <br>
      <img src="%_d_%/%_imagename_escaped_1_%" width="50" alt="">
      </li>
    3. 上書き保存

      変更が終わったらファイルを保存して下さい。
      保存の際の文字コードは Shift_JIS(または CP932 など) にして下さい。

    4. アップロード

      保存したファイルを、サーバにもう一度アップロードします。
      FTPソフトでサーバの templates/article/ ディレクトリに移動して、 編集後の article_list.txt をアップロードして下さい。

    5. テンプレート修正後のテスト

      もう一度管理画面を開き、一覧の下にある「再構築(テンプレート変更反映)」ボタンを押して下さい。

      再構築が終わったら、もう一度「編集結果をチェック: [一覧]」のリンクからページを表示して下さい。
      表示内容が変わらないようであればページの再読み込みをして下さい。

      今度は日付に色が付きましたか?

  3. 短い一覧ページのデザイン変更

    短い一覧も同様にデザイン変更ができます。
    以下のようにデザイン変更を試して下さい。

    1. テキストエディタでファイルを開く

      短い一覧用のファイルは、 templates/article/short_list.html です。最初に解凍したファイルから、short_list.html をテキストエディタで開いて下さい。

      「テキストエディタ」が無い場合は、下記のオンラインツールを使用して下さい。
      http://sugutsukaeru.jp/cgi/j/36/

    2. ファイルの修正

      今度は背景色を変更して見ましょう。
      「<body bgcolor="#ffffff">」を変更して「<body bgcolor="#ccccff">」にしてみます。

      変更前 (templates/article/short_list.html)
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html lang="ja">
      <head>
      <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
      <title>記事一覧</title>
      </head>
      <body bgcolor="#ffffff">

      <!-- article list : generate from short_list.txt -->
      %_article_list_%

      </body>
      </html>
      変更後 (templates/article/short_list.html)
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html lang="ja">
      <head>
      <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
      <title>記事一覧</title>
      </head>
      <body bgcolor="#ccccff">

      <!-- article list : generate from short_list.txt -->
      %_article_list_%

      </body>
      </html>
    3. 上書き保存

      変更が終わったらファイルを保存して下さい。
      保存の際の文字コードは Shift_JIS(または CP932 など) にして下さい。

    4. アップロード

      保存したファイルを、サーバにもう一度アップロードします。
      FTPソフトでサーバの templates/article/ ディレクトリに移動して、 編集後の short_list.html をアップロードして下さい。

    5. テンプレート修正後のテスト

      short_list.html をアップロードしたら、管理画面の一覧の下にある「再構築(テンプレート変更反映)」ボタンを押して下さい。

      再構築が終わったら、「編集結果をチェック: [短い一覧]」のリンクからページを表示して下さい。
      表示内容が変わらないようであればページの再読み込みをして下さい。

      背景色が変更されます。

  4. 短い一覧ページのリスト部分の変更

    短い一覧の記事部分の変更も可能です。
    以下の手順で変更を試してみます。

    1. テキストエディタでファイルを開く

      解凍したファイルの templates/article/short_list.txt をテキストエディタで開いて下さい。

      「テキストエディタ」が無い場合は、下記のオンラインツールを使用して下さい。
      http://sugutsukaeru.jp/cgi/j/36/

    2. ファイルの修正

      タイトルの表示位置に「%_subject_%」と記載されている部分があります。タイトルが目立つように、ボールド表記にしてみます。
      <b> タグを足して下さい。

      変更前 (templates/article/short_list.txt)
      <!-- Shift_JIS(または CP932 など) で保存して下さい -->
      %_yyyy_%-%_mm_%-%_dd_% <a href="%_d_%.html">%_subject_%</a><br>
      変更後 (templates/article/short_list.txt)
      <!-- Shift_JIS(または CP932 など) で保存して下さい -->
      %_yyyy_%-%_mm_%-%_dd_% <a href="%_d_%.html"><b>%_subject_%</b></a><br>
    3. 上書き保存

      変更が終わったらファイルを保存して下さい。
      保存の際の文字コードは Shift_JIS(または CP932 など) にして下さい。

    4. アップロード

      保存したファイルを、サーバにもう一度アップロードします。
      FTPソフトでサーバの templates/article/ ディレクトリに移動して、 編集後の short_list.txt をアップロードして下さい。

    5. テンプレート修正後のテスト

      管理画面を開き、一覧の下にある「再構築(テンプレート変更反映)」ボタンを押して下さい。

      再構築が終わったら、「編集結果をチェック: [短い一覧]」のリンクからページを表示して下さい。
      表示内容が変わらないようであればページの再読み込みをして下さい。

      表示内容が変更されます。

  5. 記事ページのデザイン変更

    記事ページのデザイン変更を試してみましょう。
    一覧ページと同じように自由にデザインを変更できますが、ここではページ間リンクの変更をしてみます。

    1. テキストエディタでファイルを開く

      解凍したファイルの templates/article/article.html をテキストエディタで開いて下さい。

      「テキストエディタ」が無い場合は、下記のオンラインツールを使用して下さい。
      http://sugutsukaeru.jp/cgi/j/36/

    2. ファイルの修正

      ページ間リンク、および一覧へのリンクがありますので、リンクの文字列を変更してみます。

      変更前 (templates/article/article.html)
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <HTML lang="ja">
      <head>
      <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
      <title>%_subject_% (%_yyyy_%-%_mm_%-%_dd_%)</title>
      </head>

      <body bgcolor="#ffffff">

      <div align="center">

      <table border="0" width="90%">
      <tr>
      <td width="20%"><a href="%_to_prev_%">←前へ</a></td>
      <td align="center"><a href="index.html">↑一覧へ</a></td>
      <td width="20%" align="right"><a href="%_to_next_%">次へ→</a></td>
      </tr>
      </table>

      </div>

      <h1>%_subject_%</h1>
      <div align="right">
      <p>%_yyyy_%/%_mm_%/%_dd_%</p>
      </div>

      %_body_%

      <div>
      <!-- 画像の表示: generated from article_image_1.txt -->
      %_article_image_1_%
      </div>

      </body>
      </html>
      変更後 (templates/article/article.html)
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <HTML lang="ja">
      <head>
      <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
      <title>%_subject_% (%_yyyy_%-%_mm_%-%_dd_%)</title>
      </head>

      <body bgcolor="#ffffff">

      <div align="center">

      <table border="0" width="90%">
      <tr>
      <td width="20%"><a href="%_to_prev_%">[previous]</a></td>
      <td align="center"><a href="index.html">↑一覧へ</a></td>
      <td width="20%" align="right"><a href="%_to_next_%">[next]</a></td>
      </tr>
      </table>

      </div>

      <h1>%_subject_%</h1>
      <div align="right">
      <p>%_yyyy_%/%_mm_%/%_dd_%</p>
      </div>

      %_body_%

      <div>
      <!-- 画像の表示: generated from article_image_1.txt -->
      %_article_image_1_%
      </div>

      </body>
      </html>
    3. 上書き保存

      変更が終わったらファイルを保存して下さい。
      保存の際の文字コードは Shift_JIS(または CP932 など) にして下さい。

    4. アップロード

      保存したファイルを、サーバにもう一度アップロードします。
      FTPソフトでサーバの templates/article/ ディレクトリに移動して、 編集後の article.html をアップロードして下さい。

    5. テンプレート修正後のテスト

      article.html をアップロードしたら、管理画面から登録されている記事を編集して下さい。

      編集が終わったら、編集した記事の「チェック」のリンクからページを表示して下さい。
      表示内容が変わらないようであればページの再読み込みをして下さい。

      リンクの表示が変更されます。

      他のページも表示を変更するには、管理画面一覧の下にある「再構築(テンプレート変更反映)」ボタンを押して下さい。

  6. 画像部分の表示変更

    記事ページの画像の表示の変更は、2つのファイルの組み合わせで行います。

    記事ファイル用テンプレート templates/article/article.html の %_article_image_1_% と記載のある部分に templates/article/article_image_1.txt で指定する <img> タグ部分が挿入されます。

    <img> タグが挿入される部分(青字) (templates/article/article.html)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML lang="ja">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
    <title>%_subject_% (%_yyyy_%-%_mm_%-%_dd_%)</title>
    </head>

    <body bgcolor="#ffffff">

    <div align="center">

    <table border="0" width="90%">
    <tr>
    <td width="20%"><a href="%_to_prev_%">←前へ</a></td>
    <td align="center"><a href="index.html">↑一覧へ</a></td>
    <td width="20%" align="right"><a href="%_to_next_%">次へ→</a></td>
    </tr>
    </table>

    </div>

    <h1>%_subject_%</h1>
    <div align="right">
    <p>%_yyyy_%/%_mm_%/%_dd_%</p>
    </div>

    %_body_%

    <div>
    <!-- 画像の表示: generated from article_image_1.txt -->
    %_article_image_1_%
    </div>

    </body>
    </html>

    挿入される <img> タグコード (templates/article/article_image_1.txt)

    <!-- 画像の表示指定。article.html の %_article_image_1_% 部分に挿入されます。 -->
    <img src="%_d_%/%_filename_escaped_%" alt="" hspace="2" vspace="2">

    両方のファイルを変更することにより、画像の位置変更などが行えますが、ここでは、 templates/article/article_image_1.txt のみを変更して画像を別ウィンドウにリンクする例を取り上げます。

    1. テキストエディタでファイルを開く

      今度は最初に解凍したファイルのうち、 templates/article/article_image_1.txt をテキストエディタで開いて下さい。

      「テキストエディタ」が無い場合は、下記のオンラインツールを使用して下さい。
      http://sugutsukaeru.jp/cgi/j/36/

    2. ファイルの修正

      もとのファイルにはコメントと <img> タグしかありませんが、画像の表示幅を小さくして、大きな画像を別ウィンドウにリンクするようにしてみましょう。

      変更前 (templates/article/article_image_1.txt)
      <!-- 画像の表示指定。article.html の %_article_image_1_% 部分に挿入されます。 -->
      <img src="%_d_%/%_filename_escaped_%" alt="" hspace="2" vspace="2">
      変更後 (templates/article/article_image_1.txt)
      <!-- 画像の表示指定。article.html の %_article_image_1_% 部分に挿入されます。 -->
      <a href="%_d_%/%_filename_escaped_%" target="_blank">
      <img src="%_d_%/%_filename_escaped_%"
      alt="" hspace="2" vspace="2" width="100" border="0"><br>
      クリックで拡大</a>
    3. 上書き保存

      変更が終わったらファイルを保存します。
      保存の際の文字コードは Shift_JIS(または CP932 など) にして下さい。

    4. アップロード

      保存したファイルを、サーバにもう一度アップロードします。
      FTPソフトでサーバの templates/article/ ディレクトリに移動して、 編集後の article_image_1.txt をアップロードして下さい。

    5. テンプレート修正後のテスト

      もう一度管理画面を開き、登録してあるデータを編集してみて下さい。
      (大きな画像を添付すると、編集の効果がよく分ります。)

      登録が終わったら、編集した記事の「チェック」のリンクからページを表示して下さい。
      表示内容が変わらないようであればページの再読み込みをして下さい。

      画像は小さく表示されますが、リンクで別ウィンドウに開くようになります。

  7. 短い一覧への画像表示

    ここで、少しデザイン変更の「応用編」に挑戦してみましょう。
    短い一覧にも小さな画像を表示します。

    以下の手順で変更します。

    1. テキストエディタでファイルを開く

      先ほど編集した templates/article/short_list.txt をテキストエディタで開いて下さい。

      「テキストエディタ」が無い場合は、下記のオンラインツールを使用して下さい。
      http://sugutsukaeru.jp/cgi/j/36/

    2. ファイルの修正

      先ほどボールド表記に変更したタイトルの右側に、縮小画像を表示するコードを追加します。

      変更前 (templates/article/short_list.txt)
      <!-- Shift_JIS(または CP932 など) で保存して下さい -->
      %_yyyy_%-%_mm_%-%_dd_% <a href="%_d_%.html"><b>%_subject_%</b></a><br>
      変更後 (templates/article/short_list.txt)
      <!-- Shift_JIS(または CP932 など) で保存して下さい -->
      %_yyyy_%-%_mm_%-%_dd_% <a href="%_d_%.html"><b>%_subject_%</b></a>
      <img src="%_d_%/%_imagename_escaped_1_%"
      alt="" width="50" vspace="4" hspace="4"><br>
    3. 上書き保存

      変更が終わったらファイルを保存して下さい。

    4. アップロード

      保存したファイルを、サーバにもう一度アップロードします。
      FTPソフトでサーバの templates/article/ ディレクトリに移動して、 編集後の short_list.txt をアップロードして下さい。

    5. テンプレート修正後のテスト

      管理画面を開き、一覧の下にある「再構築(テンプレート変更反映)」ボタンを押して下さい。

      処理完了のメッセージが表示されたら「編集結果をチェック: [短い一覧]」のリンクからページを表示して下さい。
      表示内容が変わらないようであればページの再読み込みをして下さい。

      画像が表示されるようになります。

  8. 短い一覧へのサマリー表示

    一覧と短い一覧には、記事内容の一部をサマリーとして表示する事が可能です。
    ここでは、短い一覧にサマリーを表示させてみます。

    1. テキストエディタでファイルを開く

      templates/article/short_list.txt をテキストエディタで開いて下さい。

      「テキストエディタ」が無い場合は、下記のオンラインツールを使用して下さい。
      http://sugutsukaeru.jp/cgi/j/36/

    2. ファイルの修正

      サマリーを表示するテンプレート変数は %_summary_% です。タイトルの下の部分にこれを追加します。

      変更前(デフォルト) (templates/article/short_list.txt)
      <!-- Shift_JIS(または CP932 など) で保存して下さい -->
      %_yyyy_%-%_mm_%-%_dd_% <a href="%_d_%.html">%_subject_%</a><br>
      変更後 (templates/article/short_list.txt)
      <!-- Shift_JIS(または CP932 など) で保存して下さい -->
      %_yyyy_%-%_mm_%-%_dd_% <a href="%_d_%.html">%_subject_%</a><br>
      <blockquote>%_summary_%</blockquote>
    3. 上書き保存

      変更が終わったらファイルを保存して下さい。
      保存の際の文字コードは Shift_JIS(または CP932 など) にして下さい。

    4. アップロード

      保存したファイルを、サーバにもう一度アップロードします。
      FTPソフトでサーバの templates/article/ ディレクトリに移動して、 編集後の short_list.txt をアップロードして下さい。

    5. テンプレート修正後のテスト

      管理画面を開き、一覧の下にある「再構築(テンプレート変更反映)」ボタンを押して下さい。

      処理完了のメッセージが表示されたら「編集結果をチェック: [短い一覧]」のリンクからページを表示して下さい。
      表示内容が変わらないようであればページの再読み込みをして下さい。

      サマリーが表示されるようになります。

      なお、同じ方法で全一覧にもサマリーの表示が可能です。

  9. 短い一覧のサイト内への組み込み

    1. 短い一覧の利用方法を決める

      「短い一覧」( webdir/index_short.html )は新着情報としてトップページなどに組み込んで使用する想定になっています。

      また、新着情報の他に、最新1件分の内容をトップページに表示するといった使い方もできます。
      「短い一覧」の使い方について詳しくは、「すぐ使えるCGI」ウェブサイトの「テンプレート解説 No. 3 『短い一覧』の利用方法」を参照して下さい。

      不要であれば短い一覧の書き出しを抑えることもできます。
      設定方法は「変更できる環境変数」を参照して下さい。

    2. 短い一覧をページに組み込む

      短い一覧を他のページに組み込んで利用する場合は、 <IFRAME> タグまたは SSI(Server Side Include)、PHPページであれば readfile 関数などで組み込んで下さい。

      1. <IFRAME> で組み込む場合

        <IFRAME> はどのようなサーバ環境でも対応可能です。
        <IFRAME> の場合は、組み込み先ページにそのまま webdir/index_short.html を組み込んで下さい。

        組み込みコード例(<IFRAME>の場合)
        <iframe
            frameborder="0"
            allowtransparency="true"
            height="300"
            width="270"
            marginheight="0"
            marginwidth="0"
            scrolling="no"
            src="webdir/index_short.html"
        ></iframe>

        これでページ内に新着情報(短い一覧)が表示されます。

        配布のテンプレートのままだと組み込まれた短い一覧から内容ページへのリンクが <IFRAME> 内に表示されてしまいますので、 templates/article/short_list.txt を編集して target 属性を追加して下さい。

        変更前 (templates/article/short_list.txt)
        <!-- Shift_JIS(または CP932 など) で保存して下さい -->
        %_yyyy_%-%_mm_%-%_dd_% <a href="%_d_%.html">%_subject_%</a><br>
        変更後(同じウィンドウに開く場合) (templates/article/short_list.txt)
        <!-- Shift_JIS(または CP932 など) で保存して下さい -->
        %_yyyy_%-%_mm_%-%_dd_%
        <a href="%_d_%.html" target="_parent" >%_subject_%</a><br>
        変更後(新しいウィンドウに開く場合) (templates/article/short_list.txt)
        <!-- Shift_JIS(または CP932 など) で保存して下さい -->
        %_yyyy_%-%_mm_%-%_dd_%
        <a href="%_d_%.html" target="_blank" >%_subject_%</a><br>

        テンプレートを編集したらサーバに上書きアップロードして下さい。
        管理画面一覧の「再構築(テンプレート変更反映)」ボタンを押して変更を反映後、ブラウザの表示を再読み込みして確認して下さい。

      2. SSI で組み込む場合

        SSI で組み込む場合は、まず webdir/index_short.html が部分HTML になるようにテンプレート templates/article/short_list.html を編集しておきます。

        変更前 (templates/article/short_list.html)
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
        <html lang="ja">
        <head>
        <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
        <title>記事一覧</title>
        </head>
        <body bgcolor="#ffffff">

        <!-- article list : generate from short_list.txt -->
        %_article_list_%

        </body>
        </html>
        変更後 (templates/article/short_list.html)
        <!-- article list : generate from short_list.txt -->
        %_article_list_%

        短い一覧から内容ページへのリンクは、組み込み先のページから webdir/1.html、webdir/2.html ... へのリンクとなりますので templates/article/short_list.txt を編集して href 属性を変更します。

        変更前 (templates/article/short_list.txt)
        <!-- Shift_JIS(または CP932 など) で保存して下さい -->
        %_yyyy_%-%_mm_%-%_dd_% <a href="%_d_%.html">%_subject_%</a><br>
        変更後 (templates/article/short_list.txt)
        <!-- Shift_JIS(または CP932 など) で保存して下さい -->
        %_yyyy_%-%_mm_%-%_dd_% <a href="webdir/%_d_%.html" >%_subject_%</a><br>

        もし短い一覧に画像を表示しているのであれば、管理画面からもトップページからも画像が表示できるように、src 属性にサーバルートからのパスを追加して下さい。

        変更前 画像タグ
        <img src="%_d_%/%_imagename_escaped_1_%"
            alt="" width="50" vspace="4" hspace="4">
        変更後 画像タグ
        <img src="/webdir/%_d_%/%_imagename_escaped_1_%"
            alt="" width="50" vspace="4" hspace="4">

        テンプレートを編集したらサーバに上書きアップロードの上、管理画面一覧の「再構築(テンプレート変更反映)」ボタンを押して変更を反映して下さい。

        あとは、組み込み先に SSIコマンドを指定します。
        (SSI を有効にするための設定は、お使いのサーバのマニュアル等を参照して下さい。)

        組み込みコード例(SSIの場合)
        <!--#include file="webdir/index_short.html" -->
      3. PHP で組み込む場合

        トップページなどが既にPHPで構築されている場合は、新着情報(短い一覧)組み込みはPHPの関数で行えます。
        まず webdir/index_short.html が部分HTML になるようにテンプレート templates/article/short_list.html を編集しておきます。

        変更前 (templates/article/short_list.html)
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
        <html lang="ja">
        <head>
        <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
        <title>記事一覧</title>
        </head>
        <body bgcolor="#ffffff">

        <!-- article list : generate from short_list.txt -->
        %_article_list_%

        </body>
        </html>
        変更後 (templates/article/short_list.html)
        <!-- article list : generate from short_list.txt -->
        %_article_list_%

        短い一覧から内容ページへのリンクは、組み込み先のページから webdir/1.html、webdir/2.html ... へのリンクとなりますので templates/article/short_list.txt を編集して href 属性を変更します。

        変更前 (templates/article/short_list.txt)
        <!-- Shift_JIS(または CP932 など) で保存して下さい -->
        %_yyyy_%-%_mm_%-%_dd_% <a href="%_d_%.html">%_subject_%</a><br>
        変更後 (templates/article/short_list.txt)
        <!-- Shift_JIS(または CP932 など) で保存して下さい -->
        %_yyyy_%-%_mm_%-%_dd_% <a href="webdir/%_d_%.html" >%_subject_%</a><br>

        もし短い一覧に画像を表示しているのであれば、管理画面からもトップページからも画像が表示できるように、src 属性にサーバルートからのパスを追加して下さい。

        変更前 画像タグ
        <img src="%_d_%/%_imagename_escaped_1_%"
            alt="" width="50" vspace="4" hspace="4">
        変更後 画像タグ
        <img src="/webdir/%_d_%/%_imagename_escaped_1_%"
            alt="" width="50" vspace="4" hspace="4">

        テンプレートを編集したらサーバに上書きアップロードの上、管理画面一覧の「再構築(テンプレート変更反映)」ボタンを押して変更を反映して下さい。

        あとは、組み込み先に PHPのコードを指定します。

        組み込みコード例(PHPの場合)
        <?php
        readfile("webdir/index_short.html");
        ?>
    3. 表示件数の設定

      短い一覧の書き出し件数は変更可能です。(デフォルトでは最新3件を表示。)
      設定方法は「変更できる環境変数」を参照して下さい。

  10. RSSファイルの設定

    1. RSSとは?

      RSSは、サイト閲覧者が効率的にサイトの更新情報をチェックできる仕組みです。
      RSSファイルをウェブサイトに公開することにより、メールなどを送信しなくてもサイト閲覧者の方に効率よく情報配信できます。

      「すぐ使えるCGI」から登録した情報は自動的にRSSファイル( webdir/new.xml )に書き出されます。
      不要であればRSSファイルの書き出しを抑えることもできます。
      設定方法は「変更できる環境変数」を参照して下さい。

    2. サイトの情報を設定

      RSSファイル用のデフォルトのテンプレートには、ダミーのサイト情報が記載されています。
      設置するサイトの情報に書き換えて下さい。
      必要があれば <pubDate> タグ内末尾のタイムゾーンも変更して下さい。

      RSSファイル用テンプレートファイルは templates/article/rss_list.htmltemplates/article/rss_list.txt です。

      サイト情報の更新箇所(青字) (templates/article/rss_list.html)
      <?xml version="1.0" encoding="Shift_JIS"?>
      <rss version="2.0">

      <channel>
      <title>ここにサイト名やコーナーの名前を入力</title>
      <!-- link タグの中身はサイトのURLに変更して下さい -->
      <link>http://input.your.domain.name/</link>
      <description>ここにサイト名やコーナーの説明を入力</description>
      <language>ja</language>

      <!-- image タグ(以下10行)は任意要素です。不要なら削除して下さい。 -->
      <image>
      <title>ここにサイト名やコーナーの名前を入力</title>
      <!-- url タグの中身はサイトのロゴのURLに変更して下さい -->
      <url>http://input.your.domain.name/your_site_logo.gif</url>
      <!-- link タグの中身はサイトのURLに変更して下さい -->
      <link>http://input.your.domain.name/</link>
      <width>88</width>
      <height>31</height>
      <description>ここにサイト名やコーナーの説明を入力</description>
      </image>

      %_article_list_%

      </channel>
      </rss>
      サイト情報の更新箇所(青字) (templates/article/rss_list.txt)
      <item>
      <title>%_subject_%</title>
      <!-- link タグおよび guid タグ内の http〜webdir/ は、
           書き出しディレクトリまでのURLに変更して下さい。 -->
      <link>http://input.your.domain.name/webdir/%_d_%.html</link>
      <guid isPermaLink="true">http://input.your.domain.name/webdir/%_d_%.html</guid>
      <pubDate>%_dd_% %_mon_% %_yyyy_% 00:00:00 +0900</pubDate>
      <description>%_summary_%</description>
      </item>

      <!-- と --> で挟まれているコメントは設置用の説明ですので、編集が終わったら削除して構いません。

    3. 表示件数の設定

      RSSファイルへの書き出し件数は変更可能です。(デフォルトでは最新10件を表示。)
      設定方法は「変更できる環境変数」を参照して下さい。

    4. RSSファイルの公開(告知)

      RSSファイル(RSSフィード)で効率よく情報を配信するには、閲覧者の方に「購読」して頂く必要があります。
      「購読」とは、URLをブックマークするのと同様の作業です。

      閲覧者の方にRSSファイルがある事が分かるように、サイト内の他のページからRSSファイル( webdir/new.xml )にリンクして下さい。

    5. AutoDiscovery の設定

      サイトのトップページの <head> タグ内に以下のコードを記載すると、対応しているブラウザでのRSS購読が簡単になります。

      トップページの <head> タグ内に記載(青字部分はサイトに合わせて変更)
      <link rel="alternate" type="application/rss+xml"
          title="○○株式会社 社長日記 更新情報" href="/webdir/new.xml">

      なお、同じサイトに複数の製品を設置してRSSファイルが複数ある場合、この <link> タグも複数記載できます。

[目次ページへ戻る] [このページのトップへ戻る]