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

dl, dt, dd を使いファイルを表組みで表示するCSS

最終更新日: 2015-07-29
アップロードしたファイルを表組み(列組み、段組み)表示

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

アップロードしたファイルを表組み(列組み、段組み)で表示する方法をご紹介します。1列または2列の表にできます。HTMLコード上は定義リスト(<dl>、<dt>、<dd>)を使います。

レスポンシブWeb対応

表のレスポンシブWeb対応

ホームページで表を表示する時、<table> タグを使うとウィンドウの表示幅が狭い時に列の幅が狭くなり表が縦に伸びてしまったり、固定幅を指定すれば表の右側が欠けたりと、見にくくなってしまいます。

<dl> リストを使うとこの問題にも対応可能で、想定した幅よりウィンドウが狭い時は、「見出し」と「内容」を上下に表示し、列の潰れや表の欠けを防ぐ事ができます。

設定方法

ダウンロードと設置

このファイル管理ツール(CMS)を使うには、下記のボタンからダウンロードして設置して下さい。「すぐ使えるCGI」の「添付ファイル付 ウェブページ更新ツール 大容量版」に、予め必要な設定がされています。

ファイル更新管理ツール(CMS)ダウンロード ※お試し利用は1ヶ月間無料です。

ダウンロードした後は「添付ファイル付 ウェブページ更新ツール 大容量版」の「ステップ by ステップガイド」をご覧になりながら設置を行って下さい(この説明書はダウンロードしたページからリンクでアクセスできます)。

既にお手元にお持ちの製品に設定を行いたい場合は、ダウンロードしたファイルから以下の2ファイルを取り出してお手元のファイルを置き換えて下さい。
  • templates/article/article.html
  • templates/article/article_file.txt

テスト登録

「ステップ by ステップガイド」の「8. 設置完了」まで進んだら、記事を登録してデモと同じような表示になるかを確認して下さい。

ページのデザインの変更方法

基本的なデザイン変更方法

「すぐ使えるCGI」のデザイン変更は全て「テンプレート」と呼んでいるHTMLファイルの編集で行えます。ページデザインの基本的な設定方法は「デザイン変更チュートリアル」をご覧下さい。

ただし、このページからダウンロードできるサンプルには製品の初期設定に加えて既にファイルの表組表示のための変更がされていますので、さらに必要な部分のみ導入先のWebサイトに合わせてカスタマイズして下さい。

このサポートページでは、このツールに特有の以下の変更方法についてご説明します。

  1. 表の列数を決定する
  2. 文字サイズの変更
  3. 表の幅や列の幅を変える
  4. セルの背景色を変える
  5. ファイルリンクの色や表示を変える
  6. 画像を掲載しない

設定方法の概要

デザイン変更は全て templates/article/article.html を編集して行います。下記のご説明では全てこのファイルを編集して下さい。

変更の反映と確認

ファイルを変更したら、サーバに上書きアップロードの後、管理画面の一覧から「再構築(テンプレート変更反映)」を行って下さい。その後、ブラウザのキャッシュをクリアしてからページを再読み込みをして変更の確認を行って下さい。

表の列数を決定する

初期設定のテンプレートでは、1列表示と2列表示の設定例が両方とも含まれています。ご自身に必要な方を残して、残りを削除して下さい。

<dl>、<dt>、<dd>を使った1列の表
<dl>、<dt>、<dd>を使った2列の表
初期設定の記事用のテンプレートファイル templates/article/article.html には下記の設定が両方含まれています。下記例の赤字が2列用、青字が1列用です。不要な方を削除して下さい。
<h3>2列に表示</h3>
<!-- ファイルの表示: 2列の場合 -->
<dl class="filelist double">
<!-- attached files : generate from article_file.txt -->
%_file_list_%
</dl>
<div style="clear: both;"></div>

<h3>1列に表示</h3>
<!-- ファイルの表示: 1列の場合 -->
<dl class="filelist single">
<!-- attached files : generate from article_file.txt -->
%_file_list_%
</dl>
<div style="clear: both;"></div>

文字サイズの変更

