shortlink:http://modx.jp/?id=529MODXの投稿画面の本文フィールドはTinyMCEが組み込まれており、見た目を反映したワープロ感覚の記事編集ができます。このフィールドのデザインをサイトのイメージに合わせることができます。見出しや段落のフォント色、領域の横幅、背景色など。実際のサイトと同じイメージで編集できるため分かりやすいです。当サイトの投稿画面は上記のようになっています。見出しのスタイルや背景イメージ、本文領域の横幅などが実際のサイトの表示と揃っています。背景イメージは、スクリーンショットを加工して一枚の背景画像にしています。設定方法グローバル設定の「インターフェースとその他の機能」タブを開きます。「CSSファイルへのパス」の項目で、投稿画面の本文フィールド(textarea部分)に適用するスタイルシートのパスを設定します。基本的な設定はこれだけです。投稿画面を開いて確認してみてください。スタイルシートとのバッティングを避けるためには、固有のセレクタを設定する必要があります。TinyMCEプラグインの設定タブを開き、上記のように設定します。body_idというのはTinyMCE本体が持つオプションで、本文領域textareaをbodyと見立ててIDを与えることができます。してスタイルシートからアクセスでき、管理画面スタイルシートとのバッティングを避けることができます。classを指定するbody_classというオプションもあるので、必要に応じてid指定かclass指定かを選ぶことができます。当サイトでは上記のような指定になっています。コンテンツを入力できるのは横幅670pxの部分のみです。横幅を意識しやすいように、サイトイメージの背景画像を作って配置しています。スクリーンショットを適当に切り抜いて、薄い色合いに加工。サイドバーが左側にあるデザインのサイトでも、右側にあるものとして背景画像を作るとよいでしょう。問題は、p要素とかh2要素とかは分かるとしても、横幅や背景画像を設定するセレクタは何?ということなんですが、textareaではありません。さっきも少し書きましたが、body要素になります。下記の説明をお読みください。カスタマイズのコツTinyMCEのスタイルカスタマイズは、htmlのソースを見て確認できるわけではないので、直感的に難しく感じる人もいると思います。いう場合に便利なツールがあります。Firebugを用いると構造を把握しやすいです。値を一時的に書き換えて違いを確認することもできます。上記の画像で見られるとおり、TinyMCEのデフォルト状態ではmceContentBodyというclassが与えられており(セレクタがbodyになっていることに注目)、少し以前までのMODXではこれが用いられてました。この指定を外すためにはmceContentBodyというclass名を覚えておく必要があり、使い勝手が悪いため現在のMODXでは使っていません。要素単体でセレクタを指定しているので、簡単に上書きできます。投稿画面専用のスタイルシートを作るのではなく、サイトに用いているスタイルシートをそのまま設定することも可能です。そのためには、スタイルシートの構造がコンテンツ領域とテンプレート領域の区別を意識した作りになっている必要があります。あると見立ててデザインをコントロールできます。{.....}このようなスタイルシート構成になっていれば、投稿画面と共用できます。CMS運用を意識したサイト構成としては、サイトで用いるスタイルシートをtemplate.cssとcontent.cssの二つに分けると便利かもしれません。管理画面ではcontent.cssをサイトと共用します。今回はMODX自体というよりTinyMCEの使いこなしに関する話題でした。他のCMSでも応用できるかもしれません。TinyMCEは今回紹介したbody_id以外にも多くのオプションを備えており、工夫次第でカスタマイズの幅を広げることができます。さまざまなパターンの実装サンプルがありますので参考にしてみてください。