ウェブデザイン制作/ウェブ・ポジショニングのウェブZYCO'S [ テンプレートを使うコツと概要 ]

テンプレートの概要

はじめに basic-5

 自分専用のヘッダー画像、メニュー、フッターを編集したmybody.htmlをテキストエディタで読み込み、テンプレートから使いたいレイアウトをコピー&ペーストして編集後、別の名前で保存します。図で示すとこんな具合になります。

ファイルを開く

 それでは練習です。まず、mybody.htmlをテキストエディタで読み込みます。(左図は読み込んだ後スクロールさせて▼▼▼ Main ▼▼▼を表示させた状態です。クリックすると拡大します。)

 そして、『テーマ別インデックス』からテンプレートのページをブラウザで開きます。ここをクリックすると別ウィンドウが開きますので『テーマ別インデックス』より「左レイアウト」を選択してください。

 [select all]をクリックして[html source]を選択範囲にしてからコピーします。ie6をお使いの場合は[select all]をクリックするだけでコピーできます。firefoxの場合は反転させたテキストの上で右クリックして「コピー」を選択する、もしくは、、Ctrl+c(コントロールキーを押しながら「c」を押します)で実行します。

     

※注意 うっかりしてmybody.htmlを上書きする場合もありますので、事前にmybody.htmlのバックアップを保存しておくと安心です。

ページのトップへ

コピー&ペーストして上書きする

テンプレートを使う - 2

mybody.htmlをテキストエディタで開きペーストする範囲を選択したところです。

 分りやすいようにmybody.htmlの<!--main-->の範囲は空白になっています。また▼と▲で他のコメントアウト部分と区別しており、『main』と記述されています。

 <!--main-->の部分がコンテンツが掲載される範囲です。これを左図(クリックすると拡大します)のようにマウスポインタで選択します。

 反転させたテキストの上で右クリックして「貼り付け」を選択する、もしくは、、Ctrl+v(コントロールキーを押しながら「v」を押します)で実行します。

ページのトップへ

ペーストを確認する

テンプレートを使う - 3

ペーストが終わった状態です。

 ペーストが終わりましたので「左レイアウト」のソースが貼り付けられたかどうか確認します。左図のように(クリックすると拡大します)なっていれば大丈夫です。

 そして名前を付けて(例えばsample.html)保存して、ブラウザでこのsample.htmlを読み込んで表示内容を確認してみてください。自分専用のボディにコンテンツが表示されている筈です。

 テキストエディタは開いたままにしておきます。次はペーストした部分を自分用に編集する練習です。

ページのトップへ

貼り付けた部分を編集する

テンプレートを使う - 4

編集する範囲を選択します

 今回利用したテンプレート「左レイアウト」では編集する箇所が三箇所あります。表示されているイメージ、クリックしたときの拡大イメージ、それと本文です。本文は二段落に分かれています。

 では、一段落目のテキストを左図のように(クリックすると拡大します)選択します。直接タイプしても良いのですが、慣れるまでは事前にテキストを用意しておいてコピー&ペーストした方がミスなく仕上がります。同様に二段落目も修正します。

 上書き保存して、正しく表示されるか再度ブラウザで確認してみてください。

 次にイメージです。このテンプレートではイメージサイズの横幅については任意で指定できますが、回り込んでくる本文とのバランスを考えてイメージの横幅を設定することが大切です。拡大イメージはブラウザが表示できる横幅を超えないことが原則です。テンプレート「左レイアウト」の説明に従ってイメージ部分を編集してください。

ページのトップへ

続いて「タイトル」貼り付けてみる

テンプレートを使う - 5  ここまで作業が終わりましたら、次にタイトルを貼り付けますので『テーマ別インデックス』より「ページのタイトル」を選択して作業を進めます。

 貼り付ける場所は「左レイアウト」のブロックの上になります。後はテキスト部分を編集します。  

 他に、必要なレイアウト、関連リンクなどを貼り付けて編集を加えて、ページを完成させます。

 以上ここまでがテンプレートの使い方の概要です。

 補足ですが、このマニュアルもテンプレートを使用して制作しておりますので、参考にしてください。

ページのトップへ