Home
上級編---要素の貼り付け （自動作成した、ｈｔｍｌファイルのカスタマイズ方法）
テンプレート作成ホルダー内に「htaccess」と「html」「image」「mailhtml」「pic」「meta_html」の6個のサブホルダーが出来ます。また 以下のファイルが生成されていることを確認してください。 また、ここにindex.htmlと編集用ファイル「WebProject..wcp」も同時に作成されます。
注3）Template作成ホルダー名、ファイル名と夫々の場所関係は変更できません。変更した場合は正しく動作しませんのでご注意ください。
● 作業の前の注意 戻る
ホームページへ要素を貼り付ける前に、次をご確認ください。
１．新規にホームページを作成する場合
新規にホームページを作成する場合は、テンプレート作成ホルダーに自動生成されるindex.html等のhtmlファイルをそのまま使用して下さい。各ファイルには必要なHTMLソースが既に作成されています。 各ファイル内の要素は自由に移動･削除･追加ができます。要素を誤って消した時はテンプレートから貼り付けることも出来ます。
これらのHTMLファイルを使用しない場合は、次の「既存のホームページを利用する場合」に従ってください。
２．既存のホームページを利用する場合
既存のホームページにテンプレートを貼り付ける場合は、テンプレートを貼り付ける前に、次のHTMLソースを手動で編集して、<BODY>・・・</BODY>間】に以下の赤で示すコードを入れてください。テンプレートで貼り付ける各要素はこのコードの間に入れてください。自動生成されるhtmlにも同様のコードが自動生成されています。ここからコピー＆ペーストで貼り付けてもOKです。
<BODY>
<FORM action="function.php" method="GET" enctype="multipart/form-data">
...............................................................................................................................
.....................................ここにぶっけん検索のhtmlコード(要素）が入ります.....
...............................................................................................................................
</FORM>
</BODY>
● htmlファイルの種類 戻る
htmlホルダーにはTemplateを含め11個のファイルが自動生成されます。
1). Template.html テンプレート本体画面
2) nfreg.html 物件新規登録画面
3) nfchange.html 物件修正・削除画面
4). nfshow_top.html 詳細表示画面レイアウト上
5). nfshow_bottom.html 詳細表示画面レイアウト下
6). nfshow_right.html 詳細表示画面レイアウト右
7) nfshow_left.html 詳細表示画面レイアウト左
8). header.html 一覧表のヘッダー部編集用
9). footer.html 一覧表のフッター部編集用
10) toiawaseform.html お問合せメール入力フォーム編集用
11). mail_result.html お問合せメール確認用画面編集用
1. マスターテンプレー画面(Template.html)
次に示すテンプレートに必要とする要素（最小単位の貼り付け部品）がすべてあります。この要素をそれぞれのページへコピーをします。 通常は各登録・修正、詳細画面は自動作成されるので、そのまま使用できますが、後から任意に追加変更したい場合にマスターテンプレートをご使用ください。
2. 新規登録画面（nfreg.html)
ここには新規登録用のnfreg.htmlのファイルがあります。自動作成されたそれぞれの画面は既にテンプレート本体から各要素が貼り付けられています。そのまま使用できますが、不要な要素を削除してご記入や無駄のない内容に変更してください。 特に選択項目で検索用に使う要素は不要なものもあります。
物件登録用画像は全部で8枚まで登録でき、使用しない場合も、そのまま残してご使用ください。 レイアウト「上下左右」は4種類のレイアウトを選べることを意味します。レイアウト「上」には好きな画像位置を作成できます。「上」は便宜上の名前です。 登録時にこのなかから任意の画像レイアウトを選び、目的にあった表示に変えられます。 詳細表示画面毎に、レイアウトデザインを後から変更できますので、目的に合わせてご使用ください。
また、「Picture1」→「外観図」のように変更できます。自動作成時の画面では【写真１】のように変更してあります。また、【説明文】は写真の説明を記入できます。不要時にはこの項目を削除できます。これらは写真にタイトルを付けたい時に有効です。
【ソートキー】
ソートする順番を決めるキーワードです。
ソートキーは標準は登録番号で機能しますが、モードCで入力項目６と選択項目３の組み合わせ時（例えば家賃など）にだけソートキーを追加できます。これ以外の組み合わせは出来ません。
【ソート順】
ソート順は登録順、降り順（数字の大きい値から小さい値へ）と昇り順（数字の小さい値から大きい値へ）の3種類を選択できます。
【地図用URL】
この欄には任意のURLを記入してください。 例）http://www.itechkk.com/
Google Mapのようなアドレスや、地図以外のサーバ内画像ファイルのURLなども記入できます。
「地図URL」の名称は任意に変更することができす。また、詳細画面上には
のアイコンが出来ます。これをクリックすると、指定したURLへジャンプします。「地図」のアイコンを変更する場合には、./image/map.gif を任意のgifファイルに変更してください。但し、ファイル名の変更は出来ません。
注） 初期値を編集して、項目の追加・削除をした場合には、以下のように未登録項目が自動作成されるので、削除してください。修正画面、詳細画面も同様に削除してください。また、そのまま残しても機能には関係ありません。
3. 修正・削除画面(nfchange.html)
ここには修正・削除用のnfchange.htmlのファイルがあります。自動作成されたそれぞれの画面はそのまま使用できますが、不要な要素を削除してご記入や無駄のない内容に変更してください。
「修正」と「削除」ボタン以外は新規登録画面と同じです。
4. 詳細表示画面(nfshow_top.html,nfshow_bottom.html,nfshow_left.html,nfshow_right.html)
この画面はnfshow_top.htmlです。検索結果としてホームページにそのまま表示されます。レイアウト、色、表示枠サイズ等のデザインを考えて作成します。ここで作成した画面をそのまま表示します。
画像は最大８枚表示できますが、不要な場合は任意の枚数を貼り付けてください。また画像のサイズや位置も自由に変更可能ですので、任意に変更して使用してください。
HPで最終表示すると、画面上にのボタンを表示します。以下の画面で{return_searcｈ}、{return_result}に相当します。
詳細表示画面用に4枚のnfshow_top.html, nfshow_bottom.html, nfshow_left.html, nfshow_right.htmlで示すファイルが4個あります。季節や内容で検索結果の画面を切り替えて表示します。検索結果毎に異なる写真の数やレイアウトなど、画面を変更して表示させることができます。
登録時にからそれぞれの画面を選択します。
【完成例】
5. 一覧表 ヘッダー/フッター画面(header.html,footer.html)
ヘッダー部、フッター部は任意に編集です。 ここで使用する画像ファイルは「image」ホルダーへ格納してください。
【注意】
public_html/以下に任意ホルダー（testなどの任意のフォルダー名））を作成して、 public_html/test/の中にWebProjectのファイルを格納した場合には、HPビルダーなどで編集したheader.html内の画像はそのままでは表示しません。
画像を表示しない場合は、hmtlコードで画像を読み込む場所がありますので、以下のように修正（青時部のようにフォルダー名を挿入）してください。これはa_btn001.gifをヘッダー部に表示させる場合を示しています。
ヘッダー部に下に {return} コードがありますが、削除しないでください。
これは最終的には【検索へ戻る】のボタンとなります。位置は左右へ移動できます。
ヘッダーとフッターを初期値の状態で表示させると、以下のように表示します。
6. 問合せフォーム画面(toiawaseform.html)
問合せフォームには、「お問合せメール入力フォーム編集用画面」と「お問合せメール確認用編集画面」があります。 どちらもソースコードを公開していますので、ご自由に編集してください。 そのままでも十分使用できます。 編集された場合のサポートはございません。 また、結果に対しては自己責任でお願いいたします。 また、お問合せフォームには、お気に入りチェックでチェックした物件番号が自動で入ります。
*部は入力必須事項で、入力しないと先へ移動しません。必要ない場合は、htmlソースを変更してください。
7. 送信内容の確認画面（mail_result.html）
8. 静的画面用インデックスホルダー（meta_html)
ぶっけん検索３では、詳細画面は動的画面として作成しますが、SEO対策として自動で静的画面を生成します。この静的画面は「登録番号.html」という名前で、../meta_htmlホルダー内に格納されます。また、以下の赤字部分は編集可能です。
編集は各物件登録前に管理画面の「Keywords Description」から修正をします。枠内に記述してください。
各詳細画面のファイル名は「登録番号.html」となります。手動で編集することも可能です。但し、各項目や画像等はPHPソフトとリンクしているので、直接編集することは出来ません。
「修正」ボタンを押すと各入力画面が出ますので、任意の文字を入力します。
なお、Keywords部は入力項目の内容で自動作成しますので、何も書かなくても問題はありません。
なお、Keywords部分は自動で単語を収集しますが、それ以外の文字を任意に追加することが出来ます。
【静的詳細画面】
<title>千葉県銚子市の不動産</title>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="description" content="学生向け物件">
<meta name="keywords" content="アパート,旭アパート,千葉県,旭市,なし,あり,200,000,1ヶ月・1ヶ月,中古,66㎡,なし">
9. 管理用画面TOP
htaccessのホルダー内にadmin_itech.htmlがあります。このファイルは管理者画面の表紙となります。管理画面として、このままご使用できますので、背景の色やレイアウトを変更してください。 ホームページ完成後にこのURLへアクセスすると現れます。 セキュリティの為、ホルダー名称を変えるか 、IDとパスワードによるアクセス制限の使用をお勧めします。
【使用方法】
「新規登録」・・・ このボタンを押すとnfreg.htmlへ飛びます。ここから登録番号（必須）必要な
情報を記入して最後に「登録」ボタンを押して終了します。
登録番号は英数等をご使用ください。
「修正画面」・・・ 修正・変更をしたい物件の登録番号を入力して、「修正画面」ボタンを押すと
nfchange.htmlへ飛びます。ここから修正・変更を行い、最後に「修正」或は
「削除」のボタンを押して終了します。
「検索」・・・・・・ 登録・修正を行う前に、管理者が現在の登録内容と登録番号を確認する為
に使用します。
【IDとパスワードによるアクセス制限】
htaccess機能をサポートしているサーバに限ります。 今ご使用のサーバ（レンタルサーバ等）の仕様をご確認ください。
別の方法としてパスワードリンクを使用する方法があります。管理画面へリンクする前に、パスワード入力画面が出て確認します。詳細はWeb等で検索してください。
（参考：ホームページビルダーV9以降には簡単にパスワードリンクを作成できるツールがあります。）
10. index.html画面
あなたのホームページのTOP画面で、ここにTemplateから次の要素を貼り付けます。貼り付ける位置、レイアウトは自由です。貼り付ける要素は自動生成されるindex.htmlを参照してください。ここに貼り付けられる要素は、Templateにある「検索用選択項目要素」と各種ボタン機能要素の
です。但し、
の要素は除きます。
【完成例 1】
上図のように、初期状態では選択内容は全て空欄となります。これは全項目を選択していることを意味します
【完成例 2】
任意文字検索だけの場合、検索文字間は1文字スペースで区切ります。
このページTOP
取扱説明インデックス
