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

テンプレートの基礎的部分


基本事項の設定を行います。基本事項とは1ページにつき1つだけ設定すれば良いという項目のことを指します。例えば、ページタイトル、メタタグ、連絡先メールアドレスなどです。

編集領域の「基本事項タブ」を選択してください。



おそらく、今後の全てのテンプレートに入ってくるであろう基本事項は以下の事項だと思います。

・title
・SiteDescription
・keyword
・SiteExp
・PageID
・Access
・Copyright

説明ボックスにも説明が表示されると思いますが、ここで簡単に説明しておきます。

titleはその名の通りサイト名です。ウィンドウの左上に出てくるタイトルです。これは必ず設定してください。これはSEO的にも大変重要だそうです。サイトのキーワードをちりばめてサイトタイトルを決定してください。検索エンジンに引っかかりやすくするためです。21文字くらいの所まで検索エンジンが読み込むと聞いたことがあります。

SiteDescription、keywordはメタタグです。正直言うと良く分かりません。SiteDescriptionにサイトの説明、KeyWordにサイトの重要なキーワードを設定するとよいと言われています。

SiteExpはサイトの説明部分です。こちらも重要キーワードをちりばめて作成してください。SEO対策です。大体、サイトの上部に表示されます。

PageID、Access。これは、アクセスアナライザー用のタグです。アクセスアナライザーのアカウントを持っていない方は空欄で結構です。詳しくは後ほど解説します。

Copyrightは著作権表示です。あなたの名前あるいはサイト名を入力してください。

これ以外の基本事項の設定については説明ボックスをご覧下さい。


入力作業軽減機能


非常に堅苦しい名前でありますが、簡単に言うと、入力作業を出来るだけ楽にしようという機能です。

基本事項は基本的に各ページごとに設定するようになっています。しかし項目によっては同じ物を使いまわしたいということもあろうかと思います。そんな場合に備えて、この機能が用意されています。

どういう機能かというと、設定項目がある場合に何も設定しないと、一番上のページの内容がそのまま設定される。という機能です。

これは、例えば左サイドに広告を掲載したいという場合を考えてみて下さい。その広告を各ページに掲載したいのだけれども、各ページごとに同じ広告の内容を入力するのは面倒臭い。修正しなければならない場合には、全てのページを修正しなければならない。こんなことになってしまいます。

そこで、この機能の登場です。

広告は一番最初のページだけに設定します。そして、2ページ目以降は何も設定しないで放っておきます。その状態で、HTMLサイト書出しボタンを押すと、なんと!何も設定していないはずなのに、1ページ目で設定した内容が表示される。という事なのです。

また、これとは別に、テンプレートで初期値として設定されている場合もあります。そのような場合は何も入力しないと、その初期値が使用されます。

最後に、初期値など自動的に値を設定して欲しくない場合は、ちょっと面倒臭いですが、半角スペースや改行を設定しておいてください。そうするとソフトのほうで未設定と判断しないで(自動的にデータを初期値に設定しないで)空データ(何もないデータ)として認識されます。


アクセスアナライザー対応


アクセス解析にはアクセスアナライザー。僕はここを愛用しているのですが、せっかくですのでテンプレートもアクセスアナライザーに自動的に対応できるようにしてしまいましょう。

基本事項のタグにはAccessタグとPageIDタグがあります(というかついているはずです)。ここに必要なデータを設定します。設定するページは一番上のページです。なぜなら、Accessというタグに入力作業軽減機能を適用させるためです。

Accessタグには、アクセスアナライザーが発行するアクセス解析タグを設定します。もし、入力作業軽減機能がない場合は全てのページにおいて、このアクセス解析タグを設定しなければならないのですが、入力作業軽減機能があるおかげで、2ページ目以降は1ページ目で設定したデータを再利用するのでデータを再度設定しなくても良いのです。

まず、PageIDタグにページIDを設定します。このページIDはアクセスアナライザーによると半角英数字10文字以内ということですので、そのように設定します。ルールはそれだけですので、他のページのページIDと重複しないように好きなページIDを設定してください。

つぎにAccessタグにアクセスアナライザーから発行されるアクセス解析コードを設定します。

