CSSファイルをMODxで管理する
引用元：MODxでサイト構築
CSSファイルをMODxで管理する
コンテンツページだけでなく、CSSファイルもMODxの管理下に入れてしまう方法。
ちょっとしたCSS修正のためにFTPソフトやテキストエディタを起動する必要がなくなります。
ここでは、フレンドリーURLの設定が以前の記事で紹介したとおりになっているものとします。まず、「リソースの作成」をクリックして新しいリソースを作成し、「メイン」タブを下記のように設定します。
「ページ設定」タブの設定内容は下記の通り。
- 「エイリアス」にcssファイル名（例えば、common.css）を設定
「リソース名」は何でも良いですが、私は「エイリアス」と同じにしています。- 「使用テンプレート」は「(blank)」を選択
- 「メニューに表示」をオフ
特に書いていない項目は初期値のままでOKです。以上を設定し、「メイン」タブの内容欄にCSSを記述し、保存します。
- 「コンテントタイプ」は「text/css」を選択
- 「リッチテキストで編集」をオフ
- 「検索対象に含める」をオフ
このように作成したCSSをlinkタグで呼び出すには、テンプレート等に下記のように記述します。
<link href="[~id番号~]" rel="stylesheet" type="text/css" />
id番号は、管理画面のサイトツリーでリソース名の右に「common.css(20)」のように( ) 付きで書かれている番号です。
なお、この方法でCSSを呼び出す場合、併せてbaseタグを下記のように設定してください。
<base href="[(site_url)]" />
こうしておくことで、ページのURLの階層の深さに関わらず、サイトのURLを基準にlinkタグを参照する形になります。
つまり、上記のlinkタグはページの表示時には
<link href="common.css" rel="stylesheet" type="text/css" />
のように出力されます。
「http://ドメイン名.com/」と「http://ドメイン名.com/corporate/」と「http://ドメイン名.com/corporate/officer.html」では、上記のlinkタグが参照しようとする階層がそれぞれ異なりますが、上記のbaseタグが併せて設定してあることにより、同じ「http://ドメイン名.com/common.css」を参照することになります。
