デザインを仕上げよう！
ダウンロードしたテンプレートファイルをあなた専用のデザインに変更していきます。
今回はsimple6のデザインでご紹介していきます。
他のデザインファイルもだいたい同じ感じなので参考にしてみて下さい。
ホームページの構成を考えよう！
テンプレートファイルにはトップページ(index.html)とサブページ(about.htmlやlink.htmlなど、テンプレートにより異なる)ぐらいしか入っていません。その他のページはあなたのHPの目的に応じて作っていきます。
最初にどんなページを作るか決めてしまいましょう。
今回の場合、トップページ(index.html)とサイト説明ページ(about.html)が入っていますのでそれ以外に以下のページを作る事にします。後からファイル名を使うのでメモ帳などに控えて手元に置いておきましょう。
■ 写真のページ (ファイル名は photo.html)
■ リンクのページ (ファイル名は link.html)
■ 掲示板のページ (外部からレンタル)
■ ブログのページ (外部からレンタル)
補足：ファイル名には日本語などの全角文字や記号は使えませんのでシンプルに半角英数字のみ使いましょう。アンダーバー「 _ 」も使えますがハイフン「 - 」は支障が出る場合があるようなのでできれば使わない方がいいでしょう。
ホームページビルダーを使って編集
後から混乱しないように、まず最初に上で決めたページを作っておきます。
おおかたのパソコンに最初から入っている「IBMホームページ・ビルダー」というホームページ作成ソフトを使って編集していきます。どこにあるか分からない場合は、パソコン画面の左下「スタート」から「すべてのプログラム」を選び、その一覧の中から「IBMホームページ・ビルダー」という文字を探してみて下さい。あったら開きます。
以下のようなアイコンが左上に付いてるのでクリック。無い場合、「ファイル」メニューから「標準モードで新規作成」を選ぶ。単なる「新規作成」とあるかもしれません。「どこでも配置モード」は選ばないで下さい。
以下のようにまっさらなページが出ます。
「ファイル」から「名前を付けて保存」を選ぶ。
新しいウィンドウが出ます。「保存する場所」にテンプレートのフォルダ名が入っているのを確認します。テンプレートのフォルダ名が入っていない場合はこちらをご覧下さい。
最初の時点でファイル名には自動で以下のように入っていますのでこれを先ほど決めたファイル名に変更します。手元に控えているメモ帳の出番です。
まずは写真ページの(photo.html)をファイル名に入力し、保存ボタンを押します。同様の手順で、リンクのページ(link.html)も保存します。他にページを準備したい場合、同じ手順を繰り返します。
全て保存したら、テンプレートフォルダを見てみましょう。上で保存したファイル名できちんと全て保存されていれば成功です。
ホームページビルダーに戻ります。
現時点で開いているページを一旦閉じてしまいます。
次はいよいよテンプレートファイル本体を開きます。
まずはHPのトップページとなるindex.htmlファイルを開きます。
index.htmlファイルにカーソルを合わせて右クリックすると「ホームページビルダーで開く」と出る場合もありますので、それをクリックして開くと簡単です。
開いたらまずHTMLソースを見てみます。HTMLソースタブをクリックします。
上の方に「●●●あなたのホームページ名●●●」とある部分をあなたのホームページ名に変更します。
次はHTMLソースの横のタブ「ページ編集」をクリックして最下部の「あなたのサイト名」部分をあなたのホームページ名に変更します。上で入力したものと同じでいいでしょう。
続いて上部の「HOMEPAGE TITLE」部分も同様に変更します。文字色やサイズの変更についてはこの後のスタイルシート設定で説明します。
※今回のsimple6のテンプレートの場合、タイトル欄には文字が直接入力されていますがこれが画像で入っている場合もあります。この場合、画像を外してからあなたのHP名を文字で入力して下さい。画像のようにはいきませんが、それなりに大きく出るような設定がしてあります。
詳しくは梱包のReadMeファイルを読んでみて下さい。
ここで一旦保存しておきましょう。
>> 保存ボタンを押したら「素材ファイルをコピーして保存」という小ウィンドウが出てきた場合の処理
>> 保存ボタンを押したらテンプレートフォルダに○○.bakという変なファイルが自動で出来た
さて、次はメイン画像の入れ替え作業です。