<SCRIPT LANGUAGE="JAVASCRIPT"><!--

から始まるコードです。これをAccessタグに設定します。

アクセスアナライザーの説明ページから引用します。


ページ毎に解析したい場合は下記のようにIDの部分を変更して下さい。

var ID="xxxxxxxxx";

var ID="xxxxxxxxx-ページID";

例:
var ID="xxxxxxxxx-TOPPAGE";

注意事項:ページIDは10文字までの半角英数字で指定して下さい。



ここで注意点がありますので良く確認してください。上の例では例として、var ID="xxxxxxxxx-TOPPAGE"; となっていますが、ここを

var ID="xxxxxxxxx-<$PageID$>";

として下さい。これが唯一の注意点です。xxxxxxxxxはユーザーによって変わってくるので伏せましたが、既に与えられている数字があるはずです。それはそのままの数字を設定してください。

これでアクセス解析コードは自動的に挿入されます。PageIDタグは各ページごとに設定するのを忘れないで下さい。設定を省略出来るのはAccessタグの方だけです。PageIDタグは各ページごとに設定しなければいけません。


内部独自タグ


これは、基本事項のタグの値に特殊な値を使うことでそのページに適した文字列に書き換えてくれる機能です。Ver.20050609で追加されました。まずは機能の全貌をご紹介します。

【与える文字列とその機能】
<$PrevLink<パラメータ>$>:前のページへのリンク
<$NextLink<パラメータ>$>:次のページへのリンク
<$LoopDataCount<パラメータ>$>:指定したページのループデータの数
<$DirectNavi<パラメータ>$>:各ページへのダイレクトリンク
<$PageCount$>:そのページが何ページ目なのかを取得
<$date$>:書き込んだ日付を取得
<$year$>:書き込んだ年を取得
<$month$>:書き込んだ月を取得
<$_month$>:書き込んだ月を取得(1桁の場合は頭に0がつく)
<$day$>:書き込んだ日を取得
<$_day$>:書き込んだ日を取得(1桁の場合は頭に0がつく)
<$ページ名$>:ページ番号を取得(1の場合は空っぽになります)


それでは、ひとつづつ説明していきます。

<$PrevLink<パラメータ>$>:前のページへのリンク
<$NextLink<パラメータ>$>:次のページへのリンク

これらは、前のページ(次のページ)へのリンクを作成します。パラメータには表示されるテキストを記述します。例えばパラメータに「PrevPage」(あるいは「NextPage」)という値を与えたら「PrevPage」(あるいは「NextPage」)という文字列に前のページ(あるいは次のページ)へのリンクが貼られるということです。


<$LoopDataCount<パラメータ>$>:指定したページのループデータの数

これは、指定したページの指定したループタグにいくつのループデータが設定されているかということを取得します。

基本的にはページ名/ループタグ名という形でパラメータを与えます。そしてそれらを,(コンマ)で区切ることによって複数指定することが出来ます。

そして、上記ページ名に特殊な値を設定することで色々な値を取得することが出来ます。(ループタグは通常に設定)

・_All、_ToPrev、_ToPrev+1、_ToNow、_Now

の5つです。

・_Allは全てのページで指定したループタグにいくつループデータが使用されているかということを取得します。
・_ToPrevは一番はじめのページから前のページまで、指定したループタグにいくつループデータが使用されているかということを取得します。
・_ToPrev+1は_ToPrevで取得した値に1足したものを取得します。
・_ToNowは一番はじめのページから現在のページ(書き換えをしようとするページ)まで、指定したループタグにいくつループデータが使用されているかということを取得します。
・_Nowは現在のページ(書き換えをしようとするページ)で指定したループタグにいくつループデータが使用されているかということを取得します。

<$DirectNavi<パラメータ>$>:各ページへのダイレクトリンク

これは、各ページへダイレクトにリンクを貼るというものです。リンクテキストはページ数になります。よくネットショップなどで、たくさん商品がある場合に、目的のページへ直接リンクするような場合に見かけます。

パラメータは5つあります。これらは,(コンマ)で区切ります。
1.1ページ目から何ページ表示するか。
2.現在のページから前後各何ページ表示するか
3.最終ページから何ページ表示するか。
4.各ページの区切り文字
5.表示しないページを表す文字

