cssファイルやjsファイルをサーバへアップロードする

この記事は、テンプレートのダウンロードの記事の続きで、無料ホームページテンプレート.comのテンプレートをMODXで使う時の方法を書いています。

MODXで使うテンプレートのcssファイルやjsファイルをサーバへアップロードします。

MODX公式サイトでは、テンプレートのアップロード先は、　ドメイン/assets/templates/　になっています。

ドメイン/assets/templates/　でも良いのですが、静的なhtmlファイルとしてエクスポートしたくなったときに、assets/templates/フォルダまで必要になってきます。

ドメイン直下のcssフォルダやjaフォルダの方が、直感的にわかりやすいので、ドメイン直下にcssフォルダとjsフォルダを作成し、その中にアップロードします。

cssフォルダのアップロード

FTPソフトを起動し、サーバに接続し、ローカル側が解凍したテンプレートのフォルダを表示しておく。

サーバ側のドメイン直下で右クリックし、「フォルダ作成」をクリック。

半角英字で　css　と入力し、「OK」をクリック。

cssフォルダに移動し、テンプレートを複数作ることを考え、今回のテンプレート用のフォルダを作る。

ここでは、「tpl_027」というフォルダを作る。

サーバ側の作成したフォルダ（ここでは、tpl_027）に移動し、テンプレートの中の「style.css」ファイルをアップロードする。

テンプレート（html）側のcssファイルの読み込みは、head内に

 と書きます。

jsファイルのアップロード

サーバ側はドメイン直下に移動し、右クリックで「フォルダ作成」をクリック。

半角英字で　js　と入力し、「OK」をクリック。

ローカル側もサーバ側も「js」フォルダに移動し、「css3-mediaqueries.js」ファイルと「html5.js」ファイルをアップロードする。

cssの時は、テンプレート専用のフォルダ（tpl_027）を作成しましたが、「css3-mediaqueries.js」ファイルも「html5.js」ファイルも共有で使えるファイルなので、今回はテンプレート専用のフォルダは作らず「js」フォルダ直下に置きます。

css3-mediaqueries.js　＝　レスポンシブウェブデザインに対応していないIE8以下のブラウザでも対応できるようにするためのファイルです。

html5.js　＝　html5の要素に対応していないIE8以下のブラウザでも対応できるようにするためのファイルです。

テンプレート（html）側のjsファイルの読み込みは、head内に

 と書きます。

次は、テンプレートのhead要素の編集をします。

この記事は、無料ホームページテンプレート.comのテンプレートを使っています