ホームページの無料テンプレート素材を配布しています
初心者の方のために専用の作成ソフトもご用意
ホームページビルダーよりも簡単に作れます

テンプレートの骨格


テンプレートファイルはHTMLファイルで提供されます。スタイルシートはCSSファイルです。で、実際のテンプレートファイル(index.html)を見ていただくとお分かりだと思いますが、1行目から4行目にかけて見たことのない記述があると思います。

<@
HTML=index.html
STYLE=style.css
@>

この部分が、テンプレートファイル名を指定している部分です。HTML=index.htmlのindex.htmlがテンプレートHTMLファイルを指定していて、STYLE=style.cssがスタイルシートファイルを表しています。

実際はこの部分は書き換えずに、このままそのまま利用してください。そして、テンプレートのファイル名をindex.htmlとして保存していただければいいのです。スタイルシートファイルも同様に、style.cssとして保存していただければ結構です。

ここまでまとめると、

1.テンプレートはHTMLファイルで作成する。
2.先頭4行はこのまま利用する。実際には、4行目にはこれ以降、<!DOCTYPEなど続きますが、それもそのままで良いかと思います。
3.HTMLテンプレートファイルは、index.html、スタイルシートはstyle.cssというファイル名でそれぞれ保存する。
4.もし、スタイルシートファイルがない場合は、3行目のStyle=style.cssを削除してください。

あとは、好きなようにHTMLファイルを作成します。


テンプレートとは何か


テンプレートとはホームページの基本的な骨格を作るものです。そして、その骨格の中に書き換えたい内容を独自タグとして指定しておくことで、その独自タグを、テンプレーター「海苔巻」で設定した値に書き換えることができるのです。

そして、その独自タグは<$と$>の間に挟んで指定します。さらにその中に、そのタグの説明、初期値を設定することができます。これらをテンプレート内で設定しておくことで、「海苔巻」の入力作業が多少、楽になります。

それでは、タグの書式を説明します。

<$独自タグ名_タグの説明:初期値$>

という形になります。始めに<$で始まり、その次に、独自タグ名を指定します。その次に半角アンダーバー(_)が続いてタグの説明に入ります。さらに、半角コロン(:)で区切って、初期値を指定します。

実際に使用するに当たっては、独自タグ名だけ指定してあれば使えるのですが、その他の項目も設定しておけば、サイト作成に当たっては効率化できるのでできれば指定しておいた方が良いでしょう。

同じ内容で書き換えたい個所が複数ある場合は、全ての部分で、全く同じ独自タグをそのまま指定すれば良いです。

テンプレートの働きといえば、基本的には以上ですが、どうしてもこれだけでは足りません。というのは、本文の記事(このページで言えば「テンプレートの骨格」「テンプレートとは何か」など)を書きたいときに、その記事の数が決まっていない場合が多く、テンプレート上での独自タグの数と記事の数を合わせなければならないからです。

この要求に答えるために、今までのホームページテンプレートでは、直接HTMLファイルをコピー&ペーストしたり、ホームページビルダーなどでコピー&ペーストをしたりしていました。

しかし、このテンプレーター「海苔巻」では、それらの数を自動的に合わせてくれます。その機能を担うのが、ループデータタグです。

ループデータタグは、<#〜#>から始まって<#〜#>までの間に挟んで指定します。〜の部分は適当な文字を指定してください。実際HTMLに書出すときは、<#〜#>で囲んだ部分を適切に書き換えて、必要な回数だけ繰り返します。

必要な数とは、ループデータタグに割り当てられたループデータの数だけという事です。画面説明のところでもご説明しましたが、1つのループデータタグには複数のループデータを設定することができ、その数には制限はありません。その数だけ繰り返してループデータタグをループデータの内容に書き換えます。

<#〜#>はループデータタグの始まりと終わりを表す独自タグで、それ自身は何にも書き換えられることはありません。実際に、HTMLに書出したときには残らずに消えます。

実際にループデータタグ内で書き換えられるのは、ループデータタグ内の<$と$>で囲まれた部分になります。

ループデータタグはHTMLファイルにのみ利用される独自タグで、スタイルシートには適用されません。スタイルシートで利用できる独自タグは<$と$>だけです。


まずは下準備


それでは、実際にテンプレートを作ってみましょう。一番簡単なのは、とりあえずホームページ作成ソフトなどで、適当にサイトの骨格を作ってしまうということです。ここで使用するソフトは高機能なものである必要は全くありません。ベクターなどでダウンロードできるフリーのHTMLエディタで十分だと思います。

