「すぐ使える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>templates/admin/3_new_file_list.txt の編集
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>
画像の自動リサイズ
大きい画像をアップロードした場合自動リサイズ（自動縮小）が可能です。設定方法は以下のページをご覧下さい。