ディレクトリ構成図について
WordPressの場合
- SRCフォルダー
[src]
├ assets
│ ├index ---------------: TOPページに該当するファイルを格納
│ ├ common -------------: TOP以外のページに該当するファイルを格納
│ └ ogp -------------: OGP画像を格納
│
├ cms -------------: CMSで管理するファイルを格納するディレクトリ
│ └ wp-content -------------: wordpressのコンテンツに関するフォルダーを格納するディレクトリ
│ └ uploads -------------: CMSにアップロードされるファイルをまとめるディレクトリ
│ └ images -------------: CMSで管理する画像ファイルを格納するディレクトリ
│ └ news -------------: CMS管理の2階層目のnewsフォルダ
│
├ contact --------------: お問い合わせページのディレクトリ
│ ├ complate.ejs --------------: お問い合わせフォームの入力した内容を送信するファイル
│ ├ confirm.ejs --------------: お問い合わせフォームの入力した内容を確認するファイル
│ └ index.ejs --------------: お問い合わせフォームの入力するファイル
│
├ css -------------------: サイト全体のに関するスタイルを記述したファイルを格納するディレクトリ
│ ├ style.scss ---------------：分割されたSCSSファイルを統合する役目を持ちます
│ ├ editor-style.scss ---------------：Word Press editorのスタイルを記述したファイル
│ ├ foundation -------------：基本の設定をまとめたディレクトリ
│ │ ├ base.scss-----------：サイトのベースを記述するファイル
│ │ ├ print.scss------------：印刷時のスタイルを記述するファイル
│ │ └ reset.scss------------：スタイルのリセットやノーマライズをするファイル
│ │
│ ├ layout ------------------：全体のレイアウトに関するスタイルを記述したファイルを格納するディレクトリ
│ │ ├ header.scss ------：ヘッダーのスタイルを記述するファイル
│ │ ├ footer.scss -------：フッターのスタイルを記述するファイル
│ │ └ main.scss ---------：全体のレイアウトのスタイルを記述するファイル
│ │
│ ├ object --------------------：オブジェクトに関するフォルダーを格納するディレクトリ
│ │ ├ component --------------: 各種コンポーネントのスタイルを記述したファイルを格納するディレクトリ
│ │ ├ js --------------: Javascriptのスタイルを記述したファイルを格納するディレクトリ
│ │ ├ pages --------------: ページごとのスタイルを記述したファイルを格納するディレクトリ
│ │ ├ project --------------: 各種プロジェクトのスタイルを記述したファイルを格納するディレクトリ
│ │ └ utility --------------: ユーティリティのスタイルを記述したファイルを格納するディレクトリ
│ │
│ └ setting--------------------：サイトによって変更する設定をまとめたディレクトリ
│ ├ media-query.scss ----：メディアクエリの設定を記述
│ ├ functions.scss ----：Sassのファンクションを記述するファイル
│ ├ mixins.scss ----------：Sassのミックスインを記述するファイル
│ ├ typography.scss -----：フォント情報による設定を記述
│ └ variables.scss --------：変数設定用のファイル
│
├ js ----------------------: サイト全体のに関するスクリプトを記述したファイルを格納するディレクトリ
│
├ news ----------------------: 新着情報ページのディレクトリ（htmlファイルを格納）
│ ├ index.ejs --------------: 新着情報一覧ページ
│ └ editor.ejs --------------: wp editorで使えるアイテムのマークアップを記述するファイル
│
├ _breadline.ejs --------------: パンくずのマークアップを記述するファイル
│
├ _config.ejs --------------: Webサイトのさまざまなメタデータとページ情報を記述するファイル
│
├ _footer.ejs --------------: フータのマークアップを記述するファイル
│
├ _header.ejs --------------: ヘーダのマークアップを記述するファイル
│
├ index.ejs --------------: Topページのマークアップを記述するファイル
│
└ template.ejs --------------: 下層パーツに使えるマークアップの集まりを記述するファイル
[src]
├ assets
│ ├index ---------------: TOPページに該当するファイルを格納
│ ├ common -------------: TOP以外のページに該当するファイルを格納
│ └ ogp -------------: OGP画像を格納
│
├ cms -------------: CMSで管理するファイルを格納するディレクトリ
│ └ wp-content -------------: word pressのコンテンツに関するフォルダーを格納するディレクトリ
│ └ uploads -------------: CMSにアップロードされるファイルをまとめるディレクトリ
│ └ images -------------: CMSで管理する画像ファイルを格納するディレクトリ
│ └ news -------------: CMS管理の2階層目のnewsフォルダ
│
├ contact --------------: お問い合わせページのディレクトリ
│ ├ complate.ejs --------------: お問い合わせフォームの入力した内容を送信するファイル
│ ├ confirm.ejs --------------: お問い合わせフォームの入力した内容を確認するファイル
│ └ index.ejs --------------: お問い合わせフォームの入力するファイル
│
├ css -------------------: サイト全体のに関するスタイルを記述したファイルを格納するディレクトリ
│ ├ style.scss ---------------：分割されたSCSSファイルを統合する役目を持ちます
│ ├ editor-style.scss ---------------：WordPress editorのスタイルを記述したファイル
│ ├ foundation -------------：基本の設定をまとめたディレクトリ
│ │ ├ base.scss-----------：サイトのベースを記述するファイル
│ │ ├ print.scss------------：印刷時のスタイルを記述するファイル
│ │ └ reset.scss------------：スタイルのリセットやノーマライズをするファイル
│ │
│ ├ layout ------------------：全体のレイアウトに関するスタイルを記述したファイルを格納するディレクトリ
│ │ ├ header.scss ------：ヘッダーのスタイルを記述するファイル
│ │ ├ footer.scss -------：フッターのスタイルを記述するファイル
│ │ └ main.scss ---------：全体のレイアウトのスタイルを記述するファイル
│ │
│ ├ object --------------------：オブジェクトに関するフォルダーを格納するディレクトリ
│ │ ├ component --------------: 各種コンポーネントのスタイルを記述したファイルを格納するディレクトリ
│ │ ├ js --------------: Javascriptのスタイルを記述したファイルを格納するディレクトリ
│ │ ├ pages --------------: ページごとのスタイルを記述したファイルを格納するディレクトリ
│ │ ├ project --------------: 各種プロジェクトのスタイルを記述したファイルを格納するディレクトリ
│ │ └ utility --------------: ユーティリティのスタイルを記述したファイルを格納するディレクトリ
│ │
│ └ setting--------------------：サイトによって変更する設定をまとめたディレクトリ
│ ├ media-query.scss ----：メディアクエリの設定を記述
│ ├ functions.scss ----：Sassのファンクションを記述するファイル
│ ├ mixins.scss ----------：Sassのミックスインを記述するファイル
│ ├ typography.scss -----：フォント情報による設定を記述
│ └ variables.scss --------：変数設定用のファイル
│
├ js ----------------------: サイト全体のに関するスクリプトを記述したファイルを格納するディレクトリ
│
├ news ----------------------: 新着情報ページのディレクトリ（htmlファイルを格納）
│ ├ index.ejs --------------: 新着情報一覧ページ
│ └ editor.ejs --------------: wp editorで使えるアイテムのマークアップを記述するファイル
│
├ _breadline.ejs --------------: パンくずのマークアップを記述するファイル
│
├ _config.ejs --------------: Webサイトのさまざまなメタデータとページ情報を記述するファイル
│
├ _footer.ejs --------------: フータのマークアップを記述するファイル
│
├ _header.ejs --------------: ヘーダのマークアップを記述するファイル
│
├ index.ejs --------------: Topページのマークアップを記述するファイル
│
└ template.ejs --------------: 下層パーツに使えるマークアップの集まりを記述するファイル- DISTフォルダー
[dist]
├ assets -----------------------：pdfや画像素材ファイルを格納するディレクトリ
│ ├ index ---------------------：TOPページに該当するファイルを格納
│ ├ common ---------------------：TOP以外のページに該当するファイルを格納
│ └ ogp ----------------------：OGP画像を格納
│
├ cms ------------------------：CMSで管理するファイルを格納するディレクトリ
│ └ wp-content
│ └ uploads
│ └ images ----------：CMSで管理する画像ファイルを格納するディレクトリ
│ └ news ----------：CMS管理の2階層目のnewsフォルダ
│
├ contact --------------: お問い合わせページのディレクトリ
│ ├ complate.html ---------------------- : お問い合わせフォームの入力した内容を送信するファイル
│ ├ confirm.html ---------------------- : お問い合わせフォームの入力した内容を確認するファイル
│ └ index.html ---------------------- : お問い合わせフォームの入力するファイル
│
├ css -----------------------------：サイト全体のスタイルシートを格納するディレクトリ
├ js -------------------------------：jsファイルを格納するディレクトリ
├ news -------------------------：新着情報ページのディレクトリ（htmlファイルを格納）
│ ├ index.html --------------：新着情報一覧ページ
│ └ editor.ejs --------------: wp editorで使えるアイテムのマークアップを記述するファイル
├ apple-touch-icon.png--：apple-touch-icon
├ favicon.ico ------------------：favicon
└ index.html ------------------：TOPページMTの場合
CMSで管理するファイルは対象ディレクトリ内に「assets」フォルダを作成し格納する。
- SRCフォルダー
src
├ assets
│ ├index ---------------: TOPページに該当するファイルを格納
│ ├ common -------------: TOP以外のページに該当するファイルを格納
│ └ ogp -------------: OGP画像を格納
│
├ contact --------------: お問い合わせページのディレクトリ
│ ├ complate.ejs --------------: お問い合わせフォームの入力した内容を送信するファイル
│ ├ confirm.ejs --------------: お問い合わせフォームの入力した内容を確認するファイル
│ └ index.ejs --------------: お問い合わせフォームの入力するファイル
│
├ css -------------------: サイト全体のに関するスタイルを記述したファイルを格納するディレクトリ
│ ├ style.scss ---------------：分割されたSCSSファイルを統合する役目を持ちます
│ ├ editor-style.scss ---------------：Word Press editorのスタイルを記述したファイル
│ ├ foundation -------------：基本の設定をまとめたディレクトリ
│ │ ├ base.scss-----------：サイトのベースを記述するファイル
│ │ ├ print.scss------------：印刷時のスタイルを記述するファイル
│ │ └ reset.scss------------：スタイルのリセットやノーマライズをするファイル
│ │
│ ├ layout ------------------：全体のレイアウトに関するスタイルを記述したファイルを格納するディレクトリ
│ │ ├ header.scss ------：ヘッダーのスタイルを記述するファイル
│ │ ├ footer.scss -------：フッターのスタイルを記述するファイル
│ │ └ main.scss ---------：全体のレイアウトのスタイルを記述するファイル
│ │
│ ├ object --------------------：オブジェクトに関するフォルダーを格納するディレクトリ
│ │ ├ component --------------: 各種コンポーネントのスタイルを記述したファイルを格納するディレクトリ
│ │ ├ js --------------: Javascriptのスタイルを記述したファイルを格納するディレクトリ
│ │ ├ pages --------------: ページごとのスタイルを記述したファイルを格納するディレクトリ
│ │ ├ project --------------: 各種プロジェクトのスタイルを記述したファイルを格納するディレクトリ
│ │ └ utility --------------: ユーティリティのスタイルを記述したファイルを格納するディレクトリ
│ │
│ └ setting--------------------：サイトによって変更する設定をまとめたディレクトリ
│ ├ media-query.scss ----：メディアクエリの設定を記述
│ ├ functions.scss ----：Sassのファンクションを記述するファイル
│ ├ mixins.scss ----------：Sassのミックスインを記述するファイル
│ ├ typography.scss -----：フォント情報による設定を記述
│ └ variables.scss --------：変数設定用のファイル
│
├ js ----------------------: サイト全体のに関するスクリプトを記述したファイルを格納するディレクトリ
│
├ news ----------------------: 新着情報ページのディレクトリ（htmlファイルを格納）
│ ├ assets --------------: CMSで管理するファイルを格納するディレクトリ
│ ├ index.ejs --------------: 新着情報一覧ページ
│ └ editor.ejs --------------: 詳細ページ
│
├ _breadline.ejs --------------: パンくずのマークアップを記述するファイル
│
├ _config.ejs --------------: Webサイトのさまざまなメタデータとページ情報を記述するファイル
│
├ _footer.ejs --------------: フータのマークアップを記述するファイル
│
├ _header.ejs --------------: ヘーダのマークアップを記述するファイル
│
├ index.ejs --------------: Topページのマークアップを記述するファイル
│
└ template.ejs --------------: 下層パーツに使えるマークアップの集まりを記述するファイル- DISTフォルダー
[dist]
├ css -----------------------------：サイト全体のスタイルシートを格納するディレクトリ
├ contact --------------: お問い合わせページのディレクトリ
│ ├ complate.html ---------------------- : お問い合わせフォームの入力した内容を送信するファイル
│ ├ confirm.html ---------------------- : お問い合わせフォームの入力した内容を確認するファイル
│ └ index.html ---------------------- : お問い合わせフォームの入力するファイル
│
├ assets -----------------------：pdfや画像素材ファイルを格納するディレクトリ
│ ├ index ---------------------：TOPページに該当するファイルを格納
│ ├ common ---------------------：TOP以外のページに該当するファイルを格納
│ └ ogp ----------------------：OGP画像を格納
│
├ js -------------------------------：jsファイルを格納するディレクトリ
│
├ news -------------------------：新着情報ページのディレクトリ（htmlファイルを格納）
│ ├ index.html --------------：新着情報一覧ページ
│ └ editor.ejs --------------: wp editorで使えるアイテムのマークアップを記述するファイル
│
├ apple-touch-icon.png--：apple-touch-icon
├ favicon.ico------------------：favicon
└ index.html------------------：TOPページ