ファイルの自動判別アイコンの種類を増やす方法

「すぐ使えるCMS」では、ファイルをアップロードすると、ファイルの拡張子から自動的にファイルタイプを判別してアイコンを表示します。

判別できるファイルは下表の通りですが、さらに JavaScript を利用して対応アイコンを増やす方法をご紹介します。

製品の初期設定で対応しているファイルタイプ

以下のファイルタイプは製品の初期設定で自動判別に対応しています。このページの方法は不要です。

バージョン対応しているファイルタイプ
Ver. 4.7 以下 PDF、ワード、エクセル、パワーポイント、テキスト
Ver. 4.8 以上 上に加えて ZIP、画像(png, gif, jpg, svg, svgz)

対象製品

ファイルのアップロードのできる製品全てで対応しています。

準備

製品の設置

ご利用になる製品をダウンロードして設置して下さい。

テスト登録

テストデータとして記事を1件登録して下さい。その際、添付ファイルを色々添付してみて下さい。自動判別対応の無いファイルについては「その他」扱いで単純なアイコンが表示されます。

アイコン表示方法の確認

お使いになる製品によって、アイコンが画像タグ（<img>）として表示されるものと、CSS（スタイルシート）の設定で背景画像として表示されるものがあります。お使いになっている製品がどちらのタイプかを確認して下さい。画像の表示に対応するテンプレートファイルをご覧になると、どのように表示されているかが分かります。

画像タグとしてアイコンが表示される場合の例

画像タグとしてアイコンが表示されるのは、比較的旧いバージョンの製品です。「%_icon_map_%」または「%_icon_map_#_%」（「#」は数字）というテンプレート変数が使われています。

コピー 
<li>
<img src="./icons/%_icon_map_%" width="16" height="16" alt="">
<a href="%_d_%/%_filename_escaped_%" target="_blank">%_filetext_%</a>
</li>

背景画像としてとしてアイコンが表示される場合の例

新しい製品の初期設定では、「%_icon_class_%」または「%_icon_class_#_%」（「#」は数字）というテンプレート変数が使われています。

コピー 
<li>
<a href="%_d_%/%_filename_escaped_%" target="_blank" class="filelink %_icon_class_%">%_filetext_%</a>
</li>

アイコン画像の準備

アイコン画像の作成

追加表示させるアイコン画像を準備して下さい。その際、ピクセルサイズを他のアイコンと同じにして下さい。「すぐ使えるCMS」に同梱されているアイコンのサイズは 16ピクセル × 16ピクセル です。

アイコンアップロード

作成したアイコンを webdir/icons/ ディレクトリにアップロードして下さい。

ファイルアイコン切替えの設定方法

アイコン表示を切り替えるために、テンプレートファイルを下記の通り編集して下さい。

編集対象ファイル

どのページに、また、どのファイル項目を使ってファイルを表示しているかで、編集対象ファイルが異なります。ご自身のパターンに合わせて、編集対象ファイルを選んで下さい。

掲載ページ項目編集対象ファイル
ファイル部分(A)全体(B)
1詳細ページwebdir/1.html、2.html、...複数ファイルarticle_file.txtarticle.html
2詳細ページwebdir/1.html、2.html、...固定画像の転用article_image_#.txtarticle.html
3全一覧（目次）webdir/index.html複数ファイルarticle_file.txtarticle_list.html
4全一覧（目次）webdir/index.html固定画像の転用article_list.txtarticle_list.html
5短い一覧（新着情報）webdir/index_short.html複数ファイルarticle_file.txtshort_list.html
6短い一覧（新着情報）webdir/index_short.html固定画像の転用short_list.txtshort_list.html

このサポートページでは、詳細ページの複数ファイル（表中の1）の編集を中心に説明します。他のパターンについては適宜読み替えて下さい。

ファイルリンク部分を<span>で囲う

ファイル部分用テンプレートファイル（A）を開いて、ファイルリンクのタグを、<span> で囲って下さい。なお、周辺のタグはバージョンによって異なります。<span> タグの追加だけを行って下さい。

例：画像タグとしてアイコンを表示している templates/article/article_file.txt

