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

ペライチホームページ作成ツール

最終更新日: 2015-08-21
ペライチホームページの作成

「すぐ使えるCGI」を使って、ペライチホームページ(HTMLファイル一つで構成されるホームページ、ペラ一、ペラ1)の更新を行う方法をご紹介します。

管理画面、公開ページとも、レスポンシブWebデザインです。

このツールの特長

様々な形式に対応

ペライチホームページのセクション

このツールでは、ペライチホームページの内容は、複数の「セクション」で構成される、と考えて、各セクションごとに内容を登録できるようになっています。各セクションは以下の形式のいずれかまたは複数を登録でき、セクションの数はいくらでも増やせます。

  • メイン画像(ページの一番上に来る大きな画像)
  • 文章(+サイドに画像)
  • ギャラリー(フォトアルバム、ポートフォリオ)
  • 地図(Google Map タグ)

内容の「文章」は WYSIWYG(リッチテキスト)エディターと単純なテキスト入力のどちらかが選べます。

レスポンシブWebデザイン

レスポンシブWebデザインの管理画面
初期設定で管理画面、公開ページとも、レスポンシブWebデザインに対応しています。レスポンシブWebデザイン用フレームワークとして Bootstrap を使っています。

レスポンシブWebライトボックス(lightbox)

レスポンシブWebデザインのライトボックス(lightbox)
ライトボックス(lightbox)で拡大される画像も、端末のサイズに合わせて表示されるレスポンシブWebデザインです。

このツールの使い方

ダウンロードと設置

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

ペライチホームページ用 CMSダウンロード ※お試し利用は1ヶ月間無料です。

テスト登録

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

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

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

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

ただし、このページからダウンロードできるサンプルには製品の初期設定からかなり変更が加えられています。また、公開側ページで使用するテンプレートは3つのみで、他のファイルは使いません。このページでは、このツールに特有の以下の情報についてご説明します。

使用するファイル

このツールで書き出すページで、公開するのは webdir/index.html のみです。このページのデザインを指定しているのは、以下の4ファイルです。

  • templates/article/article_list.html
  • webdir/parts/css/site.css
  • templates/article/article_list.txt
  • templates/article/article_file.txt
初期設定のデザインは CSS を使って調整してありますので、デザインを調整する場合は webdir/parts/css/site.css を変更して下さい。

運用開始前に必須の設定

作成したページを本番公開する前に、テンプレートファイルを使用するWebサイトの情報で書き換えて下さい。 templates/article/article_list.html の以下の青字部分が変更が必須の部分です。この他にも、ロゴを追加したりメニューを追加するなどのデザイン変更は自由に行って下さい。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>サイト名をここへ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="サイトの,キーワード">
<meta name="description" content="サイトの説明文">
<meta name="robots" content="index, follow">
<link href="./parts/css/site.css" rel="stylesheet" media="screen">
<!--[if lt IE 7]>
  <link href="./parts/font-awesome-ie7_min.css" rel="stylesheet">
<![endif]-->
</head>
<body class="main-body">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">

<div class="site-header">
<h1>サイト名をここへ</h1>
</div>

<!-- セクション情報 -->
<!-- article list : generate from article_list.txt -->
%_article_list_%


<div class="site-footer">
<ul>
<li>&copy; 会社名</li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</div>


</div><!-- /span12 -->
</div><!-- /row-fluid -->
</div><!-- /container-fluid -->
 :(以下省略)

ページデザインの変更

レスポンシブWebデザインにするために、初期設定のデザインテンプレートファイルには既に CSS クラスが設定してあります。既に表示されている要素のデザイン変更(色やサイズ変更)は CSS ファイル webdir/parts/css/site.css を変更して下さい。

サイト名のデザイン変更

例えば、サイト名のデザイン変更は以下の部分が対応します。

/* サイト名部分のデザイン */
.site-header {
	margin-top: 30px;
	margin-bottom: 15px;
	border-bottom: #dfdfdf solid 1px;
}

セクション見出しのデザイン変更

セクション見出しのデザイン変更は以下の部分が対応します。

/* セクション見出し */
.section h2 {
	background-color: #c4c4c4;
	padding: 0.28em 0.5em;
	margin-bottom: 0.85em;
	color: black;
}

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

2種類あるサムネイル画像(文章のサイド、またはギャラリー)のサイズは、CSSファイルの他、templates/article/article_list.html の変更も必要です。下記ページで説明している方法を使用していますので、この方法で変更して下さい。なお、設定に使うCSSクラスはそれぞれ「img200」と「img100」を使用していますので、このクラス名をキーワードにして編集対象か所を探して下さい。

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

「管理者モード」と「通常モード」について

入力画面を開くと、右上に「管理者モード(全項目)」または「通常モード」と表示されます。

これは、「全ての入力項目が表示されるモード」(=管理者モード)と「使う項目だけが表示されるモード」(=通常モード)を設けているためで、これは、「管理者がページの構成を考えながら初期登録し、その後は一般の更新担当者が内容の更新をしていく」という想定に基づいています。

さらに詳しく