となっています。例えばパラメータを、2,1,2,|,...と指定したとします。全部で20ページあったとして、10ページ目の表示はこのようになります。

1|2|...|9|10|11|...|19|20

このようになります。そして、数字をクリックするとそのページへジャンプします。現在のページ(今の場合は10ページ目)についてはリンクは貼られません。

<$PageCount$>:そのページが何ページ目なのかを取得

これは現在のページが何ページ目なのかということを取得します。アクセスアナライザーでページ解析をする場合に利用できると思います。

いままでは、各ページそれぞれ別々のページIDを設定していたと思いますが、この独自タグを利用することで(例えば、ID<$PageCount$>とすることで、1ページ目ならID1となり、2ページ目ならID2というように変換されます)全てのページで同じ値を使用することが出来るようになります。

<$date$>:書き込んだ日付を取得
<$year$>:書き込んだ年を取得
<$month$>:書き込んだ月を取得
<$_month$>:書き込んだ月を取得(1桁の場合は頭に0がつく)
<$day$>:書き込んだ日を取得
<$_day$>:書き込んだ日を取得(1桁の場合は頭に0がつく)

これらは書き込んだ日付を取得します。更新日を表示するのに使えると思います。

<$ページ名$>:ページ番号を取得(1の場合は空っぽになります)

ページ名を指定して書出されるファイル名の沿え字を取得します。沿え字とは、index3.htmlやindex5.htmlの3や5の部分です。

ファイル名はページ名の並びでつけられます。そのため、ページの並べ替えを行うと書き込まれるHTMLファイルのファイル名が変わってきてしまいます。

それに対応するために、ページ名でファイル名を指定するために追加した機能です。


最後に。間違いやすいのですが、この機能はソフトで入力する部分に適用されます。テンプレートで設定するのではありません。どういうことかというと、テンプレートにはいくつか独自タグが設定されていますが、それらの値として、これらの値<$PageCount$>等の値を使えるのです。

つまりは、これらの値を入力するのはソフトの「基本事項のエディタ部分」ですよということです。


ページコード


現在の「海苔巻」の仕様ではHTMLテンプレートは1つしか使用できません。そのためちょっとだけ違うテンプレートを使用したいときでも、別にデータファイルを用意しなければなりませんでした。

それはちょっと面倒なので今回のバージョンアップ(Ver.20050621)に伴い、HTMLテンプレート抽出機能を設けました(以前はテンプレート一部削除機能だったのですが、使いにくかったので抽出機能をメインにしました。削除機能も互換性のために残してはあります)

まずページにページコードという1文字のページを識別するためのコードを設定します。下図の赤く囲んだ所で設定します。



1文字はアルファベットでも良いですし、ひらがな・カタカナ・漢字でも構いません。設定は1文字以上できますが、1文字をオススメします。

そして、HTMLテンプレートで<_if@ページコード_>〜<_if_>という書式を使うことで、各ページで指定したページコードに応じて、<_if_>で囲った部分を抽出することが出来ます。

これで、ページごとにテンプレートを変更しているように見せることが出来ます。

具体的には、ページコードにAというページコードを設定したとします(Aとaなどの大文字小文字は区別します)。この場合、HTMLテンプレートに

<_if@A_>

ここにHTMLテンプレートが入ります。

<_if_>

という部分があったとするとページコードAをもつページでは、上記<_if@A_>と<_if_>で囲まれた部分が抽出されて使用できるようになります。

<_if@○○_>で指定するページコードは複数指定できます。その場合は単に列挙してください。

ページコードがAとBとCとDであるページに関して、複数のページコードで使用したい部分があるという場合は、

<_if@ABCD_>

ここにHTMLテンプレートが入ります。

<_if_>

というようにしていただければ結構です。

各ページにページコードを設定すると、基本タグ・ループタグに関しては設定できるタグのみ表示されるようになります。

基本的な使用方法

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


画面説明

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


基本事項の設定

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


ループタグの設定

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


スタイルシートの設定

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


ちょっと応用編

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


テンプレートを作ろう

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



Googleで検索