CSSファイルをMODxで管理する

引用元:MODxでサイト構築

CSSファイルをMODxで管理する

コンテンツページだけでなく、CSSファイルもMODxの管理下に入れてしまう方法。
ちょっとしたCSS修正のためにFTPソフトやテキストエディタを起動する必要がなくなります。

ここでは、フレンドリーURLの設定が以前の記事で紹介したとおりになっているものとします。

まず、「リソースの作成」をクリックして新しいリソースを作成し、「メイン」タブを下記のように設定します。

  • 「エイリアス」にcssファイル名(例えば、common.css)を設定
    「リソース名」は何でも良いですが、私は「エイリアス」と同じにしています。
  • 「使用テンプレート」は「(blank)」を選択
  • 「メニューに表示」をオフ
「ページ設定」タブの設定内容は下記の通り。
特に書いていない項目は初期値のままでOKです。
  • 「コンテントタイプ」は「text/css」を選択
  • 「リッチテキストで編集」をオフ
  • 「検索対象に含める」をオフ
以上を設定し、「メイン」タブの内容欄に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」を参照することになります。

このページの先頭へ