実際テンプレートを作るには、それなりのソフトを使ったほうが楽なのは楽です。一度、雛型を作ってそれを、テンプレーター「海苔巻」に合うように書き換えてあげれば、後のサイト作成・更新は劇的に効率化できるのですから、使えるものは使わせてもらいましょう。

骨格ですから、内容なんて記入する必要はありません。ここにメニュー、ここにトップ画像、ここにコンテンツなど、内容を入れる箱のようなものを配置していくのが作業になります。

さぁ、みなさん作ってみてください。もし、分からないようでしたら、テンプレーター海苔巻でサンプルのGrayToneというテンプレートがついていますので、それをHTML書き出しして、できあがったHTMLソースをご覧になってください。


実際に書き換える


ここで、実際に書き換えたいところを独自タグに書き換えていきます。

まずは、一番始めにご説明した最初の4行を追加します。

<@
HTML=index.html
STYLE=style.css
@>

それから、ざぁーっとHTMLソースを眺めていきます。作成したHTMLがスタイルシートを利用していない場合は、テーブルタグ(<table>や<tr>や<td>)のオンパレードだと思います。実際は、それでも、テンプレーター「海苔巻」を利用する分には問題はないのですが、テンプレート作成の際にはちょっと、ソースが見づらくなるかも知れません。

ですので、できればスタイルシートを利用してHTMLソースをかけるようになれば、簡単にテンプレートは作成できます。この際なので、スタイルシートを学習してみてはいかがでしょうか?意外に簡単だったりします(ブラウザ間の表示の違いが問題だったりしますが)。

で、ソースを見ながら、ここは書き換える必要がある。などと目星をつけたところを、独自タグに書き換えていきます。

例えばサイトタイトル。テンプレートを後から別のサイトに使いまわすことを考えれば、当然、独自タグに書き換えて、あとからテンプレーター「海苔巻」で書き換えることができるようにしておくのが良いです。

そのように、書き換えた方が良い部分は、どんどん独自タグにしていきます。

そして、ある程度書き換えが終わったら、ループデータタグを使用したいところを見つけます。見つけたら、繰り返したい部分を<#〜#>で括ります。〜には自由な名前をつけて下さい。

基本的には、コンテンツ部分。メニュー部分。あとは、サイドのボックス部分。などでしょうか。ここは、それぞれのテンプレートによって異なりますので良く考えて作成してください。通常は、メニュー部分とコンテンツ部分はループデータタグを利用することになろうかと思います。

ループデータタグのうち、メニュータグについては「ループタグの設定」ページをご覧下さい。


最後に確認


これでテンプレートデータができました。あとは確認作業です。

テンプレーター「海苔巻」を実行して、今作成したテンプレートを読み込みます。

「基本的な使用方法」をご覧になって、とりあえず適当にサイトを作ってみてください。そして、実際に書出してみて、希望通りにできあがっていたら完成です。もし、希望通りになっていなかったら、できあがった(書出された)HTMLファイルのソースを見て、どのように書き換えられているのかを調べてみてください。

これを繰り返していけば、テンプレートは完成します。

それでは、頑張ってステキなテンプレートを作成してください。もし、そのテンプレートをこの「ホームページテンプレーター」で紹介しても良いということであれば、ご連絡下さい。こちらで確認した上で、掲載できるとなれば紹介させていただきます。

基本的な使用方法

概要
テンプレートを選択する
ページを追加する
ループデータ名を追加する
各種設定をする
必要な画像データを保存する
書込フォルダ名を設定する
実際に書き込む
ブラウザで確認する


画面説明

操作画面(上部左側)
操作画面(上部右側)
設定画面
編集画面


基本事項の設定

テンプレートの基礎的部分
入力作業軽減機能
アクセスアナライザー対応
内部独自タグ
ページコード


ループタグの設定

ループタグとは
入力作業軽減機能
特殊ループタグ(menu)
特殊ループタグ2
特殊内部ループタグ
メニューリンクタブ
ループデータタグ不使用
最大表示記事数
逆順表示モード
下書きモード
外部リンク機能


スタイルシートの設定

サイトの印象を変える要素
スタイルシートの編集


ちょっと応用編

複数のデータファイルを扱う
書込みフォルダの指定
複数ファイルの具体例
ファイル連続書込み


テンプレートを作ろう

テンプレートの骨格
テンプレートとは何か
まずは下準備
実際に書き換える
最後に確認



Googleで検索