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

PDF/オフィスファイル一覧作成ツール

最終更新日: 2016-08-10
ダウンロードファイル一覧

「すぐ使えるCGI」の画像アップロード機能をPDFなどのファイル用に使うと、タイトルからファイルをダウンロードする構成のページが作成できます。

このページでは既に設定済のデモサンプルをご紹介するとともに、ファイルのリンクの仕組みをご紹介します。

デモツールの機能

デモツールでは、サムネイル画像付でファイルの一覧が作成できます。

タイトルからのファイルリンク

タイトルからのファイルダウンロード

詳細ページを経ずに、タイトルからファイルのダウンロードが可能です。

ファイルが無い場合でも、タイトルが消えてしまったりはしません。

メインファイルとサブファイル

メインファイルとサブファイル

タイトルからリンクするメインのファイル以外に、サブファイルもアップロードする事ができます。

サブファイルはいくつでもアップロードできます。

自動アイコンとサムネイル画像

アイコンとサムネイル表示

ファイルがある場合は、リンクに自動的にファイルの種類を示すアイコンが付きます(PDF、エクセル、ワード、パワーポイント、ZIP、テキスト、画像)。

また、ファイルの内容をイメージさせるためのサムネイル画像をアップロードする事ができます。画像が無い場合は自動的に代替画像を表示します。

PDF/オフィスファイル一覧作成ツール設置方法

下のボタンから製品をダウンロードし、ダウンロードが終わったページからリンクしている「ステップ by ステップガイド」をご覧になりながら製品を設置して下さい。

PDF/オフィスファイル一覧作成ツール ダウンロード ※お試し利用は1ヶ月間無料です。

動作確認

「8. 設置完了」まで設置がうまく行ったら、テストで1件新規登録して下さい。

表示確認

管理画面一覧の「チェック」ボタンを押して、デモと同様の表示になるかを確認して下さい。

デザインの変更

デザインは変更しなくても使えますが、必要な場合は導入先のウェブサイトのデザインに合わせてデザインテンプレートを変更して下さい。

  1. ファイルのリンクの仕組み
  2. CSSファイルの場所
  3. サムネイル画像のサイズと枠線の変更
  4. サムネイル画像が無い場合の初期設定の表示
  5. サムネイル画像表示のレスポンシブWeb調整

ファイルのリンクの仕組み

このサンプルでは、1番画像をファイルとして使っています。このファイルのリンクの仕組みには少々仕掛けがありますので、デザイン調整の際は下記の点に留意して下さい。

画像欄をファイルとして使う

画像欄をファイルとして使う方法の説明は下記ページをご覧下さい。ファイルを固定位置に表示(今回の場合なら、タイトルからリンク)したい場合にこの方法を使います。

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

