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

小規模 ECサイトの商品紹介ページ作成

最終更新日: 2015-02-13
小規模ECサイトページの表示例

「すぐ使えるCGI」で小規模ECサイト(ショッピングサイト、ネットショップ)の商品紹介ページを作成する方法をご紹介します。

物販を行うECサイトの他にも、サービス紹介や不動産物件紹介などに応用できます。商品やサービスの点数が5件から100件程度までのWebサイトに最適です。

決済機能はありませんので、パラメータを指定してカートシステムなどにつなげるか、メールフォームなどで注文を受け付て下さい。

商品紹介ページ管理機能ハイライト

商品画像のサムネイル表示

商品の代替画像を自動表示
商品一覧では商品を分かりやすくサムネイル(縮小画像)で表示します。商品画像が無い商品は自動的に「No Image」の画像が表示されます。

商品画像の拡大表示

商品画像サムネイルをライトボックスで拡大
商品紹介のページでは、クリックで画像を拡大して表示します(ライトボックス、lightBox)。

WYSIWYG HTMLエディタ(リッチテキストエディタ)

WYSIWYGエディタで商品情報を編集
管理画面では、はワードのようなWYSIWYG HTMLエディタ(リッチテキストエディタ)で商品説明を編集できます。

ファイルアップロード

商品注文書や商品パンフレットのアップロード
商品情報を表示する他、詳細のパンフレットや発注書フォーマットなどの添付ファイルも掲載できます。

タイトルと要約(description)の文字数カウンター

商品名と要約(description)文字数のカウント

商品名が長くなりすぎないように入力画面に文字数カウンターが付いています。

また、紹介の要約は <meta> タグの description にもなりますので、検索エンジンでの表示に適した長さになるように要約にもカウンターを付けています(SEO対策)。

Facebook用商品サムネイル

フェースブック用のサムネイルを指定
商品紹介ページにはFacebook(フェースブック)の「いいね!」ボタンや Twitter(ツイッター)のツイートボタンが表示されますが、「いいね!」された時に Facebook 表示される画像を指定する事ができます。

このツールの使い方

ダウンロードと設置

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

商品紹介ページ管理CMSダウンロード ※お試し利用は1ヶ月間無料です。

テスト登録

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

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

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

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

ただし、このページからダウンロードできるサンプルには製品の初期設定に加えていくつか追加の変更がされています。例えば管理画面にはWYSIWYGエディタが導入されていますし、商品紹介ページには「いいね!」ボタンやツイートボタンなどのソーシャルボタンが予め設定されています。

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

商品紹介ページのデザイン変更

商品紹介ページのデザインテンプレートは templates/article/article.html です。自由に変更して下さい。

このファイル内の <head>-</head>内に以下のようにCSSを使った設定がありますので、ここを書き換えていただくと幅の調整などが行えます。HTMLタグを書き換えても構いません。また、CSS 部分を別ファイルにまとめて <link> タグで指定しても問題ありません。

例えば青字部分は表示部分の幅を指定しています。

:(省略)
/* ページのデザインに合わせて幅を決める */
.main {
	width: 800px;
	margin: 0 auto;
}

/* ソーシャルブックマークの左寄せの指定 */
.social div.widget{
	float: left;
}

/* 日付部分(右寄せ) */
.update {
	text-align: right;
	float: right;
	width: 15em;
	margin: 0;
}
:(省略)

変更の反映

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

反映の確認

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

ツイートボタンの設定

ツイートボタンは、使う前に設置先のURLなどを指定する必要があります。 templates/article/article.html を編集して下さい。編集が必要な個所はファイル内にコメントで記載があります。

設定方法が分からない場合やボタンの大きさを変えるなどのカスタマイズ方法は、下記ページをご覧下さい。

Twitter のツイートボタンとカウント数を表示する方法

変更の反映

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

反映の確認

ブラウザのキャッシュをクリアしてからページを再読み込みをして表示とボタンの機能を確認して下さい。

いいね!ボタンの設定

いいね!ボタンは、使う前に設置先のURLなどを指定する必要があります。設定は templates/article/article.html と templates/article/article_image_3.txt の2つのファイルを編集して下さい。

templates/article/article.html の編集箇所

templates/article/article.html で編集が必要な個所はファイル内にコメントで記載があります。

設定方法が分からない場合は下記ページをご覧下さい。同じ方法を使っています。

Facebook の「いいね!」ボタンと Open Graph tag を設定する方法

templates/article/article_image_3.txt の編集箇所

templates/article/article_image_3.txt にはURLが指定されている場所があります。初期設定では下記のようにダミーのURLになっていますので、青字部分を設置した書き出しディレクトリまでのURLに変更して下さい。

<meta property="og:image" content="http://www.example.com/sugu/webdir/%_d_%/%_filename_escaped_%">

変更の反映

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

反映の確認

ブラウザのキャッシュをクリアしてからページを再読み込みをして表示とボタンの機能を確認して下さい。

画像の拡大表示サイズを変更する

商品紹介ページでの画像の拡大は「jQuery lightBox」という方法を使っています。拡大表示される画像が大きすぎないように調整が可能です。templates/article/article.html の末尾に JavaScript の設定がありますのでこれを編集して下さい。

詳しい設定方法は下記のページをご覧ください。

jQuery lightBox の使い方

拡大画像の実サイズ変更

拡大画像の表示サイズを変更した場合、admin/admin.cgi の設定を希望のサイズに変更して下さい。詳しくは下記のページをご覧下さい。

画像の縮小をする方法

変更の反映

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

拡大画像の実サイズの設定を変更した場合は、画像も再度アップロードして下さい。再アップロードすると admin/admin.cgi に設定した変更が反映されます。

反映の確認

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

サムネイル画像の表示サイズを変更する

