[目次へ戻る]

すぐ使えるCGI 画像付 ウェブページ更新ツール 大容量版（日本語 UTF-8 版） 説明書

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

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

実際の制作の際は

このページでは、テンプレートファイルの変更がどのようにページのデザインに反映されるかを、少しずつテンプレートを変更する事でご説明しています。

実際の制作では (1)サンプルページ（モックアップ）を先に完成してから (2)テンプレートファイルにコピー の順で作業するのがお勧めですが、「何ができるのか」が分からないとサンプルページを作るときに迷ってしまいますので、まずはこのチュートリアルで概要をつかんで下さい。

  1. 全一覧（目次）のデザイン変更 サブメニュー
  2. 全一覧（目次）のリスト部分の変更 サブメニュー
  3. 短い一覧（新着情報）のデザイン変更 サブメニュー
  4. 短い一覧（新着情報）のリスト部分の変更 サブメニュー
  5. 記事ページのデザイン変更 サブメニュー
  6. 画像部分の表示変更 サブメニュー
  7. 短い一覧の利用方法
  8. 短い一覧（新着情報）のホームページへの表示 サブメニュー
  9. 短い一覧（新着情報）への画像表示 サブメニュー
  10. 短い一覧（新着情報）への内容の抜粋（サマリー）表示 サブメニュー
  11. RSSファイルの設定 サブメニュー

  1. 全一覧（目次）のデザイン変更

    まずは全一覧（目次）のデザイン変更を行ってみます。

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

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

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

    2. ファイルの修正

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

      変更前 (templates/article/article_list.html)
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      <html lang="ja">
      <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <title>記事一覧</title>
      <link rel="alternate" type="application/rss+xml" title="記事一覧" href="new.xml">
      <link rel="start" href="%_page_first_%">
      <link rel="prev" href="%_page_prev_%">
      <link rel="next" href="%_page_next_%">
      <style type="text/css">
      .filelink {
          padding-left: 20px;
          margin-right: 10px;
          background: url(./icons/general.gif) no-repeat top left;
      }
      .doc {
          background-image: url(./icons/doc.gif)
      }
      .pdf {
          background-image: url(./icons/pdf.gif)
      }
      .ppt {
          background-image: url(./icons/ppt.gif)
      }
      .txt {
          background-image: url(./icons/txt.gif)
      }
      .xls {
          background-image: url(./icons/xls.gif)
      }
      .zip {
          background-image: url(./icons/zip.gif)
      }
      </style>
      </head>
      <body bgcolor="#ffffff">

      <h1>記事一覧</h1>

      <p>
      %_total_%件中 %_min_%-%_max_% を表示&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="%_page_first_%">[先頭]</a>
      <a href="%_page_prev_%">[前]</a>
      <a href="%_page_next_%">[次]</a>
      <a href="%_page_last_%">[最後]</a>
      </p>

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

      </ul>

      <p>
      %_total_%件中 %_min_%-%_max_% を表示&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="%_page_first_%">[先頭]</a>
      <a href="%_page_prev_%">[前]</a>
      <a href="%_page_next_%">[次]</a>
      <a href="%_page_last_%">[最後]</a>
      </p>

      </body>
      </html>
      変更後 (templates/article/article_list.html)
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      <html lang="ja">
      <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <title>○○株式会社 社長日記</title>
      <link rel="alternate" type="application/rss+xml" title="○○株式会社 社長日記" href="new.xml">
      <link rel="start" href="%_page_first_%">
      <link rel="prev" href="%_page_prev_%">
      <link rel="next" href="%_page_next_%">
      <style type="text/css">
      .filelink {
          padding-left: 20px;
          margin-right: 10px;
          background: url(./icons/general.gif) no-repeat top left;
      }
      .doc {
          background-image: url(./icons/doc.gif)
      }
      .pdf {
          background-image: url(./icons/pdf.gif)
      }
      .ppt {
          background-image: url(./icons/ppt.gif)
      }
      .txt {
          background-image: url(./icons/txt.gif)
      }
      .xls {
          background-image: url(./icons/xls.gif)
      }
      .zip {
          background-image: url(./icons/zip.gif)
      }
      </style>
      </head>
      <body bgcolor="#ffffff">

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

      <p>
      %_total_%件中 %_min_%-%_max_% を表示&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="%_page_first_%">[先頭]</a>
      <a href="%_page_prev_%">[前]</a>
      <a href="%_page_next_%">[次]</a>
      <a href="%_page_last_%">[最後]</a>
      </p>

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

      </ul>

      <p>
      %_total_%件中 %_min_%-%_max_% を表示&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="%_page_first_%">[先頭]</a>
      <a href="%_page_prev_%">[前]</a>
      <a href="%_page_next_%">[次]</a>
      <a href="%_page_last_%">[最後]</a>
      </p>

      </body>
      </html>

    3. 上書き保存

      変更が終わったらファイルを保存して下さい。
      保存の際の文字コードは BOMなし UTF-8（または Unicode など） にして下さい。

    4. アップロード

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

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

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

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

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

  2. 全一覧（目次）のリスト部分の変更

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

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

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

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

    2. ファイルの修正

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

      変更前 (templates/article/article_list.txt)
      <!-- BOMなし UTF-8（または Unicode など） で保存して下さい -->
      <li>
      %_yyyy_%-%_mm_%-%_dd_% (%_dayname_%)
      <a href="%_d_%.html">%_subject_%</a>
      <!-- <blockquote>%_summary_%</blockquote> -->
      <!-- 不要な表示は削除して下さい -->
      <div>
      <a href="%_d_%/%_imagename_escaped_1_%" target="_blank"><img src="%_d_%/%_thumbnail_escaped_1_%" style="width: 50px;" alt="%_imagetext_1_%"></a>
      <a href="%_d_%/%_imagename_escaped_2_%" target="_blank"><img src="%_d_%/%_thumbnail_escaped_2_%" style="width: 50px;" alt="%_imagetext_2_%"></a>
      <a href="%_d_%/%_imagename_escaped_3_%" target="_blank" class="filelink %_icon_class_3_%">%_imagetext_3_%</a>
      </div>
      </li>
      変更後 (templates/article/article_list.txt)
      <!-- BOMなし UTF-8（または Unicode など） で保存して下さい -->
      <li>
      <span style="color: #00cc00;">%_yyyy_%-%_mm_%-%_dd_% (%_dayname_%)</span>
      <a href="%_d_%.html">%_subject_%</a>
      <!-- <blockquote>%_summary_%</blockquote> -->
      <!-- 不要な表示は削除して下さい -->
      <div>
      <a href="%_d_%/%_imagename_escaped_1_%" target="_blank"><img src="%_d_%/%_thumbnail_escaped_1_%" style="width: 50px;" alt="%_imagetext_1_%"></a>
      <a href="%_d_%/%_imagename_escaped_2_%" target="_blank"><img src="%_d_%/%_thumbnail_escaped_2_%" style="width: 50px;" alt="%_imagetext_2_%"></a>
      <a href="%_d_%/%_imagename_escaped_3_%" target="_blank" class="filelink %_icon_class_3_%">%_imagetext_3_%</a>
      </div>
      </li>

    3. 上書き保存

      変更が終わったらファイルを保存して下さい。
      保存の際の文字コードは BOMなし UTF-8（または Unicode など） にして下さい。

    4. アップロード

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

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

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

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

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

  3. 短い一覧（新着情報）のデザイン変更

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

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

      短い一覧用のファイルは、 templates/article/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" "http://www.w3.org/TR/html4/loose.dtd">
      <html lang="ja">
      <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <meta http-equiv="Pragma" content="no-cache">
      <meta http-equiv="Cache-Control" content="no-cache">
      <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" "http://www.w3.org/TR/html4/loose.dtd">
      <html lang="ja">
      <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <meta http-equiv="Pragma" content="no-cache">
      <meta http-equiv="Cache-Control" content="no-cache">
      <title>新着記事</title>
      </head>
      <body bgcolor="#ccccff">

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

      </body>
      </html>

    3. 上書き保存

      変更が終わったらファイルを保存して下さい。
      保存の際の文字コードは BOMなし UTF-8（または Unicode など） にして下さい。

    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)
      <!-- BOMなし UTF-8（または Unicode など） で保存して下さい -->
      %_yyyy_%-%_mm_%-%_dd_% <a href="%_d_%.html" target="_top">%_subject_%</a><br>
      変更後 (templates/article/short_list.txt)
      <!-- BOMなし UTF-8（または Unicode など） で保存して下さい -->
      %_yyyy_%-%_mm_%-%_dd_% <a href="%_d_%.html" target="_top"><b>%_subject_%</b></a><br>

    3. 上書き保存

      変更が終わったらファイルを保存して下さい。
      保存の際の文字コードは BOMなし UTF-8（または Unicode など） にして下さい。

    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" "http://www.w3.org/TR/html4/loose.dtd">
      <HTML lang="ja">
      <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <title>%_subject_% (%_yyyy_%-%_mm_%-%_dd_%)</title>
      <meta name="description" content="%_summary_%">
      <link rel="alternate" type="application/rss+xml" title="記事一覧" href="new.xml">
      <link rel="contents" href="%_index_filename_%">
      <link rel="prev" href="%_to_prev_%">
      <link rel="next" href="%_to_next_%">
      <style type="text/css">
      .filelink {
          padding-left: 20px;
          margin-right: 10px;
          background: url(./icons/general.gif) no-repeat top left;
      }
      .doc {
          background-image: url(./icons/doc.gif)
      }
      .pdf {
          background-image: url(./icons/pdf.gif)
      }
      .ppt {
          background-image: url(./icons/ppt.gif)
      }
      .txt {
          background-image: url(./icons/txt.gif)
      }
      .xls {
          background-image: url(./icons/xls.gif)
      }
      .zip {
          background-image: url(./icons/zip.gif)
      }
      </style>
      </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_filename_%">↑トップ一覧へ</a></td>
      <td align="center"><a href="%_to_index_%">↑一覧へ</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_% (%_dayname_%)</p>
      </div>

      %_body_%

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

      <!-- 画像/ファイルの表示2: generated from article_image_2.txt -->
      %_article_image_2_%

      <!-- 画像/ファイルの表示3: generated from article_image_3.txt -->
      %_article_image_3_%
      </div>

      <div align="center">

      <table border="0" width="90%">
      <tr>
      <td width="20%"><a href="%_to_prev_%">←前へ</a></td>
      <td align="center"><a href="%_index_filename_%">↑トップ一覧へ</a></td>
      <td align="center"><a href="%_to_index_%">↑一覧へ</a></td>
      <td width="20%" align="right"><a href="%_to_next_%">次へ→</a></td>
      </tr>
      </table>

      </div>

      </body>
      </html>
      変更後 (templates/article/article.html)
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      <HTML lang="ja">
      <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <title>%_subject_% (%_yyyy_%-%_mm_%-%_dd_%)</title>
      <meta name="description" content="%_summary_%">
      <link rel="alternate" type="application/rss+xml" title="記事一覧" href="new.xml">
      <link rel="contents" href="%_index_filename_%">
      <link rel="prev" href="%_to_prev_%">
      <link rel="next" href="%_to_next_%">
      <style type="text/css">
      .filelink {
          padding-left: 20px;
          margin-right: 10px;
          background: url(./icons/general.gif) no-repeat top left;
      }
      .doc {
          background-image: url(./icons/doc.gif)
      }
      .pdf {
          background-image: url(./icons/pdf.gif)
      }
      .ppt {
          background-image: url(./icons/ppt.gif)
      }
      .txt {
          background-image: url(./icons/txt.gif)
      }
      .xls {
          background-image: url(./icons/xls.gif)
      }
      .zip {
          background-image: url(./icons/zip.gif)
      }
      </style>
      </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_filename_%">↑トップ一覧へ</a></td>
      <td align="center"><a href="%_to_index_%">↑一覧へ</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_% (%_dayname_%)</p>
      </div>

      %_body_%

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

      <!-- 画像/ファイルの表示2: generated from article_image_2.txt -->
      %_article_image_2_%

      <!-- 画像/ファイルの表示3: generated from article_image_3.txt -->
      %_article_image_3_%
      </div>

      <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_filename_%">↑トップ一覧へ</a></td>
      <td align="center"><a href="%_to_index_%">↑一覧へ</a></td>
      <td width="20%" align="right"><a href="%_to_next_%">[next]</a></td>
      </tr>
      </table>

      </div>

      </body>
      </html>

    3. 上書き保存

      変更が終わったらファイルを保存して下さい。
      保存の際の文字コードは BOMなし UTF-8（または Unicode など） にして下さい。

    4. アップロード

      FTPソフトでサーバの templates/article/ ディレクトリに移動して、 編集後の article.html をアップロードして下さい。

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

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

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

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

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

  6. 画像部分の表示変更

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

    記事ファイル用テンプレート templates/article/article.html にある %_article_image_1_% は画像の挿入位置を指定しています。
    実際に挿入されるタグは、templates/article/article_image_1.txt に指定します。

    画像2、3についても同様に、以下の組み合わせでそれぞれ位置とタグを指定します。

    - 画像2: %_article_image_2_% と templates/article/article_image_2.txt
    - 画像3: %_article_image_3_% と templates/article/article_image_3.txt

    初期設定では、画像1、2、3用にそれぞれ異なる設定がしてありますが、これはどのようにでも変更できます。

    また、Ver. 4.4 以上の製品は3つの画像を任意でファイルに変更する事ができます。これは、記事用のテンプレートに <img> を指定するか <a> を指定するかで切り替えます。Ver. 4.7 以上の製品では、「画像3」が初期設定でファイルになるように設定されています。

    画像（またはファイルの）タグが挿入される部分（青字） (templates/article/article.html)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <HTML lang="ja">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>%_subject_% (%_yyyy_%-%_mm_%-%_dd_%)</title>
    <meta name="description" content="%_summary_%">
    <link rel="alternate" type="application/rss+xml" title="記事一覧" href="new.xml">
    <link rel="contents" href="%_index_filename_%">
    <link rel="prev" href="%_to_prev_%">
    <link rel="next" href="%_to_next_%">
    <style type="text/css">
    .filelink {
        padding-left: 20px;
        margin-right: 10px;
        background: url(./icons/general.gif) no-repeat top left;
    }
    .doc {
        background-image: url(./icons/doc.gif)
    }
    .pdf {
        background-image: url(./icons/pdf.gif)
    }
    .ppt {
        background-image: url(./icons/ppt.gif)
    }
    .txt {
        background-image: url(./icons/txt.gif)
    }
    .xls {
        background-image: url(./icons/xls.gif)
    }
    .zip {
        background-image: url(./icons/zip.gif)
    }
    </style>
    </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_filename_%">↑トップ一覧へ</a></td>
    <td align="center"><a href="%_to_index_%">↑一覧へ</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_% (%_dayname_%)</p>
    </div>

    %_body_%

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

    <!-- 画像/ファイルの表示2: generated from article_image_2.txt -->
    %_article_image_2_%

    <!-- 画像/ファイルの表示3: generated from article_image_3.txt -->
    %_article_image_3_%
    </div>

    <div align="center">

    <table border="0" width="90%">
    <tr>
    <td width="20%"><a href="%_to_prev_%">←前へ</a></td>
    <td align="center"><a href="%_index_filename_%">↑トップ一覧へ</a></td>
    <td align="center"><a href="%_to_index_%">↑一覧へ</a></td>
    <td width="20%" align="right"><a href="%_to_next_%">次へ→</a></td>
    </tr>
    </table>

    </div>

    </body>
    </html>

    挿入されるHTMLタグ（画像1） (templates/article/article_image_1.txt)

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

    挿入されるHTMLタグ（画像2） (templates/article/article_image_2.txt)

    <!-- 画像2の表示指定。article.html の %_article_image_2_% 部分に挿入されます。 -->
    <div>
    <h4>%_imagetext_%</h4>
    <a href="%_d_%/%_filename_escaped_%" target="_blank" title="拡大:%_imagetext_%">
    <img src="%_d_%/%_thumbnail_escaped_%" alt="%_imagetext_%" hspace="2" vspace="2"></a>
    </div>

    挿入されるHTMLタグ（「画像3」にあたる部分をファイルにしたもの） (templates/article/article_image_3.txt)

    <!-- 画像3の表示指定。article.html の %_article_image_3_% 部分に挿入されます。 -->
    <a href="%_d_%/%_filename_escaped_%" title="%_imagetext_%" class="filelink %_icon_class_%">%_imagetext_%</a>

    ここでは、 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_% 部分に挿入されます。 -->
      <div>
      <img src="%_d_%/%_filename_escaped_%" alt="%_imagetext_%">
      </div>
      変更後 (templates/article/article_image_1.txt)
      <!-- 画像の表示指定。article.html の %_article_image_1_% 部分に挿入されます。 -->
      <div>
      <a href="%_d_%/%_filename_escaped_%" target="_blank">
      <img src="%_d_%/%_thumbnail_escaped_%" alt="%_imagetext_%"
      width="100" hspace="2" vspace="2"><br>クリックで拡大</a>
      </div>

    3. 上書き保存

      変更が終わったらファイルを保存します。
      保存の際の文字コードは BOMなし UTF-8（または Unicode など） にして下さい。

    4. アップロード

      FTPソフトでサーバの templates/article/ ディレクトリに移動して、 編集後の article_image_1.txt をアップロードして下さい。

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

      もう一度管理画面を開き、いずれかの記事に画像をアップロードして下さい。

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

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

  7. 短い一覧の利用方法

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

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

  8. 短い一覧（新着情報）のホームページへの表示

    短い一覧を「新着情報」としてホームページ（トップページ）などに表示するには、以下のような方法が使えます。

    - <IFRAME> タグ
    - SSI（Server Side Include）
    - PHPの readfile 関数

    ここでは、一番簡単な <IFRAME> タグでの組み込みを試してみましょう。

    <IFRAME> 以外の方法

    SSI（Server Side Include） や PHP を使った組み込み方法については、サイト上のサポート情報をご覧下さい。
    http://sugutsukaeru.jp/cgi/j/60/

    1. <IFRAME> タグの設定

      組み込み先ホームページに以下のコードを挿入して下さい。
      青字の部分は組み込み先ページから書き出しディレクトリまでのパスを設定して下さい。

      <IFRAME> タグ設定例
      <iframe
          frameborder="0"
          allowtransparency="true"
          height="300"
          width="270"
          marginheight="0"
          marginwidth="0"
          scrolling="no"
          src="webdir/index_short.html"
      ></iframe>

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

      表示の設定
      スクロールバーの調整

      登録した内容が長い場合も <IFRAME> のスクロールバーを出さないようにする方法は下記ページをご参照下さい。
      http://sugutsukaeru.jp/cgi/j/44/

      <IFRAME> ページへの直接アクセスを回避する

      検索エンジンなどから <IFRAME> 内のページに直接アクセスされてしまった場合にメインのページにジャンプする方法は下記ページをご参照下さい。
      http://sugutsukaeru.jp/cgi/j/45/

    2. 表示件数の設定

      短い一覧の書き出し件数は変更可能です。（初期設定では最新3件を表示。）
      設定方法は「オプション設定」を参照して下さい。

  9. 短い一覧（新着情報）への画像表示

    短い一覧（新着情報）にもサムネイル（縮小版）を表示する事ができます。

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

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

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

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

    2. ファイルの修正

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

      変更前 (templates/article/short_list.txt)
      <!-- BOMなし UTF-8（または Unicode など） で保存して下さい -->
      %_yyyy_%-%_mm_%-%_dd_% <a href="%_d_%.html" target="_top"><b>%_subject_%</b></a><br>
      変更後 (templates/article/short_list.txt)
      <!-- BOMなし UTF-8（または Unicode など） で保存して下さい -->
      %_yyyy_%-%_mm_%-%_dd_% <a href="%_d_%.html" target="_top"><b>%_subject_%</b></a>
      <img src="%_d_%/%_thumbnail_escaped_1_%"
      alt="%_imagetext_1_%" width="50" vspace="4" hspace="4"><br>

    3. 上書き保存

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

    4. アップロード

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

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

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

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

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

  10. 短い一覧（新着情報）への内容の抜粋（サマリー）表示

    記事内容欄の冒頭は自動的に抜粋され、記事の紹介文としてRSS（詳細後述）などで利用されています。この抜粋（サマリー）は書き出されるページにも表示できますが、ここでは、短い一覧にこれ表示させてみます。

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

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

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

    2. ファイルの修正

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

      変更前（初期設定） (templates/article/short_list.txt)
      <!-- BOMなし UTF-8（または Unicode など） で保存して下さい -->
      %_yyyy_%-%_mm_%-%_dd_% <a href="%_d_%.html" target="_top">%_subject_%</a><br>
      変更後 (templates/article/short_list.txt)
      <!-- BOMなし UTF-8（または Unicode など） で保存して下さい -->
      %_yyyy_%-%_mm_%-%_dd_% <a href="%_d_%.html" target="_top">%_subject_%</a><br>
      <blockquote>%_summary_%</blockquote>

    3. 上書き保存

      変更が終わったらファイルを保存して下さい。
      保存の際の文字コードは BOMなし UTF-8（または Unicode など） にして下さい。

    4. アップロード

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

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

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

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

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

      全一覧への表示

      同じ方法で全一覧にもサマリーの表示が可能です。
      全一覧の場合は templates/article/article_list.txt を編集して下さい。なお、バージョンによっては既にコメントとしてファイル内に記載されている場合がありますので、ファイルを見ながら編集して下さい。

    6. 文字数や後置の「...」の変更

      抜粋する文字数や、文章がカットされている事を示す「...」の部分は変更できます。
      設定方法は「オプション設定」を参照して下さい。

  11. RSSファイルの設定

    1. RSSとは？

      RSSは、サイト閲覧者が効率的にサイトの更新情報をチェックできる仕組みです。
      RSSファイルをウェブサイトに公開することにより、メールなどを送信しなくてもサイト閲覧者の方に効率よく情報配信できます。
      またRSSファイルがあれば、そこから自動的に Twitter など他のサイトに情報を反映してくれる外部サービスなどを利用する事もできます。

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

    2. サイトの情報を設定

      RSSファイル用の初期設定のテンプレートには、ダミーのサイト情報が記載されていますので、設置するサイトの情報に書き換えて下さい。

      必要があれば <pubDate> タグ内末尾のタイムゾーン（「+0900」の部分）も変更して下さい。「+0900」は日付が日本（東京）の標準時に基づくものであることを表しますが、例えばアルゼンチンであれば「-0300」となります。なお、時刻は 0時0分の固定表示になります。

      RSSファイル用テンプレートファイルは templates/article/rss_list.html と templates/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 ）にリンクして下さい。
      オレンジ色の地に白抜きの扇形のマークか、文字で「RSS」と表示した小さいアイコンでリンクするのが一般的です。

    5. RSSファイルの公開（ AutoDiscovery の設定、トップページ）

      リンクによるRSSファイルの公開に加えて、<head> タグ内に以下のコードを記載すると対応しているブラウザでのRSS購読が簡単になります。
      Webサイトのトップページなどにこのコードを追加して下さい。

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

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

    6. RSSファイルの公開（ AutoDiscovery の設定、記事ページ）

      記事ページのテンプレートには予め <head> タグ内に AutoDiscovery 用の <link> タグが設定してあります。
      使用する場合は title 属性（青字）をサイトに合わせて変更して下さい。

      テンプレートに指定のある AutoDiscovery タグ（ templates/article/xxx.html ）
      <link rel="alternate" type="application/rss+xml"
          title="○○株式会社 社長日記 更新情報" href="new.xml">
copyright(c) Sugutsukaeru Inc. All rights reserved.
[目次ページへ戻る] [このページのトップへ戻る]