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

不動産物件情報更新ツール

最終更新日: 2015-08-06
不動産情報更新ツール

「すぐ使えるCGI」を使って、不動産情報ページの更新を行う方法をご紹介します。画像を多数掲載しながら同時にテキストでの情報も見比べたいというページに向いた構成です。

不動産情報に限らず、一般的な商品情報やサービス情報などにも応用可能です。

このツールの特長

2種類の表示位置

サムネイル画像をメイン画像の下か右に配置

画像の表示位置はメイン画像の下にサムネイルを並べるパターンとメイン画像の右にサムネイルを並べるパターンがあります。デモはメイン画像の下にサムネイルを並べる設定になっています。

画像の数はいくつでも増やせます。

自動画像切り替え(スライドショー)とクリックでの手動切り替え

サムネイルの位置がどちらでも、画像を自動的に切り替える(スライドショー、アニメーション)か、サムネイルをクリックした時だけその画像を拡大表示するかのどちらかを選択できます。

デモは自動で切り替える(スライドショー)の設定になっていますが、設定変更でクリック時のみに切り替えることができます(設定方法後述)。

カテゴリと絞込み

カテゴリによるアイコン絞込み

各情報にカテゴリ登録が行えます。カテゴリのアイコン(マーク)が表示できる他、一覧ではカテゴリによる絞込み表示が可能です。

ファイルのアップロード

パンフレットファイルのアップロード
テキスト情報や画像の他、詳細のパンフレットPDF等を掲載できます。

地図フィールドのタグ

地図の埋め込み
Google Maps の埋め込みタグを登録して、地図の表示が可能です。

このツールの使い方

ダウンロードと設置

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

不動産情報更新用 CMSダウンロード ※お試し利用は1ヶ月間無料です。

テスト登録

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

デザインの変更とカスタマイズ

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

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

ただし、このページからダウンロードできるサンプルには製品の初期設定に加えていくつか追加の変更がされています。このページでは、このツールに特有の以下の変更方法についてご説明します。

デザインカスタマイズ方法

画像の表示方法の変更

記事ページの画像の表示は、下記の点を変更できます。それぞれリンク先をご覧下さい。

目次のサムネイル画像を削除する

目次には画像を表示しない場合、代わりに目次のデザインを調整するには下記ページをご覧下さい。

一覧に罫線やアイコンを表示する方法

目次のサムネイルサイズを変更する

目次のサムネイル画像のサイズは変更できます。縦横比の変更も可能で、形が異なる画像がアップロードされた場合は指定したサイズに収まるように表示されます。

サムネイルサイズを変更するには以下のファイルを下記の通り編集して下さい。

  • templates/article/article_list.html
  • admin/admin.cgi

templates/article/article_list.html の編集

CSSの変更

templates/article/article_list.html を開くと冒頭付近にCSSの設定があります。まず画像の幅(青字)と高さ(赤字)を設定して下さい。幅は2か所、高さは3か所に設定します。この時、「画像高さに応じて変更」と書いてある部分は、画像の高さそのものではなく、サムネイル画像の上下に表示されれるタイトルや要約文の高さをプラスして設定して下さい。サンプルの 260px は画像自体の高さが 150px の時の設定です。

/* 各製品の表示領域の設定 */
.item {
    float:left;
    width: 200px;
    height: 260px; /* 画像高さに応じて変更 */
    margin: 0 20px 30px 0;
    overflow: hidden;
    /* border: 1px solid black; */
    /* border はレイアウト時に指定してテストすると便利 */
}
 :(途中省略)
/* 製品写真 */
.mainimage {
	position: relative;
	width: 200px; /* 画像幅 */
	height: 150px; /* 画像高さ */
	overflow: hidden;
	margin: 8px 0px 6px 0px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-image: url(images/noimage.png); /* 画像が無いときのデフォルト「No Image」 */
}
	.mainimage img {
		position: absolute;
		left: 0;
		top: 0;
		height: 150px;
		border: 0;
	}

JavaScriptの変更

引き続き templates/article/article_list.html 編集します。ページの末尾近くに JavaScript 設定があります。ここに画像の幅(青字)を設定して下さい。この部分はCSSの設定とは異なり、「px」を含めず数字だけ設定して下さい。

<script type="text/javascript" src="js/jquery-1_8_2-min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		/* サムネイル画像のサイズ調整 */
		$('.mainimage img').each(function(){ 
			size_adjust($(this), 200); /* 表示する幅を指定 */
		});
	});
 :(以下省略)

admin/admin.cgi の編集

表示するサムネイルサイズを変更した場合、それに合わせて画像のピクセルサイズも変更されるように設定します。この設定は admin/admin.cgi を編集して下さい。

環境設定の変更

admin/admin.cgi の 360行目付近に以下のような設定がありますので、幅(青字)と高さ(赤字)をサムネイルの表示サイズに合わせて設定して下さい。この時、アップロード予定の画像の形(縦長/横長)が決まっていない場合は、大きめのサイズ設定をして下さい。