templates/article/article.html の <head> と </head> の間にスタイルシート(CSS)の設定があり、文字サイズをしていしています。下記例の青字部分が文字サイズです。文字サイズを変更したら、1行の高さも適宜変更して下さい(赤字部分)。

/* 表組の基本設定 */
.filelist dt,
.filelist dd
{
	font-size: 16px; /* 文字サイズ */
	height: 24px; /* 1行の高さ */
	padding: 4px 0 0 4px; /* 枠内 padding: 数値で指定する */
	overflow: hidden; /* あふれたら非表示 */
	white-space: nowrap; /* 高さが揃っている事が必要なので、改行ができない(行数が決まっていればOK) */
	float: left;
	border-bottom: 1px solid gray; /* 罫線の幅と色(以下2行、および dtの定義内、メディアクエリ設定内に同じ属性を設定) */
	border-top: 1px solid gray;
	border-right: 1px solid gray;
	margin-top: -1px; /* border幅:上下罫線の重複を解消 */
}

表の幅や列の幅を変える

表の列幅の変更が可能です。ただし、表示する幅は固定で決めておく必要があります。

初期設定の2列の設定では表の幅が 800px、1列 400px の2列組、タイトル列の幅が幅 150px、ファイル列の幅 が 250px にしてあります(下図参照)。アップロードする予定のファイル名の長さ、ファイルタイトルの長さ、ページデザイン、フォントサイズ等を考慮して幅を決定して下さい。

アップロードしたファイルを表組み(列組み、段組み)にするために、表の幅を決定する

変更の手順

1列表示、2列表示いずれの場合も、templates/article/article.html の <head> と </head> の間にスタイルシート(CSS)の設定がありますのでこれを編集して下さい。決定した幅に応じてCSSの設定を編集していきますが、その際以下の順番に設定して下さい。

1列、2列どちらの場合も、下に設定場所を色分け表示します。

  1. セル内の padding の設定をする(細字で赤字の1か所)
  2. 罫線の幅を決めて border の設定をする(太字で青字の5か所)
  3. 罫線の幅をマイナスした margin の設定をする(太字で赤字の2か所)
  4. 決定した表の幅と罫線の幅から外枠の幅(width)を計算して設定する(細字で赤字の1か所)
  5. 決定したタイトル列とファイル列の幅から罫線とパディングの幅を引いてこれらの列の幅(width)を設定する(細字で青字の2か所)
  6. レスポンシブにタイトル列とファイル列を上下に表示する時の切り替え幅(max-width)を設定する(黒太字1か所)

2列の表の幅変更のための設定箇所

/* 表組の基本設定 */
.filelist dt,
.filelist dd
{
	font-size: 16px; /* 文字サイズ */
	height: 24px; /* 1行の高さ */
	padding: 4px 0 0 4px; /* 枠内 padding: 数値で指定する */
	overflow: hidden; /* あふれたら非表示 */
	white-space: nowrap; /* 高さが揃っている事が必要なので、改行ができない(行数が決まっていればOK) */
	float: left;
	border-bottom: 1px solid gray; /* 罫線の幅と色(以下2行、および dtの定義内、メディアクエリ設定内に同じ属性を設定) */
	border-top: 1px solid gray;
	border-right: 1px solid gray;
	margin-top: -1px; /* border幅:上下罫線の重複を解消 */
}

/* タイトル列 */
.filelist dt
{
	border-left: 1px solid gray; /* 罫線の幅と色(上の基本設定と同じものを指定) */
	margin-left: -1px; /* 左側罫線の重複を解消 */
}

:(途中省略)

/* 幅の指定 2列の場合 ここから */
/* 表組全体の外枠に該当 */
.double
{
	width: 804px; /* 列幅の合計 + border幅(1px) x 列数(ズームアウト時のブラウザ互換性) */
}

/* タイトル列 */
.double dt
{
	width: 145px; /* タイトル列幅 - border幅(1px) - padding幅(4px) */
}

/* ファイル列 */
.double dd
{
	width: 245px; /* ファイル列幅 - border幅(1px) - padding幅(4px) */
}