コピー 
<li>
<span>
<img src="./icons/%_icon_map_%" width="16" height="16" alt="">
<a href="%_d_%/%_filename_escaped_%" target="_blank">%_filetext_%</a>
</span>
</li>

例：背景画像としてアイコンを表示している templates/article/article_file.txt

コピー 
<li>
<span>
<a href="%_d_%/%_filename_escaped_%" target="_blank" class="filelink %_icon_class_%">%_filetext_%</a>
</span>
</li>

CSSの編集（背景画像の場合のみ）

背景画像としてアイコンを表示する場合は、アイコン用の追加クラスを定義して下さい。

アイコンが表示されているしくみ

「すぐ使えるCMS」では、テンプレート変数「%_icon_class_%」または「%_icon_class_#_%」（「#」は数字）の場所（下記赤字部分）に、拡張子から判別したクラスを自動的に出力します。このクラスに対して背景画像を指定する事により、アイコンが表示されています。

コピー 
<a href="%_d_%/%_filename_escaped_%" target="_blank" class="filelink %_icon_class_%">%_filetext_%</a>

編集するCSSファイル

製品とバージョンによってCSSが設定されている場所が異なります。以下の順で探して下さい。

  1. webdir/parts/css/site.css
  2. webdir/parts/css/common.css
  3. webdir/parts/css/sugu-site.css
  4. ページ用テンプレート（B）の <head> 内

もし複数の場所に同様の設定があってどれが有効か分からない場合は、下記ページの方法で、書き出されたページのアイコンにどのCSSが適用されているかを調べて下さい。

CSSの設定を調べる方法（Web開発者ツールの使い方）

新しい背景画像の追加例

新たに表示するアイコンについて、既存のアイコンと同様の形式で、背景画像を指定して下さい。例えば、以下の様に追加します（赤字部分）。

コピー 
　：
.xls {
  background-image: url(../../icons/xls.gif);
}
.zip {
  background-image: url(../../icons/zip.gif);
}
/* ここまで既存の設定 */
.mp3 {
  background-image: url(../../icons/icon_mp3.gif);
}
.mp4 {
  background-image: url(../../icons/icon_mp4.gif);
}

ファイル表示部分にid属性を追加

ここからは、また全ての方が対象です。編集対象ページのテンプレートファイル（B）を編集して、ファイル表示をまとめているタグに id属性を付けて下さい（下記赤字例）。もしファイル部分だけが一つのブロックに固まっていなかったら、<div> タグで囲って下さい。

例：詳細ページに複数ファイルを表示する templates/article/article.html

コピー 
<ul class="sugu-file-list" id="atchfiles">
<!-- attached files : generate from article_file.txt -->
%_file_list_%
</ul>

例：全一覧に固定画像を転用してファイルを表示する templates/article/article_list.html

コピー 
<ul class="sugu-file-list" id="atchfiles">
<li><img src="./icons/%_icon_map_1_%" width="16" height="16" alt=""> <a href="%_d_%/%_imagename_escaped_1_%" title="%_imagetext_1_%">%_imagetext_1_%</a></li>
<li><img src="./icons/%_icon_map_2_%" width="16" height="16" alt=""> <a href="%_d_%/%_imagename_escaped_2_%" title="%_imagetext_2_%">%_imagetext_2_%</a></li>
<li><img src="./icons/%_icon_map_3_%" width="16" height="16" alt=""> <a href="%_d_%/%_imagename_escaped_3_%" title="%_imagetext_3_%">%_imagetext_3_%</a></li>
</div>

JavaScript スクリプトの追加

引き続き、編集対象ページのテンプレートファイル（B）を編集して、JavaScript を追加します。ファイルの末尾の </body> の直前に、アイコン表示方法によってそれぞれ以下のコードを追加して下さい。

画像タグとしてアイコンを表示する場合

赤字の「atchfiles」は上で追加したid属性です。もし違う id属性を付けた場合は変更して下さい。

青字と緑字部分は、アイコンを切り替える画像拡張子（青字）とそれに対応させるアイコンファイルの名前（緑字）を指定します。画像拡張子（青字）はドット（.）を含め、小文字のアルファベットで指定して下さい。アップロードされたファイル拡張子の大文字小文字は同一視され、判別されます。アイコンの種類を追加する分、行をコピーして指定して下さい。

