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

「すぐ使えるCMS」(「添付ファイル付 ウェブページ更新ツール 大容量版」)ではファイル数の制限無くファイルのアップロードができます。初期設定ではこのファイル欄は PDF や、ワードなどのオフィスファイルがアップロードできるようになっていますが、この欄を画像用に使い、多数の画像をアップロードする事も可能です。

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

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

管理画面のファイル欄を画像欄に変更するためには、以下の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>

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

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

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

変更前

変更前は、ファイルのリンクが指定されています。

コピー
<a href="%_relative_filedir_%/%_filename_escaped_%" class="filelink %_icon_class_%" title="%_filename_%" target="_blank">%_filetext_%</a>
(%_filename_%)
<br>

変更後

変更後は例えば以下のように、ファイルリンクを画像に変更します。元の href の内容(%_relative_filedir_%/%_filename_escaped_%)が画像のsrc になり、元のリンクテキスト(%_filetext_%)は alt 属性として使えます。

コピー
<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 を希望のデザイン合うように変更して下さい。

要点は、先ほどの管理画面の変更と同様で、元の href が画像の src、リンクテキストが alt 属性などの画像のタイトルになります。

templates/article/article_file.txt の変更例

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

画像の自動リサイズ

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

画像の縮小をする方法

関連記事

画像は何個までアップロードできますか?

基本のマニュアル よくある質問
「すぐ使えるCMS」のサポート情報。アップロードできる画像の枚数は、製品によって3個から5個のものと、無制限のものがあります。