#-------------------------------------------[line 340]-->[line 360]--
# 画像サムネイルのピクセルサイズ設定
#--------------------------------------------------------------------
# 画像サムネイルの幅と高さの上限をピクセル数で設定して下さい。
# 0 を指定すると、リサイズを行いません(アップロードされたサイズ)。
# タテヨコ比の変更は行わず、長い辺が指定されたサイズに収まるように
# 縮小されます。

# 上の行=幅:  ※画像を増やした場合は [0,0,0,0,0] のように指定(最大5つ)
# 下の行=高さ:※(同上)
$conf{thumbnail_imagewidth}  = [150];
$conf{thumbnail_imageheight} = [  0];

反映と確認

編集した以下の2つのファイルをサーバに上書きアップロードして下さい。

templates/article/article_list.html
admin/admin.cgi

管理画面から画像を再度アップロードすると、サイズ変更の設定が反映されます。ブラウザのキャッシュをクリアした後再読み込みして表示を確認して下さい。

目次のサムネイルの列数を変更する

目次に表示する列数を変更するには、まず何列表示するかと、全体の横幅を決定して下さい。設定の変更は templates/article/article_list.html を編集します。

CSSの変更

templates/article/article_list.html を開くと冒頭付近にCSSの設定があります。クラス .item の幅(赤字、width + 左右 margin + 左右 padding)が、#productsの幅(青字)に収まる数が列数になりますので、両方の幅を考慮しながら設定を行って下さい。この時、サムネイルの幅の調整も必要になるかもしれません。

#products {
	width: 850px; /* 製品紹介部分の幅を指定 */
	              /* (.item の width + 左右 margin + 左右 padding) × 列数 */
}

/* 各製品の表示領域の設定 */
.item {
    float:left;
    width: 200px;
    height: 260px;
    margin: 0 20px 30px 0;
    overflow: hidden;
    /* border: 1px solid black; */
    /* border はレイアウト時に指定してテストすると便利 */
}

反映と確認

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

templates/article/article_list.html

管理画面一覧の下にある「再構築(テンプレート変更反映)」ボタンを押して下さい。この操作により最新の設定を反映してページが再度書き出されます。ブラウザのキャッシュをクリアした後再読み込みして表示を確認して下さい。

カテゴリの調整

この製品はカテゴリ登録とそのアイコン表示、カテゴリによる一覧の絞込み表示ができます。初期設定では「新着」と「カテゴリ1」〜「カテゴリ3」が登録してあります。このカテゴリ設定は導入先のWebサイトに合わせて変更して下さい。

カテゴリを変更(画像や名前の変更、増減)する方法は下記ページで編集対象ヶ所をご確認の上、既存の設定を書き換えて下さい。

ホームページの新着情報にNEWアイコンを表示する方法

目次のカテゴリ選択ボタンを調整する方法は下記ページで編集対象ヶ所をご確認の上、既存の設定を書き換えて下さい。

カテゴリー絞込み機能を付けるJavaScript

CMS入力文字数カウンターの設定

CMS入力文字カウンター

このデモサンプルでは、一覧(目次)に表示できるタイトルと要約文の幅が決まっているために、入力画面にこれらの入力文字数のカウンターを付けています。レイアウトを変更して文字数の制限が変わった場合や、文字数カウントそのものが不要な場合は設定の変更ができます。

なお、カウンターの制限文字数を超えても入力ができなくなる事はありません。

初期設定では「タイトル」は15文字、「要約」は45文字が「最適値」として表示されるようになっています。この設定を変更したり、文字数の制限を外すには、下記ページで編集対象ヶ所をご確認の上、既存の設定を書き換えて下さい。

入力文字数の制限とカウンターの設定方法

入力項目の変更

入力項目は、「カスタム項目追加」機能を使って設定してあります。項目名を変更するには、下記ページで編集対象ヶ所をご確認の上、既存の設定を書き換えて下さい。

カスタム項目(自由項目)の追加方法

地図項目を使わない

初期設定の「地図(Google Mapタグ)」項目は、Google Maps の埋め込み用タグを入力すると、自動的にHTMLタグが有効になるような設定がしてあります。具体的には、「すぐ使えるCGI」でHTMLタグを入力する時の規則である「{{{」と「}}}」で囲われるようになっています。

初期設定の地図項目を変更して通常の項目として利用する場合には、templates/admin/2.html を調整する際に入力欄に付いている「sunippet」というクラス属性を削除して下さい。

初期設定

青字部分が削除対象です。

<tr>
<th>地図<br>(Google Mapタグ)</th>
<td><textarea name="blocktext4" id="blocktext4" cols="60" rows="5" class="imeauto snippet">%_blocktext4_%</textarea></td>
</tr>

地図項目として使わない場合の変更例

<tr>
<th>変更後項目名</th>
<td><textarea name="blocktext4" id="blocktext4" cols="60" rows="5" class="imeauto">%_blocktext4_%</textarea></td>
</tr>

変更の反映と確認

編集した以下のファイルをサーバに上書きアップロードして動作確認を行って下さい。

templates/admin/2.html

さらに詳しく