商品紹介ページ(記事ページ)と商品一覧ページ(全一覧)、新着商品ページ(短い一覧)に表示されているサムネイル画像は、縦横比が異なっても指定サイズで表示されるように調整されています。このサイズを変更するには、それぞれ以下のファイル内の CSS と JavaScript 設定を変更して下さい。

変更対象ファイル

商品紹介ページ templates/article/article.html
商品一覧ページ templates/article/article_list.html
新着商品ページ templates/article/short_list.html

変更内容

サイズ調整に使っている方法は、下記ページでご案内している方法と同じです。どこの設定を変更したらいいかは、下記ページをご覧下さい。テンプレート内にもコメントで注意書きがあります。

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

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

サムネイル画像の表示サイズを元よりも大きく変更した場合、admin/admin.cgi の設定を希望のサイズに変更して下さい。詳しくは下記のページをご覧下さい。

画像の縮小をする方法

変更の反映

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

サムネイル画像の実サイズの設定を変更した場合は、画像も再度アップロードして下さい。再アップロードすると admin/admin.cgi に設定した変更が反映されます。

反映の確認

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

商品一覧ページのデザイン変更

商品一覧ページ(webdir/index.html)のデザインテンプレートは templates/article/article_list.html と templates/article/article_list.txt です。これも自由に変更できます。article_list.html の <head>-</head> の間にスタイルシート(CSS)設定がありますので、自由に変更して下さい。一部の設定は1段に表示する件数と関わりがありますので、「1段に表示する商品件数の変更」の説明も合わせてご覧下さい。

変更の反映

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

反映の確認

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

1段に表示する商品件数の変更

商品一覧ページで1段に表示する商品件数は、初期設定では 3つになっています。これを変更するには、 templates/article/article_list.html を編集して下さい。

1段商品件数の決定方法

1段に表示する商品件数を決めるには、まずはページの表示幅と1段ごとの商品数を決めて下さい。それにより、1商品に割ける表示幅が決まります。例えば幅 800px のページで1段に4商品表示したいのであれば、1商品に幅 200px 割ける事になります(間に取る空白なども含みます)。

1段の商品数に関わる設定箇所

1商品に割ける幅が分かったら、余白なども計算して商品一つを表示するボックスの幅や高さを変更して下さい。下記例の赤字部分が1商品分の幅や高さを設定しているか所です。1商品分の表示幅を変更した場合は画像の幅や高さも変更になりますので、合せて画像の設定も変更して下さい。下記サンプル部分以外に、サイズ調整をしている JavaScript 部分の設定が必要です。この JavaScript は templates/article/article_list.html の末尾近くにあります。

その後、全体の幅を指定して下さい。初期設定では下記例で青字のようになっています。(.item の width + 左右 margin + 左右 padding) × (1段商品数)の幅があれば足りるはずなのですが、ブラウザによって時々計算値が少しずれる事があり期待した商品が1段に入りきらない場合がありますので、計算値に少し加算した幅を設定して下さい。

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

/* 各製品の表示領域の設定 */
.item {
    float:left;
    width: 200px;
    height: 250px;
    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(./parts/img/noimage.png); /* 画像が無いときの初期表示「No Image」 */
}
	.mainimage img {
		position: absolute;
		left: 0;
		top: 0;
		height: 150px; /* サムネイル画像の高さ。CSSでは高さのみ指定する。 */
		border: 0;
	}
:(省略)

変更の反映

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

反映の確認

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

1ページに表示する商品件数の変更

1ページに表示する商品数は (1段に表示する商品)×(段数)になりますが、初期設定では 3×2 の6点です。これを変更するには、admin/admin.cgi を変更して下さい。

1ページに表示する商品数の設定

admin/admin.cgiの 170行目付近に以下のような設定がありますので、青字の部分を望みの数字に変更して下さい。

#--------------------------------------------------------[line 170]--
# 一覧に表示する件数
#--------------------------------------------------------------------
# 全一覧および管理画面の記事一覧に表示する記事件数を設定して下さい。
# これより多い登録があるとページ分割されます。
# 0を指定すると1ページに全件を表示します。

$conf{index_list_no} = 6;

変更の反映

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

反映の確認

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

新着商品ページの組み込みとデザイン変更

新着商品情報のホームページへの組み込み

新着商品ページ(短い一覧)は、Webサイトの他のページ(トップページなど)に組込んで使っていただく想定です。他のページに <iframe> を使ってページを組み込んで下さい。

同梱の toppage_sample.html にはサンプルの <iframe> がしてあります。詳しくは下記ページをご覧下さい。

新着情報を IFRAME でホームページに表示する方法

新着商品ページのデザイン変更

新着商品ページのデザインも自由に変更できます。デザインテンプレートは templates/article/short_list.html と templates/article/short_list.txt です。

変更の反映

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

反映の確認

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

タイトルと商品紹介要約のカウンター設定を変更する

管理画面では、タイトル欄と商品紹介要約欄に入力文字数のカウンターが付いています。初期設定ではそれぞれ 15文字と100文字が「最適値」として表示されるようになっています。この設定を変更したり、文字数の制限を外すには、下記ページをご覧下さい。

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

商品紹介欄の初期フォーマットを変更する

商品情報を新規登録する際、「製品紹介」欄には初期フォーマットが表示されるようになっています。このフォーマットを変更する方法は下記ページをご覧下さい。

wysiwyg HTML エディタ に初期フォーマットを付ける方法

入力項目を増やす

「記事内容」だけでは入力欄が足りない場合、10項目まで入力欄を増やすことができます。

この機能を使うと、例えば使用しているカートシステムに接続するための隠し項目などが入力できるようになります。方法は下記ページをご覧下さい。

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

さらに詳しく