この時、記事用テンプレートを以下のように指定すると、ファイルがアップロードされなかった場合はその間のリンクテキストと一緒にリンクタグ(<a>)が削除され、ページには表示されません。(「#」は数字です。)

ファイルがアップロードされなかったら削除される表記 例1: リンクテキスト

これは、入力したリンクテキスト(元の「画像の説明」欄)を表示する時のテンプレートの指定です。このように指定すると、ファイルがアップロードされなければこの表示部分全体が削除されます。

<a href="%_d_%/%_imagename_escaped_#_%">%_imagetext_#_%</a>


ファイルがアップロードされなかったら削除される表記 例2: 固定文字列

これは、ファイル欄の用途を決めて(この場合だったら「地図をアップロードする」)リンクさせている例です。もし編集時に地図のPDFファイルがアップロードされなかったら、これも <a> タグごと「PDF形式 地図」という文字列が削除されます。

<a href="%_d_%/%_imagename_escaped_#_%">PDF形式 地図</a>


ファイルがアップロードされなくても削除されない表記例: タイトル

一方、リンクタグの間に他の入力項目(を示すテンプレート変数)がある場合、ファイルがアップロードされなくてもその内容は残り、<a> タグだけ削除されます。

<a href="%_d_%/%_imagename_escaped_#_%">%_subject_%</a>


この表記では、ファイルが無かった場合も「%_subject_%」の内容、つまり、タイトルが表示されます。

ファイルが無くても残る入力内容

ファイルがアップロードされなくても内容が残るのは、間に以下のテンプレート変数いずれかが含まれていた場合です(「#」は数字)。

記号内容
%_yyyy_%日付(年)
%_mm_%日付(月)
%_dd_%日付(日)
%_dayname_%曜日
%_subject_%タイトル
%_summary_%サマリー
%_body_%本文
%_linetext#_%カスタム項目
%_blocktext#_%カスタム項目
%_imagename_escaped_#_%画像のリンク(大画像)
%_thumbnail_escaped_#_%画像のリンク(サムネイル)

CSSファイルの場所

デザインを指定してある CSS ファイルは以下の2ファイルです。ページ上の細かい要素の設定は sugu-248-file-download.css に、ページレイアウト等の基本的な設定は sugu-site.css にあります。

  • webdir/parts/css/sugu-248-file-download.css
  • webdir/parts/css/sugu-site.css

サムネイル画像のサイズと枠線の変更

サムネイルのサイズと枠
サムネイルは、画像サイズ(形)に関わらず、100px × 100px の正方形で表示されるようになっています。

サムネイル画像のサイズ変更

サムネイル画像の表示サイズを変える場合は、webdir/parts/css/sugu-248-file-download.css 内の設定を変更して下さい(下記青字部分)。

/* サムネイル */
.thumbnail-100 {
	position: relative;
	width: 100px; /* サムネイルの幅 */
	height: 100px; /* サムネイルの高さ */
	display: inline-block;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-color: #999;
	overflow: hidden;
	margin: 0.8em 0;
}

参考情報:サムネイル画像の縦横比の調整

サムネイル画像の縦横比の調整は下記ページの方法を使っています。設定方法がよく分からなかった場合は下記ページをご覧下さい。

画像の表示サイズを揃える方法

サムネイル画像の枠線の変更

サムネイル画像の枠線も webdir/parts/css/sugu-248-file-download.css 内に設定があります。それぞれ以下の様に指定されています。適宜変更して下さい。

もし枠線を一切表示しない場合は、CSS ファイルではなく、テンプレートファイル templates/article/article_list.txt からクラス「img-bordered」を削除して下さい。

/* 画像の枠 */
.img-bordered {
	box-sizing: content-box; /* サイズの収まり調整 */
	border: 4px solid white; /* 枠線の太さ、色 */
	border-radius: 2px; /* 角丸の大きさ */
	box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2); /* ドロップシャドウ(影) */
}

サムネイル画像の実サイズの調整

サムネイル画像の表示サイズを大幅に変更する時は、下記ページの方法で画像のリサイズ設定を変更して下さい。リサイズ設定変更しないと、無駄に画像が大きく表示に時間が掛かったり、逆に画像が荒く表示されたりします。

画像の縮小をする方法

サムネイル画像が無い場合の初期設定の表示

サムネイル初期画像の変更
サムネイル画像がアップロードされなかった場合、初期設定では「No Image」という画像が表示されています。この表示を変更する事ができます。

画像の準備

代りに表示する画像を作成して、サーバにアップロードする場所を決めて下さい。

templates/article/article_list.html の編集

templates/article/article_list.html の末尾に以下のような JavaScript があります。赤字部分を、表示する画像の URL に変更して下さい。

/* 画像のサイズ調整 */
$('.size-adjust').each(function(){
	if (0 < $("img", this).length){ 
 		size_adjust($("img", this), $(this).width());
	} else {
		$(this).css("background-image", "url(./parts/img/noimage.png)");
	}
});

アップロード

ファイルの変更を行ったら、編集した templates/article/article_list.html と画像ファイルをサーバに上書きアップロードして下さい。

反映と確認

アップロード後、管理画面一覧の下にある「再構築(テンプレート変更反映)」ボタンを1回押して下さい。

再構築後に、ブラウザのキャッシュをクリアして表示を確認して下さい。

サムネイル画像表示のレスポンシブWeb調整

このサンプルはレスポンシブWebデザインで、スマートフォン等、端末の幅が狭かった場合はサムネイル画像は表示されない設定になっています。

スマホでもサムネイル画像を表示する

スマートフォン等小さな端末でもサムネイル画像を表示するには、templates/article/article_list.txt を編集してクラス「sugu-hidden-tiny」を削除して下さい(下記青字部分)。

<div class="pure-g sugu-entry" id="e%_d_%">
	<div class="thumbnail-100 size-adjust img-bordered sugu-hidden-tiny">
		<a href="%_d_%/%_imagename_escaped_1_%" target="_blank">
		<img src="%_d_%/%_thumbnail_escaped_2_%" alt="%_subject_%">
		</a>
	</div>
 :(以下省略)

テンプレートを編集したら、サーバに上書きアップロードの上、「再構築(テンプレート変更反映)」を行って下さい。

ページを固定幅にしたい場合

レスポンシブWebデザイン(PC/スマホ両用)を止めて固定幅にしたい場合は下記をご覧下さい。

レスポンシブWebテンプレートを非レスポンシブ(PC専用/スマホ専用)に変更する方法

関連リンク

さらに詳しく