標準 v3（白、本文左、中央寄せ）

標準的なデザイン、２カラムで本文は左、全体が中央寄せになってます。

標準 v3（白、本文左、中央寄せ）使用サンプル

無料ダウンロード

自由に使用していただいてかまいませんが、例外として、サンプル画像は、HTML 自動生成するノのアイコンなので、実用的な使用は禁止いたします。

white_l_v3.zip (UTF-8 版)
white_l_v3.zip (Shift_JIS 版)

zip 内ファイルの説明

data.csv	csv 形式のデータファイル
data.xls	xls 形式のデータファイル、data.csv の代わりに利用できます
main.htg	HTML 自動生成するノの設定ファイル
index_template.html	目次用 HTML テンプレート
template.html	HTML テンプレート
head.html	部分テンプレート、head タグ
menu.html	部分テンプレート、ヘッダーとフッターに表示されるメニュー
right.html	部分テンプレート、ホームページの右部分 (広告など)
last_content.html	部分テンプレート、本文の最後に共通して入れる文章 (お問い合わせなど)
main\page_1.html	page_1 用の本文データ
main\page_2.html	page_2 用の本文データ
out\img\48.png	サンプル画像 (HTML自動生成するノのアイコン)
out\style.html	スタイルシート (見た目をカスタマイズします)
out\index.html	main.htg で生成されるサンプルページ
out\page_1.html	main.htg で生成されるサンプルページ
out\page_2.html	main.htg で生成されるサンプルページ

使い方

white_l_v3.zip を解凍してできる、main.htg を HTML 自動生成するノで開いてから、実行ボタンを押すと、out\page_1.html、out\page_2.html が生成されます。

ページを新しく追加する

あたらしくページを追加するには、以下のような作業が必要です。

1. 行を追加

data.xls をエクセルで開いてから、行を追加し、data.csv に csv 形式で保存します。Excel をお持ちでない方向けに、入力データファイルはディフォルトでは、data.csv になってますが、data.xls を直接、入力データファイルとして利用することもできます。その場合、data.csv は不要です。

※ エクセルをお持ちでない場合には、data.csv をテキストエディターで編集することもできます。csv は、カンマ区切りテキスト形式のテキストファイルです。

2. 本文を追加

例えば、data.xls で追加した行の最初の項目 (ID) で、page_3 を指定した場合、main\page_3.html を用意します。この部分は、template.html の《main\【ID】.html》の部分に挿入されます。

3. メニュー項目を追加

menu.html の span を増やして、メニュー項目を追加できます。

<span>〔ID=index｜トップページ｜<a href="./">トップページ</a>〕</span>
<span>〔ID=page_1｜サンプルページ1｜<a href="page_1.html">サンプルページ1</a>〕</span>
<span>〔ID=page_2｜サンプルページ2｜<a href="page_2.html">サンプルページ2</a>〕</span>

中身を解説すると、最初の行は、ID が index の場合、トップページ、そうでない場合は、トップページへのリンクを span タグとして出力するという意味です。例えば、新しいページの ID を page_3 にした場合は、↓の行を追加します。

<span>〔ID=page_3｜サンプルページ3｜<a href="page_3.html">サンプルページ3</a>〕</span>

4. 自動生成

使い方で示した方法で自動生成します。

HTML の head タグを変更する

には、head.html を編集します。head.html は template.html、index_template.html 両方から参照されているので、head.html を編集するだけで両方に反映されます。

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- ホームページのアイコンを設定するならココ
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
 -->
<meta name="keywords" content="【キーワード】">
<meta name="description" content="【概要】">
<title>【タイトル】</title>
<!-- google Analytics の script を追加するならココ -->
</head>

HTML の右部分を変更する

には、right.html を編集します。right.html は template.html、index_template.html 両方から参照されているので、right.html を編集するだけで両方に反映されます。

<div class="right">

<h4>広告など</h4>
<div style="width:160px;height:1200px;background-color:#E0E0E0;padding:8px;">
例えば、google AdSense などの広告を貼り付けます。
</div>

</div> <!-- div.right -->

本文の最後に共通して入れる文章を変更する

には、last_content.html を編集します。last_content.html は template.html、index_template.html 両方から参照されているので、last_content.html を編集するだけで両方に反映されます。

<h2>ご意見・ご要望など</h2>
<p>
ご意見・ご要望などは、フォームメールから送信してください。<br>
</p>

デザインのカスタマイズ

デザインをカスタマイズするには、out\style.css を変更します。また、大規模な修正では、必要に応じて、template.html を修正します。

HTML 自動生成するノのダウンロードはこちら

HTML 自動生成するノは有料 (500円/月) ですが、試用は無料です。上のテンプレートを用いれば、カンタンに使えます。始めは少し理解に時間がかかるかもしれませんが、すぐに、直接 HTML を書くよりずっと楽になりますので、是非挑戦してみてください。

ご意見・ご要望など

ご意見・ご要望などはフォームメールから送信してください。
更新情報は、ブログでも配信してます。

〔NO_AD｜｜

〕