コピー 
<!-- アイコン切り替え用スクリプト -->
<script type="text/javascript"><!--
var MyContainer = document.getElementById("atchfiles"); /* ファイル領域の親要素 */
 
 /* 変更するアイコンを1行に一つ指定： 
左から 拡張子(小文字で指定)、表示するアイコンファイル名 */
var myIcons = new Array(
    [".mp3", "icon_mp3.gif"]
    ,[".mp4", "icon_mp4.gif"]
    ,[".m4a", "icon_mp3.gif"] /* 追加するときはこの行をコピー */
);
 
/* ファイル要素 を一つずつ調べていく */
var FileList = MyContainer.getElementsByTagName("span");
for (i=0; i<FileList.length; i++){
    var MyFile = FileList[i];
    var MyExt = MyFile.getElementsByTagName("a")[0].getAttribute("href").toLowerCase();
    var MyImg = MyFile.getElementsByTagName("img")[0];
    var OrgSrc = MyImg.getAttribute("src");
    for (j=0; j<myIcons.length; j++){
        if (MyExt.lastIndexOf(myIcons[j][0], MyExt.length - myIcons[j][0].length)>=0){ 
            MyImg.src = OrgSrc.replace(/general\.gif/, myIcons[j][1]);
        }
    }
}
// --></script>
<!-- この直後に body 終了タグ -->

背景画像としてアイコンを表示する場合

赤字の「atchfiles」は上で追加したid属性です。もし違う id 属性を付けた場合は変更して下さい。

青字と緑字部分は、アイコンを切り替える画像拡張子（青字）とそれに対応させるCSSクラス名（緑字、上で編集したもの）を指定します。画像拡張子（青字）はドット（.）を含め、小文字のアルファベットで指定して下さい。アップロードされたファイル拡張子の大文字小文字は同一視され、判別されます。アイコンの種類を追加する分、行をコピーして指定して下さい。

コピー 
<!-- アイコン切り替え用スクリプト -->
<script type="text/javascript"><!--
var MyContainer = document.getElementById("atchfiles"); /* ファイル領域の親要素 */
 
/* 変更するアイコンを1行に一つ指定： 
左から 拡張子(小文字で指定)、アイコンを指定したクラス名 */
var myIcons = new Array(
    [".mp3", "mp3"]
    ,[".mp4", "mp4"]
    ,[".m4a", "mp3"] /* 追加するときはこの行をコピー */
);
 
/* ファイル要素 を一つずつ調べていく */
var FileList = MyContainer.getElementsByTagName("span");
for (i=0; i<FileList.length; i++){
    var MyFile = FileList[i];
    var MyExt = MyFile.getElementsByTagName("a")[0].getAttribute("href").toLowerCase();
    var MyItemClass = MyFile.getElementsByTagName("a")[0].classList;
    if (MyItemClass.contains("general")){
        for (j=0; j<myIcons.length; j++){
            if (MyExt.lastIndexOf(myIcons[j][0], MyExt.length - myIcons[j][0].length)>=0){ 
                MyItemClass.add(myIcons[j][1]);
                MyItemClass.remove("general");
            }
        }
    }
}
// --></script>
<!-- この直後に body 終了タグ -->

アップロード

変更したファイルをサーバに上書きアップロードして下さい。

再構築

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

確認

ページを再読み込みして、アイコンが変更される事を確認して下さい。

関連記事

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

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

「すぐ使えるCMS」の画像管理機能

基本のマニュアル よくある質問
「すぐ使えるCMS」の画像管理機能のまとめ。バージョンによって、アップロード個数、サムネイル（縮小版）自動作成、SVGファイルへの対応などが異なります。

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

基本のマニュアル ホームページ画面
「すぐ使えるCMS」の Ver. 4.4 以降では、画像アップロード欄をファイルアップロード用に切り替えて使う事ができます。テンプレートを編集して切り替えを行う方法のご紹介。

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

基本のマニュアル ホームページ画面
「すぐ使えるCMS」のファイル欄を画像アップロード用に変更する方法。数の制限無く画像がアップロードできるようになります。

広告