/* 幅が指定より狭いときはタイトル列と内容を上下に表示 */
@media screen and (max-width: 750px) { /* 切り換えの幅はきっちり(799px)でも、右側が大きく隠れてしまう時でもよい。 */
	.double {width: 100%;}
	.double dt
	,.double dd
	 {
		width: 95%;
		border-left: 1px solid gray; /* 罫線復活 */
		margin-left: 0; /* 罫線復活 */
	}
}
/* 幅の指定 2列の場合 ここまで */

1列の表の幅変更のための設定箇所

/* 表組の基本設定 */
.filelist dt,
.filelist dd
{
	font-size: 16px; /* 文字サイズ */
	height: 24px; /* 1行の高さ */
	padding: 4px 0 0 4px; /* 枠内 padding: 数値で指定する */
	overflow: hidden; /* あふれたら非表示 */
	white-space: nowrap; /* 高さが揃っている事が必要なので、改行ができない(行数が決まっていればOK) */
	float: left;
	border-bottom: 1px solid gray; /* 罫線の幅と色(以下2行、および dtの定義内、メディアクエリ設定内に同じ属性を設定) */
	border-top: 1px solid gray;
	border-right: 1px solid gray;
	margin-top: -1px; /* border幅:上下罫線の重複を解消 */
}

/* タイトル列 */
.filelist dt
{
	border-left: 1px solid gray; /* 罫線の幅と色(上の基本設定と同じものを指定) */
	margin-left: -1px; /* 左側罫線の重複を解消 */
}

:(途中省略)

/* 幅の指定 1列の場合 ここから */
/* 表組全体の外枠に該当 */
.single
{
	width: 602px; /* 列幅の合計 + border幅(1px) x 列数(ズームアウト時のブラウザ互換性) */
}

/* タイトル列 */
.single dt
{
	width: 245px; /* タイトル列幅 - border幅(1px) - padding幅(4px) */
}

/* ファイル列 */
.single dd
{
	width: 345px; /* ファイル列幅 - border幅(1px) - padding幅(4px) */
}

/* 幅が指定より狭いときはタイトル列と内容を上下に表示 */
@media screen and (max-width: 550px) { /* 切り換えの幅はきっちり(599px)でも、右側が大きく隠れてしまう時でもよい。 */
	.single {width: 100%;}
	.single dt
	,.single dd
	 {
		width: 95%;
		border-left: 1px solid gray; /* 罫線復活 */
		margin-left: 0; /* 罫線復活 */
	}
}
/* 幅の指定 1列の場合 ここまで */

セルの背景色を変える

このサンプルではファイルリンクのある表のセルはマウスオーバーした時に背景色が変わるようになっています。この背景色を変更するには templates/article/article.html を編集して下さい。<head> と </head> の間にスタイルシート(CSS)の設定があります。下記例の青字が表示された時の背景色、赤字がマウスオーバーされた時の背景色の指定です。

/* ファイル列 */
.filelist dd
{
	background-color: #efefef; /* 背景色 */
}

/* ファイル列のマウスオーバーでの設定 ここから */
/* 背景色 */
.filelist dd:hover
{
    background-color: #fdfdf0;
}

ファイルリンクの色や表示を変える

このサンプルでは、ファイルへのリンク表示色は指定せずにブラウザの初期設定を利用し、マウスオーバーの時は下線を表示しない設定になっています。これを変更するには templates/article/article.html を編集して下さい。<head> と </head> の間にあるスタイルシート(CSS)の設定のうち下記の部分が該当します。例えばリンクの色を指定するのであれば、赤字のように設定を追加して下さい。

/* テキストリンクの色 */
.filelist dd a { /* 初期表示 */
	color: gray;
}
/* マウスオーバーでリンクのアンダーラインを非表示 */
.filelist dd a:hover,
.filelist dd a:active
{
    text-decoration: none;
}

画像を掲載しない

このサンプルではアイキャッチ画像が掲載できるようになっていますが、画像を使わない場合は管理画面にも表示されないように削除可能です。詳しい方法は下記のページをご覧下さい。

管理画面から画像を削除する方法

関連リンク

さらに詳しく