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

ファイルを横並べで表示する方法(li をCSSで横並べ)

最終更新日: 2015-01-19
月次ファイルを横並べ

横並べで一連のファイルのリンクを表示する方法をご紹介します。

月ごとや四半期ごとにファイルを公開している場合に利用できます。

関連ファイルを横並べ
また、同じ内容のファイルで「PDFとワードの両方」など複数の形式(フォーマット)をダウンロードできるようにしている場合などに利用できます。

管理画面の使い方

運用時は、例えば以下のようなルールでファイルをアップロードしていきます。いずれの場合も、一連の関連ファイルを表示するページを「1記事」として登録します。

例1:定期的にファイルを公開する場合

月次または四半期ごとにファイルを追加アップロードする運用
  1. 年ごと(または年度ごと)に記事を新規登録する
  2. 月次または四半期ごとのファイルを該当年の記事に追加していく(毎月または3か月に1回の作業)
  3. ファイルを追加する際は、「リンクテキスト」欄に「○月」や「第○四半期」などの期間情報を入力する

例2:同じ内容で複数のフォーマットのファイルを公開する場合

  1. ファイルの内容を表すタイトルで記事を新規登録する
  2. ファイルアップロード時には、「リンクテキスト」欄に「pdf」や「MSワード」などのファイル形式名を入力する

このツールの使い方

ダウンロードと設置

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

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

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

テスト登録

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

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

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

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

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

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

  1. ファイルリンクの色や横並べの間隔調整
  2. ファイルのアイコンを増やす
  3. 画像を掲載しない

ファイルリンクの色や横並べの間隔調整

表示されるファイルリンクの間隔やリンクの色などの設定は、templates/article/article.html 内の CSS 設定を変更して下さい。自由に設定できます。

例えば下記例の青字部分を変更するとファイルの間隔を調整できます。また、リンクのスタイルを変更するには、赤字部分の設定を追加して適宜変更して下さい。

横並べ表示のスタイル変更例

#filelist li
{
    list-style: none;
    margin-right: 10px; /* ファイルの間隔 */
    white-space: nowrap;
    float: left;
}

/* テキストリンクの色 */
.filelink { /* 初期表示 */
	text-decoration: none;
	color: blue;
}
.filelink:active
,.filelink:hover { /* マウスオーバー */
	text-decoration: underline;
}
.filelink:visited { /* 訪問済 */
	color: purple;
}

変更の反映

ファイルを変更したら、サーバに上書きアップロードの後、管理画面の一覧から「再構築(テンプレート変更反映)」を行って下さい。

反映の確認

ブラウザのキャッシュをクリアしてからページを再読み込みをして変更の確認を行って下さい。

ファイルのアイコンを増やす

初期設定では以下のファイル種別を自動判別し対応するアイコンを表示します。

PDF、ワード、エクセル、パワーポイント、テキスト、ZIP、画像(png, gif, jpg, svg, svgz)


このアイコンの種類を増やす方法は、下記ページをご覧下さい。

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

画像を掲載しない

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

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

関連リンク

さらに詳しく