小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

ファイル欄に画像をアップロードする方法

最終更新日: 2016-08-01
複数の画像のアップロード管理画面

「すぐ使えるCGI」の「添付ファイル付 ウェブページ更新ツール 大容量版」ではファイル数の制限無くファイルのアップロードができます。

初期設定ではこのファイル欄は PDF やワードなどのオフィスファイルがアップロードできるようになっていますが、この欄を画像用に使い、多数の画像をアップロードする事も可能です。

このページでは、このように管理画面をカスタマイズする方法をご紹介します。

複数画像がアップロードできる製品

以下の製品は既に元の「ファイル」欄の画像が画像として表示されるように調整済です。目的に合うものがあればダウンロードしてお使い下さい。このページで説明している設定は省略できます。

画像サイズ調整付 固定幅ブログ

画像サイズ調整付 固定幅ブログ

画像の表示サイズを一定にするための調整がされています。

Ver. 5.0 以降のレスポンシブWebデザイン管理画面をベースにしています。

表示オンラインデモ 詳細とダウンロード

サムネイル画像表示とライトボックス拡大機能付きブログ

サムネイル画像表示とライトボックス拡大機能付きブログ

記事ページ上で、多数並べたサムネイル画像を lightBox で拡大します。

Ver. 4.9 以前のテーブルレイアウトデザイン管理画面をベースにしています。

表示オンラインデモ 詳細とダウンロード

小規模 ECサイトの商品紹介ページ更新用CMS

小規模 ECサイトの商品紹介ページ作成

小規模ECサイトの商品ページ紹介用にカスタマイズした製品です。詳細ページに複数の製品紹介画像を掲載します。lightBox 拡大機能が付いています。

Ver. 4.9 以前のテーブルレイアウトデザイン管理画面をベースにしています。

表示オンラインデモ 詳細とダウンロード

不動産情報更新用CMS

不動産情報更新用CMS

不動産情報更新用にカスタマイズしたサンプルで、複数画像のサムネイルを並べて表示し、メインの画像の位置に次々に大きく表示していくタイプです。

Ver. 4.9 以前のテーブルレイアウトデザイン管理画面をベースにしています。

表示オンラインデモ 詳細・ダウンロード

ペライチホームページ作成

ペライチホームページ作成

1ページだけのホームページを更新するツールです。メイン画像はページトップのイメージ画像として使い、サブ画像は紹介用の写真を列挙するのに使っています。

Bootstrap 2.2.x をベースにした レスポンシブWebデザインの管理画面をベースにしています。

表示オンラインデモ 詳細・ダウンロード

管理画面カスタマイズ方法

管理画面のファイル欄を画像欄に変更するためには、以下の5つのファイルを編集して下さい。

編集対象ファイル

  • templates/admin/2.html
  • templates/admin/3.html
  • templates/admin/2_new_file_list.txt
  • templates/admin/2_current_file_list.txt
  • templates/admin/3_new_file_list.txt

注意点

製品とバージョンによって、元のファイルの内容が異なる場合があります。例示されているHTMLコードはそのままコピーせず参考にとどめて、「編集のポイント」に挙げられている点を変更して下さい。

templates/admin/2.html の編集

templates/admin/2.html は入力画面テンプレートです。下記例を参考に編集して下さい。

templates/admin/2.html の編集のポイント

  • 項目名の設定を変更します。お使いの用途に合わせて変更して下さい。

変更前対象部分

青字が変更対象部分です。

<TR>
<TH>添付ファイル<BR><BR>
<span style="font-size: 0.9em">
※<BR>リンクテキストを<BR>省略すると<BR>ファイル名でリンク
</span>
</TH>

 :(省略)

<TR>
<TH>画像</TH>
<TD>
%_imagename1_%
<B>(新規・変更)</B>
<INPUT TYPE="file" NAME="imagename1" SIZE="60"><br>
画像の説明:<INPUT TYPE="text" NAME="imagetext1" VALUE="%_imagetext1_%" SIZE="60" class="imeauto"><br>
<SPAN CLASS="msg_info">※新しいファイルを添付すると、既存のファイルは削除されます。<br>
※画像の説明は画像ファイルが添付されている時のみ有効です。
</SPAN>
</TD>
</TR>

変更例

赤字が変更例です。

<TR>
<TH>サブ画像
</TH>

 :(省略)

<TR>
<TH>メイン画像</TH>
<TD>
%_imagename1_%
<B>(新規・変更)</B>
<INPUT TYPE="file" NAME="imagename1" SIZE="60"><br>
画像の説明:<INPUT TYPE="text" NAME="imagetext1" VALUE="%_imagetext1_%" SIZE="60" class="imeauto"><br>
<SPAN CLASS="msg_info">※新しいファイルを添付すると、既存のファイルは削除されます。<br>
※画像の説明は画像ファイルが添付されている時のみ有効です。
</SPAN>
</TD>
</TR>

templates/admin/3.html の編集

templates/admin/3.html は確認画面テンプレートです。下記に示す変更か所を修正して下さい。

templates/admin/3.html の編集のポイント

  • 項目名の設定を変更します。先に変更した 2.html の項目設定に合わせて項目名を変更して下さい。

変更前対象部分

青字が変更対象部分です。

<TR>
<TH>添付ファイル</TH>
<TD>
<!-- new file list : generate from 3_new_file_list.txt -->
%_new_file_list_%
</TD>
</TR>

