カスタマイズ

新しいページの作り方

2023.07.10

このサイトにおける新しいページの作り方を紹介します。

HTMLファイルを複製する

このプロジェクトではテンプレートファイルを用意しています。
テンプレートページ

テンプレートファイルは/template/index.htmlになっており、これを複製してフォルダ名を変えることで新しいページになります。

例えば、/about/というページを作りたい場合、templateフォルダごと複製してtemplateをaboutに変更します。

/templateのコピー/index.html
↓
/about/index.html

CSSファイルを作成する

CSSの設計上、使用するパーツを都度headに指定する方法をとっています。
そのため新しくページを作成する場合には、対応するCSSファイルも新しく作成すると良いです。

例えばaboutページのCSSファイルを追加する場合、/assets/css/pages/about.cssを作りheadに挿入します。

<head>
  <!-- CSS -->
  <!-- pagesはここに挿入 -->
  <link rel="stylesheet" href="../assets/css/pages/about.css">
  <!-- / CSS -->
</head>

また、ボタンやカード型などの既製パーツも使用できます。
パーツ一覧から使用したいパーツがあれば記事を参考に追加してみてください。

JSファイルを作成する

ページ固有のJavaScriptを書きたい場合は新しくファイルを作成する必要があります。

/assets/js/にxxx-index.jsというファイルを作成します。
例えばaboutページならabout-index.jsになります。

$(function () {
  // ----------------------------------------------
  // aboutページ
  // ----------------------------------------------

  // ここに処理を追加
});

作成したJSファイルはheadタグのcommon.jsファイルの後に挿入してください。

<head>
  <!-- js -->
  <script type="module" src="./assets/js/common.js" defer></script>
  <script type="module" src="./assets/js/about-index.js" defer></script>
  <!-- / js -->
</head>

また、全ページ共通のJSは/assets/js/common.jsに追記します。

コンテンツを作成する

ページのベースができたのであとはどんどん作成していってください。
titleの変更やヘッダーフッター周りの変更なども忘れずに。

グッドラック！

この記事がよかったらシェアお願いします！

HTMLファイルを複製する

CSSファイルを作成する

JSファイルを作成する

コンテンツを作成する

share