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

ホームページのお知らせ更新ツール

最終更新日: 2016-07-11
ホームページのお知らせ欄の作成

CMS「すぐ使えるCGI」でホームページ(Webサイト、HP、トップページ)のお知らせ欄(トピックス、更新履歴、新着情報、ニュース、NEWS)を更新する方法をご紹介します。

お知らせの記事本文は少なく、他のページやファイルへのリンクが多い場合に適したツールです。

お知らせ更新ツールの機能

更新お知らせツールの主な機能

このページでご紹介するお知らせ更新ツールはお知らせの文章が無くても表示ができるタイプです。

URLを指定して他のページやファイルへのリンクができる他、管理画面からファイルをアップロードしてリンクする事もできます。

NEWアイコン表示

お知らせにNEWアイコン表示

それぞれのお知らせに「NEW」やカテゴリーを表すアイコンを表示できます。

アイコンの種類や数はカスタマイズできます。

ファイルのリンクとアップロード

ファイルのリンクとアップロード

ファイルのリンクは、サイト内にある別のファイルをURLで指定する事も、管理画面からアップロードする事もできます。

どちらの場合もファイル種別を表すアイコンが表示できます。

画像のアップロードとライトボックスによる拡大表示

ライトボックスによる画像の拡大表示

画像をアップロードすると自動的にサムネイル(縮小版)が作成されます。

サムネイルをクリックすると拡大画像がライトボックス表示されます。

レスポンシブWebデザイン

レスポンシブWebデザインお知らせ管理ツール

管理画面、公開ページともPC・スマホ対応のレスポンシブWebデザインです。

このツールの使い方

ダウンロードと設置

下記のボタンから製品ファイルをダウンロードの上、ダウンロード完了ページに表示される「ステップ by ステップガイド」をご覧になりながら設置を行って下さい。「すぐ使えるCGI」の「添付ファイル付 ウェブページ更新ツール 大容量版」をベースに使っています。

お知らせ更新ツール ダウンロード ※お試し利用は1ヶ月間無料です。

テスト登録

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

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

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

「すぐ使えるCGI」のデザイン変更は全て「テンプレート」と呼んでいるHTMLファイルの編集で行えます。テンプレートの仕組みがイメージできない方は先に下記ページをご覧下さい。

「デザインカスタマイズの方法」

このページではこれ以降、このツールをご自身のホームページのデザインに合わせるために必要になるカスタマイズの方法をご説明します。

表示幅、色、フォントの変更など(CSSファイルの場所)

このツールでは、デザイン設定の一部を外部CSSファイルに指定してあります。公開ページ用のCSSファイルは以下の場所にありますので、このファイルも適宜変更して下さい。

webdir/parts/css/site.css

日付や曜日を隠す・形式変更(年なし、和暦表示など)

日付の形式も、デザインと一緒にテンプレートの編集で変更できます。例えば「年」を表示しない場合は単純にテンプレートから削除すればOKです。

和暦にしたりなど、表示を変更する方法は下記ページをご覧下さい。
日付の表示形式の変更方法

1ページに表示する件数を変更する

件数が多い場合は自動的に一覧が分割されて前後にページがリンクされます。この時の1ページごとの件数を変更する方法は下記ページをご覧下さい。

1ページの表示件数を変更する方法

表示できるアイコンを変更する

管理画面から選択できるアイコンの種類は追加・削除・変更可能です。

アイコン画像の差し替え

初期設定のアイコンは webdir/parts/img/ (NEW と重要)と webdir/icons/ (PDFとDOC)にあります。適宜追加、場所の変更などを行って下さい。アイコンを追加したら、以下の2つのファイルを変更して下さい。

templates/admin/2.html の編集

templates/admin/2.html のアイコン欄部分に以下のようなコードがあります。

[<a href="javascript: set_value('linetext2', 'new', '')">NEW</a>]
[<a href="javascript: set_value('linetext2', 'important', '')">重要</a>]
[<a href="javascript: set_value('linetext2', 'title-pdf', '')">PDF</a>]
[<a href="javascript: set_value('linetext2', 'title-doc', '')">DOC</a>]
[<a href="javascript: set_value('linetext2', 'newicon', '')">追加アイコン</a>]

初期設定を変更する場合は青字および黒太字の部分を変更して下さい。アイコンを増やす場合は、行をコピーして赤字のように追加のアイコンを設定して下さい。不要なアイコンの設定は削除して下さい。

なお、青字部分は後で CSS クラスとして指定しますので、半角英数字で指定して下さい。

webdir/parts/css/common.css の編集

webdir/parts/css/common.css は管理画面にも公開ページにも共通して読み込まれるCSSファイルです。このファイルにアイコン画像のサーバ内での場所を設定して下さい。

初期設定では以下のような設定になっています。青字部分は templates/admin/2.html で設定したクラス、赤字部分はサイト内でアイコン画像がある場所とサイズに合わせて変更して下さい。

.new {
	padding-left: 45px; /* 表示するアイコンの幅+余白 */
	background-image: url(../img/new.png);
}
.important {
	padding-left: 45px; /* 表示するアイコンの幅+余白 */
	background-image: url(../img/important.png);
}
.title-pdf {
	padding-left: 25px; /* 表示するアイコンの幅+余白 */
	background-image: url(../../icons/pdf.gif)
}
.title-doc {
	padding-left: 25px; /* 表示するアイコンの幅+余白 */
	background-image: url(../../icons/doc.gif)
}

画像のサイズを変更する

大きな画像がアップロードされた場合、画像の実サイズを変更する事が可能です。設定方法は下記ページをご参照下さい。なお、初期設定では拡大画像が最大1200px角、サムネイルは幅が最大300pxに設定されています。

画像の縮小をする方法

表示上の画像のサイズについて

表示されているサムネイル画像(サムネール、縮小版)のサイズは、表示環境によって変わります(レスポンシブWebデザイン)。表示サイズの設定は webdir/parts/css/site.css にあります。

ライトボックスで拡大される画像のサイズについて

レスポンシブWebデザインライトボックス(画像拡大)

このツールではサムネイル画像はライトボックスにより拡大表示されます。

ライトボックス表示もページ本体と同じくレスポンシブWebデザインで、画面が小さい端末の場合は画像は画面サイズに合わせて表示されます。

PCなどの大画面の場合の最大表示サイズは実際のピクセルサイズです。

画像とファイルのアップロード個数を変更する

初期設定では画像3個とファイルが1個アップロードできるように設定されています。これは最大5個まで、ファイルと画像を好きな数で組み合わせ可能です。変更方法は下記ページをご覧下さい。

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

画像やファイルはアップロードしない

画像やファイルが不要な場合や、または数が少なくていい場合、削除して利用できます。設定方法は下記ページをご参照下さい。

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

タイトルに改行が入力できるようにする

初期設定ではタイトルは1行テキスト(<input type="text">)ですが、これを複数行(<textarea>)に変更してタイトルに改行が入力できるようにする事もできます。変更方法は、下記ページをご参照下さい。

添付ファイル付 ウェブページ更新ツール 大容量版 オプション設定/変更できる環境変数
※このページの一覧表から「タイトルの改行とタグ入力 / $conf{htmltag4subject}」の部分をご覧下さい。

新着情報をトップページに表示する

トップページに最新の更新履歴を表示したい場合は、「短い一覧」を使って下さい。「短い一覧」には最新から指定した件数だけが表示できます。

短い一覧をトップページに組込む方法方法としては SSI や <iframe> を使ったり、php(WordPress)のページに組込む事ができます。組み込み方法は下記のページからご覧下さい。

ホームページへの新着情報の表示方法

さらに詳しく