logo
 

HTMLテンプレートをMODX用にカスタマイズする方法

HTMLテンプレートをMODXテンプレートに加工する手順は、以下の8ステップです。

1.テンプレートのダウンロード

自作HTML+CSSの場合

「トップページ(1階層目のページ)」と「2階層目(以降)のページ」をご用意ください。

既存(市販)テンプレートの場合

HTMLテンプレートをダウンロードしたら、ダウンロードしたZipファイルを展開し、以下の2点を確認しましょう。

  • 説明書(ReadMe)があるかどうか(説明書があれば、読んでおきましょう。)
  • テンプレート(HTML)が何種類あるか(トップページ用、記事ページ用など)

2.必要に応じて、画像、HTML、CSSを修正、確認

ロゴやボタンなどの画像を修正します。画像の修正に合わせて、HTML、CSSも修正します。この状態でブラウザに表示して確認します。

ロゴの画像を修正

3.HTMLテンプレートをMODXディレクトリ下のassets/templates/下に移動

テンプレートのフォルダをassets/templates/下に移動します。

4.HTMLテンプレートのアップロード

「説明書で除外するように指定されているファイル」や「ファイル名が日本語のファイル」をフォルダの外に移動します。FTPソフトでテンプレートをフォルダごと、サーバ上のassets/templates/下にアップロードします。

5.MODxテンプレート化のための画像パスの修正

テンプレートのディレクトリをassets/templates/下に移動したことに伴って画像パスをテキストエディタの置換機能を使って置換します。

パスを一括置換

これによりブラウザでは画像が表示されなくなりますが、気にしないでください。

置換前(例)置換後(例)
images/ assets/templates/テンプレートのディレクトリ名/images/
#####.css assets/templates/###/#####.css

次に、HTMLファイル上で<head>タグ内をMODX用に修正してからMODXのテンプレートに組み込むまでの手順を確認してみましょう。

関連記事

MODXとは

新着情報

 
RSS