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

会社概要ページ更新用CMS

最終更新日: 2016-08-17
会社概要ページ

「すぐ使えるCGI」を会社概要ページ(会社案内、会社情報、沿革、About)の更新ツールとして利用する方法をご紹介します。所在地情報を更新したり、パンフレットPDFファイルのアップロード、Googleマップの表示が可能です。

会社概要ページ更新ツールの機能

項目編集機能

会社情報ページの項目設定
会社名などの基本情報や所在地情報など、必要な項目を自由に登録して編集できます。

ファイルや地図の表示

ファイルや地図の表示
社屋外観写真のアップロード、会社パンフレットPDFファイルのアップロード、Googleマップの表示も可能です。

レスポンシブWebデザイン または 固定幅を選択可能

レスポンシブWeb または 固定幅を選択

初期設定のデザインとして、PC/スマホ対応のレスポンシブWebデザインと、PC専用の固定幅の両方が同梱されています。

導入先のホームページの都合に合ったデザインを選ぶことができます。

レスポンシブWebデザインのフレームワークとしては、Bootstrap 2.2.x を使っています。

会社概要ページ管理ツール(CMS)設置方法

下のボタンから製品をダウンロードし、ダウンロードが終わったページからリンクしている「ステップ by ステップガイド」をご覧になりながら製品を設置して下さい。

会社概要ページ管理ツール(CMS) ダウンロード ※お試し利用は1ヶ月間無料です。

動作確認

「8. 設置完了」まで設置がうまく行ったら、テストで2-3項目新規登録して下さい。

表示確認

管理画面一覧の「チェック」ボタンを押して、デモと同様の表示になるかを確認して下さい。

デザインの選択

初期設定では、レスポンシブWebデザイン(PC/スマホ対応)と固定幅のデザイン(PC専用)が両方含まれています。導入先のWebサイトに合わせて、どちらかを選んで使って下さい。

それぞれ以下のように設定されています。

レスポンシブWeb固定幅
ファイル名webdir/index-responsive.htmlwebdir/index.html
「すぐ使えるCGI」設定上の呼び名短い一覧全一覧
CSSファイルwebdir/parts/css/site-responsive.csswebdir/parts/css/site.css

レスポンシブWebデザインテンプレートの修正のコツ

このサンプルでは、レスポンシブWebデザイン用のCSSフレームワークとして Bootstrap 2.2.x を使用しています。Bootstrap 2.2.x の場合、列の幅(表の見出し列と詳細列)の指定は CSS ファイルではなく HTMLタグに付ける CSS クラス名で調整します。

参考:Bootstrap(ブートストラップ)とは何ですか?

初期設定では 見出し列:詳細列 が 1:3(=見出し列の幅が25%)に設定されていますので、これを変更するには、CSS ファイルではなく、templates/article/short_list.txt を編集して下さい。

初期設定のレスポンシブWeb用 templates/article/short_list.txt

青字部分が列の幅を指定している Bootstrap のクラスです。

<dt class="span3">%_subject_%</dt>
<dd class="span9">
	<div class="image-pull-right">
	<a href="%_d_%/%_imagename_escaped_1_%" target="_blank" class="image-link" data-caption="%_imagetext_1_%"><img src="%_d_%/%_thumbnail_escaped_1_%" alt="%_imagetext_1_%"></a>
	</div>

	%_blocktext1_%
		:(省略)
</dd>

Boostrapでの列幅の変更例

Boostrap では、幅を12等分した単位での列の指定が可能です。つまり、1:4 は全体を5等分しなければならないので指定できません。上記の 1:3 は、12等分した 3:9 に換算できるので指定可能です。

変更する際は、合計が12になる比率(1:11、2:10、3:9、4:8、...)のいずれかを決めて、「span#」という名前のクラスを設定して下さい(「#」が比率の数字)。

例えば以下の設定だと、見出し列が 33.333...%(4:8 = 1:2 = 3分の1)になります。

<dt class="span4">%_subject_%</dt>
<dd class="span8">
	<div class="image-pull-right">
	<a href="%_d_%/%_imagename_escaped_1_%" target="_blank" class="image-link" data-caption="%_imagetext_1_%"><img src="%_d_%/%_thumbnail_escaped_1_%" alt="%_imagetext_1_%"></a>
	</div>

	%_blocktext1_%
		:(省略)
</dd>

Google Maps タグの入力の方法

Google Maps タグの入力

このツールでは、地図情報として Google Maps などのタグが入力できるようになっています。

通常は、HTMLタグを入力してもそれは文字としてホームページ側にも表示されてしまいますが、管理画面上の「タグ:有効にする」をクリックすると、入力全体が {{{ と }}} で囲われます。これは「すぐ使えるCGI」のタグ入力のための記法で、Google Maps サイトで取得した共有用のタグをホームページに貼り付ける事ができます。

月額料金利用のご案内

「すぐ使えるCGI」の料金は管理画面1か所ごとに発生しますので、このツールで更新する会社概要ページのように更新するページが1ページでも、1か所分の料金が必要です。導入時の初期費用が上がってしまう事を避けるには、月額料金もご検討下さい。

参考:すぐ使えるCGI 価格表

さらに詳しく