<TR>
<TH>画像</TH>
<TD>
<span class="msg_info">
※画像の下地はグレーで表示されています。<br>
※画像の枠が表示されています。
</span>
<br>
%_imagename1_%
</TD>
</TR>

templates/admin/2_new_file_list.txt の編集

2_new_file_list.txt は入力画面の新規ファイルアップロード欄を表示します。下記例を参考に編集して下さい。

templates/admin/2_new_file_list.txt の編集のポイント

  • 「リンクテキスト」を入力していた欄を画像のalt属性として転用するために、項目名を変更します。

変更前

青字が変更対象部分です。

<TR id="file_new_%_num_%" class="filetable_row">
<TD colspan="2" nowrap valign="top">
<INPUT type="file" name="filename%_num_%" size="60"><br>
リンクテキスト <INPUT type="text" name="filetext%_num_%" size="40" class="imeauto">
</TD>
<TD nowrap>
<INPUT type="button" onClick="change_order('new_%_num_%', 'up')" value="上へ">
<INPUT type="button" onClick="change_order('new_%_num_%', 'down')" value="下へ">
</TD>
</TR>

変更後

赤字が変更した部分です。

<TR id="file_new_%_num_%" class="filetable_row">
<TD colspan="2" nowrap valign="top">
<INPUT type="file" name="filename%_num_%" size="60"><br>
画像タイトル <INPUT type="text" name="filetext%_num_%" size="40" class="imeauto">
</TD>
<TD nowrap>
<INPUT type="button" onClick="change_order('new_%_num_%', 'up')" value="上へ">
<INPUT type="button" onClick="change_order('new_%_num_%', 'down')" value="下へ">
</TD>
</TR>

templates/admin/2_current_file_list.txt の編集

2_current_file_list.txt は、入力画面に、既にアップロードされている画像を表示する部分です。下記例を参考に編集して下さい。

templates/admin/2_current_file_list.txt の編集のポイント

  • ファイル名を囲っていた <a> の属性を必要に応じて変更します(青字)。
  • ファイル名の表示だった部分を画像タグに変更します(赤字)。
  • 「リンクテキスト」を入力していた欄を画像のalt属性として転用するために、項目名を変更します(緑字)。

変更前

色付き文字が変更対象部分です。

<TR id="file_current_%_n_%" class="filetable_row">
<TD nowrap valign="top">
<INPUT TYPE="hidden" NAME="current_file_id" VALUE="%_n_%">
<INPUT TYPE="hidden" NAME="current_file_name,%_n_%" VALUE="%_filedir_%/%_filename_%">
<A HREF="%_relative_filedir_%/%_filename_escaped_%" id="current_file_%_n_%" class="filelink %_icon_class_%" title="%_filetext_%" TARGET="_blank">%_filename_%</A><BR>
リンクテキスト <INPUT TYPE="text" NAME="current_file_text,%_n_%" VALUE="%_filetext_%" SIZE="40">
</TD>

変更後

色付き文字が変更した部分です。

<TR id="file_current_%_n_%" class="filetable_row">
<TD nowrap valign="top">
<INPUT TYPE="hidden" NAME="current_file_id" VALUE="%_n_%">
<INPUT TYPE="hidden" NAME="current_file_name,%_n_%" VALUE="%_filedir_%/%_filename_%">
<A HREF="%_relative_filedir_%/%_filename_escaped_%" id="current_file_%_n_%" title="実寸表示:%_filetext_%(%_filename_%)" TARGET="_blank"><img src="%_relative_filedir_%/%_filename_escaped_%" style="width: 100px;" alt="%_filetext_%" style="margin: 4px"></A><br>
画像タイトル <INPUT TYPE="text" NAME="current_file_text,%_n_%" VALUE="%_filetext_%" SIZE="40">
</TD>

templates/admin/3_new_file_list.txt の編集

3_new_file_list.txt は確認画面にアップロードされた画像を表示する部分です。下記例を参考に編集して下さい。

templates/admin/3_new_file_list.txt の編集のポイント

  • ファイルのリンクを画像の表示に変更します。

変更後

ファイル全体が以下の通りになります。

<div style="margin: 4px;">
<A HREF="%_relative_filedir_%/%_filename_escaped_%" TARGET="_blank" title="実寸表示:%_filetext_%(%_filename_%)"><img src="%_relative_filedir_%/%_filename_escaped_%" style="width: 100px;" alt="%_filetext_%"></A> (%_filetext_%)
</div>


アップロードと動作確認

変更したファイルをアップロードして下さい。その後管理画面にアクセスして、アップロードした画像が表示されていることを確認して下さい。

公開ページの設定

上記の変更後も、記事ページでは元の「ファイル」欄(=「サブ画像」欄)にアップロードした画像はファイルのリンクとして表示されます。画像として表示させるには適宜 templates/article/article_file.txt を変更して下さい。

templates/article/article_file.txt の変更例

<a href="%_d_%/%_filename_escaped_%" target="_blank" title="拡大:%_filetext_%">
<img src="%_d_%/%_filename_escaped_%" alt="%_filetext_%"></a>


画像の自動リサイズ

大きい画像をアップロードした場合自動リサイズ(自動縮小)が可能です。設定方法は以下のページをご覧下さい。

画像の縮小をする方法

関連リンク

さらに詳しく