STEP4では、実際にサイト作成を進めていきます。
コードエディタ（VSCode）を使用している前提で進めますが、検索・置換等はほかのコードエディタでも似たことができるものが多いと思いますので、適宜置き換えて進めてください。
もしまだコードエディタをお持ちでない方は、自分に合ったコードエディタを探してみるのもおすすめです。
ダウンロードしたテンプレートの初期設定
espaceで配布しているテンプレートは、以下のhtmlファイルを含みます。
（※2023/9/13現在 古いテンプレートは構成が異なる場合があります）
| ファイル名 | 内容 |
|---|---|
index.html | INDEXページサンプル。 サイトの注意文などを記述してワンクッションページとして使用できる。 |
sample.html | 汎用ページサンプル（ヘッダー有）。 TOPページと同様にメニュー等が設置されているサンプル。 |
sample_no_header.html | 汎用ページサンプル（ヘッダー無） メニューやヘッダーがない、最小限の構成のページサンプル。 |
top.html | TOPページサンプル（＋テンプレートについて）。 |
これらのファイルをコピーしたり編集したりして、サイトの作成を行っていきます。
STEP2と同じように、ダウンロードしたテンプレートをVSCodeで開いてみてください。
STEP2でファイルの開き方と一緒に、タイトルの変更方法を確認しましたが、1ページずつ同じ作業をしていると時間がかかってしまいます。
VSCodeでは、複数ファイルを跨いでの検索・置換ができるため、活用して変更していきます。
タイトルを全て置き換える
まずはブラウザの「タブ」に表示されるサイト名を変更していきます。
各ファイル、<head>~</head>の中にある<title>~</title>が設定箇所です。
index.htmlとtop.htmlの両方を開いて確認すると、どちらにも設定されている項目であることがわかります。
こういった部分は、一括で変更してしまうと便利です。
- ［検索］ボタンをクリック
- 検索エリアに「
<title>Pukuri | espace</title>」をコピーして貼り付ける - 置換エリアに「
<title>サイト名</title>」を貼り付ける - ［すべて置換］ボタンをクリック
これで、検索結果エリアに表示されている部分がすべて置換されます。
同じように、サイト内に表示されているサイト名見出しも変更していきます。
今度は「Pukuri</a></h1>」で検索します。
リンクを含む検索の場合、開始タグ<a>から検索に含めると、設定しているパスが異なる場合に検索にヒットしないことがあります。
ヒットしない可能性がある部分を除外して検索キーワードを設定すると、漏れなく置換ができます。
主なページを作成する
次に、ページを作成していきます。
今回はSTEP3と同じく、以下のコンテンツを掲載する場合を想定し、サイト構成は画像の通り作成します。
| パス | ページ内容 | 複製元テンプレートファイル |
|---|---|---|
top.html | 更新ログ、サイトについて、メールフォーム | top.htmlをそのまま使用 |
contents.html | 作品リスト | sample.html |
links.html | リンク集 | sample.html |
contents/page1.html | 作品① | sample_no_header.html |
contents/page2.html | 作品② | sample_no_header.html |
上記表の「複製元テンプレートファイル」を複製し、ファイル名を「パス」の通り変更します。
メニューを設定する
次に、メニュー部分を設定していきます。
top.htmlでメニューを設定する
top.htmlの14行目から設定されている<nav>~</nav>がメニューの設定箇所です。
今回、メニューはページ毎にまとめて設定するため、「top」「contents」「links」の3項目にしました。
VSCodeの場合、Ctrlを押しながらhrefに設定したパスをクリックすると、該当のページを開くことができます。
開けない場合はパスを誤って設定しているため、設定を確認しましょう。
その他のページにもメニューを反映する
sample.htmlを開くと、未設定のメニューが存在します。
ここにも、top.htmlと同じメニューを設定していきます。
VSCodeは複数行の検索・置換も可能です。
「主なページを作成する」でsample.htmlを複製したページをいくつか作成したので、それらも一気に設定してしまいましょう。
sample.htmlのメニュー部分をすべてコピー- ［検索］ボタンをクリック
- 検索エリアに貼り付ける
top.htmlのメニュー部分をすべてコピー- 置換エリアに貼り付ける
- ［すべて置換］ボタンをクリック
これでcontents.htmlを開いてみましょう。
設定したメニューが反映されればOKです。
contents/page1.htmlをsample_no_header.htmlではなくsample.htmlで作成する場合など、ディレクトリを跨いだメニューの設定を行う場合は、置換後に正しいパスを設定する必要があります。
ディレクトリを跨いだファイルを複数検索する場合は、「含めるファイル」の絞り込みを使用すると、他のディレクトリに影響のない一括置換が可能です。
（以下のサンプルでは、「contents/*」でcontentsディレクトリ以下のファイルに限定して絞り込んでいます）
次のステップ
お疲れ様でした！
今回はタイトル、メニューの作成までを編集しました。
