目次
1.下層ページとは？
※クリックすると画像が大きくなります。
赤枠で囲まれた『index.html』ファイル以外のファイルが下層ページにあたります。
これはあくまで「テンプレート」ですので、このファイルを元に下層ページを作成してリンクを繋げていきます。
これはあくまで「テンプレート」ですので、このファイルを元に下層ページを作成してリンクを繋げていきます。
2.下層ページテンプレートの利用目的
| company.html | 会社概要などの情報を入力するのにお使い頂けるファイルです。 |
| page.html | テキストだけを入力する事ができるシンプルなベーステンプレートです。 |
| sitemap.html | テーブルが挿入されている、サイトマップ向けのテンプレートです。テーブルを利用して一覧などのページを作りたい場合などもベースとしてご利用頂けます。 |
| syousai.html | アフィリエイト案件の詳細情報を編集する為のベーステンプレートです。申し込みボタンなどが適切に配置されています。 |
| word.html | 用語集などのページのベーステンプレートです。見出し→コンテンツの繰り返しですので、様々な用途にご利用頂けます。 |
3.「page.html」をベースにページを作成する。
「page.html」を右クリック→コピー＆ペーストして、新しいファイルを作成する。
「page – コピー.html」というファイルが出来上がりましたので、ファイル名を変更してから編集のスタートです。
例：「page – コピー.html」→「saison_card.html」
4.メインコンテンツを編集する
■「page.html」60行目
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!--▼ページ右部コンテンツ--> <div class="main" style="margin-top:16px;"> <!--▼下層ページヘッダー画像--> <img src="images/head1.png" alt="" width="100%"/> <!--▲下層ページヘッダー画像--> <div class="i_cach"></div> <!--▼メインコンテンツリード--> <div class="read_r">ページ１</div> <!--▲メインコンテンツリード--> <!--▼コンテンツ--> <div class="conte_in"> <div class="texts"> <div class="texts_in"> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ </div> </div> </div> </div> <!--▲ページ右部コンテンツ--> |
このタグの部分はちょうど、上記画像の部分に当たります。
5.下層ページ用ヘッダーを変更する
■上記コードの5行目を変更します。
|
1 2 3 |
<!--▼下層ページヘッダー画像--> <img src="images/head1.png" alt="" width="100%"/> <!--▲下層ページヘッダー画像--> |
下層ページ用のヘッダーをバナー工房などで作成して、「images」フォルダ内に格納します。
例：「tokutyou_head.png」など
例：「tokutyou_head.png」など
|
1 2 3 |
<!--▼下層ページヘッダー画像--> <img src="images/tokutyou_head.png" alt="エッジプラス1の特徴" width="100%"/> <!--▲下層ページヘッダー画像--> |
『<img src="images/tokutyou_head.png" alt="エッジプラス1の特徴" width="100%"/>』の部分を対応したファイル名に変更してALT属性を加えて変更が完了です。6.リード・メインコンテンツを編集する
■上記コードの10行目以降を編集します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!--▼メインコンテンツリード--> <div class="read_r">ページ１</div> <!--▲メインコンテンツリード--> <!--▼コンテンツ--> <div class="conte_in"> <div class="texts"> <div class="texts_in"> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキ </div> </div> </div> </div> |
■変更例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!--▼メインコンテンツリード--> <div class="read_r">「エッジプラス1」の特徴</div> <!--▲メインコンテンツリード--> <!--▼コンテンツ--> <div class="conte_in"> <div class="texts"> <div class="texts_in"> アフィリエイト専用テンプレート「エッジプラス1」は、初心者の方でも簡単にサイト作成ができることを目的として作りました。 </p> <p>WP版ランキングタイプが2パターン。同じHTML版ランキングタイプが2パターン。何にでも使えるWP版ブログタイプ。 </div> </div> </div> </div> <p>全国の店舗などを対象としたHTML+CSVマップタイプの4種類をご用意しました。サイト作成でネックになっていたヘッダー画像なども、プロがあらかじめ作成した雛形をご用意しましたので、すぐにでもサイト作成に取り掛かることができます。 </p> </div> |
案件①の部分を、紹介したい案件名に変更する事によって変更可能です。『page.html』は比較的自由度の高いテンプレートです。HTMLの書き方次第では、画像を入れたり回りこませたりと様々なページの作成に対応しています。
ある程度決まった様式でページを作成されたい方は、『company.html』や『syousah.html』などをご利用下さい。
ある程度決まった様式でページを作成されたい方は、『company.html』や『syousah.html』などをご利用下さい。
HTMLテンプレートでページを作成する場合、トップページを編集するときと同じように
①タイトル・キーワード・ディスクリプションの編集
②H1タグの編集
③サブメニューの編集
は最低限、必要となってきます。
また、グローバルナビゲーションの編集・サイドバーの編集に関しては全てのページが出来上がった後に編集する項目ですので一番最後に編集するようにしましょう。
7.ファイルの上書き保存をする
※クリックすると画像が大きくなります。
TeraPadの矢印部分『ファイル』をクリックします。
※クリックすると画像が大きくなります。
TeraPadの矢印部分『上書き保存』をクリックします。
以上で、編集されたファイルが出来上がりました。
以上で、編集されたファイルが出来上がりました。